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

只需按照https://www.npmjs.com/package/babel-plugin-transform-react-jsx

上的说明操作即可

首先，创建一个新文件夹test，然后从文件夹init中创建一个新项目：

npm init

安装babel CLI

npm install --save-dev babel-cli

然后安装babel-plugin-transform-react-jsx

npm i babel-plugin-transform-react-jsx

在test文件夹中创建示例jsx文件index.jsx

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

最后，从test文件夹

在您的终端中运行transofmation命令

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

您将在终端窗口中看到输出。

Answer 3

您可以配置webpack并使用babel作为transpile 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

使用babel将JSX转换为JS

3 个答案: