我是 babel 的新手，我正在尝试将我的 main.jsx 文件转换为 main.js。我安装了以下 babel 插件。
npm install --save-dev babel-plugin-transform-react-jsx
在应用程序根目录中创建了一个名为 .babelrc 的文件。
{
"plugins": ["transform-react-jsx"]
}
我的应用程序正在使用 express 服务器，因此在运行 node app.js 时，我希望 babel 将 main.jsx 转换为 main.js，但没有任何react。任何人都可以指出我做错了什么吗？
如果您只是使用 babel 将 jsx 转换为 js，这就是您所需要的：
安装
babel-cli为全局（可选）sudo npm install -g babel-clibabel-preset-es2015（可选。如果您的代码使用 es6 标准）npm install babel-preset-es2015 babel-preset-react（必需）配置
在您的项目根目录中，添加此文件.babelrc并将其写入其中
{
"presets": ["es2015", "react"]
}
或者
{
"presets": ["react"]
}
跑
babel source_dir -d target_dir
只需按照https://www.npmjs.com/package/babel-plugin-transform-react-jsx 上的说明进行操作
首先，创建一个新文件夹 ，test并从该文件夹中初始化一个新项目：
npm init
安装 babel 命令行
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
您将在终端窗口中看到输出。
您可以配置的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"
}
}