使用babel将JSX转换为JS

Question

我是babel的新手,我正在尝试将main.jsx文件转换为main.js. 我安装了以下babel插件.

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

在应用程序根目录中创建了一个名为.babelrc的文件.

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

我的应用程序正在使用快速服务器,所以运行节点app.js我期待babel将main.jsx转换为main.js但没有任何反应.谁能指出我做错了什么？

Answer 1

如果你只使用babel将jsx转换为js,这就是你需要的:

安装

• 安装babel-cli为全局(可选)sudo npm install -g babel-cli
• 安装babel-preset-es2015(可选.如果您的代码使用es6标准)npm install babel-preset-es2015
• 安装babel-preset-react(必填)

组态

在项目的根目录中,添加此文件.babelrc并将其写入其中

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

要么

{
  "presets": ["react"]
}

跑

babel source_dir -d target_dir

Answer 2

您可以配置 webpack 并将其用作jsx 的babel加载程序transpile

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"
    }
}

教程