使用Babel将JSX转换为JS

Question

我刚开始使用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，但是没有任何反应。 有人能指出我做错了什么吗？

- iJade

---

你在哪里运行 babel 命令？此外，在 .babelrc 中使用 react 预设可能更好。 - Davin Tryon

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

- yussan

Answer 2

只需按照https://www.npmjs.com/package/babel-plugin-transform-react-jsx上的说明进行操作。

首先，创建一个名为test的新文件夹，并从该文件夹初始化一个新项目：

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文件夹运行转换命令：

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

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

- m1kael

---

这给了我以下错误：Uncaught ReferenceError: require未定义。我如何在babel中包含它？ - Teoman shipahi

Answer 3

截至2023年，如果您正在使用babel将jsx转换为js，则需要执行以下操作：

安装软件包

在您的计算机上全局安装以下软件包：

npm install -g @babel/cli
npm install -g @babel/core
npm install -g @babel/preset-react

或者将以下内容安装为项目依赖项（我的个人偏好）：

npm install --save-dev @babel/cli
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-react

创建配置文件

在项目根目录下创建一个.babelrc配置文件，至少包含以下设置：

{
    "presets": ["@babel/preset-react"]
}

如果您有更复杂的用例，请查看babel文档，确定您可能需要添加哪些其他设置。您可以在@babel/preset-react页面上找到将jsx编译为js的设置。

编译

您可以通过在终端中运行以下命令将任何jsx文件编译为js：

npx babel [jsx-file-here.jsx] -d [output-directory]

如果您的jsx文件导入任何内容，请记住以下几点：

1. 这不会导入任何已导入的代码。您还需要编译任何已导入的文件。然后，您可以将其用作浏览器模块：见下面2点。
2. JS导入现在得到了广泛支持(参见)，但您需要在HTML中的脚本标记中添加type="module"。
3. 请记住仍然必须在导入语句中包含文件扩展名.js！没有任何浏览器会将import Foo from './bar'解释为import Foo from './bar.js'。
4. 如果不想执行前面的操作，可以使用类似rollup.js的工具将所有文件捆绑到单个脚本中。

- Blizzardengle

Answer 4

您可以配置webpack并使用babel作为加载器来转译您的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"
    }
}

教程

- Shubham Khatri