使用 babel 将 JSX 转换为 JS

Posted 2023-03-07

【中文标题】使用 babel 将 JSX 转换为 JS

【英文标题】：Transform JSX to JS using babel

【发布时间】：2017-08-24 00:14:20

【问题描述】：

我是 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，但没有任何反应。 谁能指出我做错了什么？

【问题讨论】：

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

【参考方案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

【参考方案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

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

【讨论】：

这给了我以下错误：Uncaught ReferenceError: require is not defined。如何将它包含在 babel 中？

【参考方案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