Transform JSX to JS using babel

问题:

I'm new to babel and I'm trying to convert my main.jsx file to main.js. I installed the following babel plugin.

npm install --save-dev babel-plugin-transform-react-jsx

Created a file called .babelrc in the application root directory.

{
   "plugins": ["transform-react-jsx"]
}

My app is using the express server, so on running node app.js I was expecting the babel to transform main.jsx to main.js but nothing happens. Can any one point out what I'm doing wrong ?

回答1:

if you are only using babel to transform jsx to js, this is what you need :

installation

• install babel-cli as global (optional) sudo npm install -g babel-cli
• install babel-preset-es2015 (optional. if your code using es6 standard) npm install babel-preset-es2015
• install babel-preset-react (required)

configuration

in your root of project, add this file .babelrc and write this to it

{
  "presets": ["es2015", "react"]
}

or

{
  "presets": ["react"]
}

run

babel source_dir -d target_dir

回答2:

Just follow the instructions at https://www.npmjs.com/package/babel-plugin-transform-react-jsx

First, create a new folder, test, and from the folder init a new project:

npm init

Install babel CLI

npm install --save-dev babel-cli

Then install babel-plugin-transform-react-jsx

npm i babel-plugin-transform-react-jsx

In the test folder create a sample jsx file index.jsx

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

And finally, run the transofmation command in you terminal from the test folder:

.\node_modules\.bin\babel --plugins transform-react-jsx index.jsx

You'll see the output in you terminal window.

回答3:

You can configure webpack and use babel as a loader to transpile your jsx

var webpack = require('webpack');
var path = require('path');

module.exports ={

    context: path.join(__dirname, "src"),
    devtool: "inline-sourcemap",
    entry: "./main.js",
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015','stage-0'],

                }
            }
        ]
    },
    output: {
        path: __dirname+ "/src",
        filename: "client.min.js"
    }
}

Tutorials