使用 babel 将 JSX 转换为 JS答案

【问题标题】：Transform JSX to JS using babel使用 babel 将 JSX 转换为 JS
【发布时间】：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 中使用。

标签： node.js reactjs express babeljs

【解决方案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

【讨论】：