Babel 命令行不转换导入语句 - React

Question

我有以下 JSX 文件。

import React from "react";

export default class Code extends React.Component {
    render() {
        return <div></div>
    }
}

React.render(<Code />, document.getElementById('code'));

我正在使用以下命令从命令行运行 Babel

babel --plugins transform-react-jsx app.jsx -d dist

我得到以下输出

import React from "react";
export default class Code extends React.Component {
  render() {
    return React.createElement("div", null);
  }

}
React.render(React.createElement(Code, null), document.getElementById('code'));

这显然不会在浏览器中运行，因为导入和导出无效。我需要为 Babel 指定哪些设置才能从 es6 导入转换？

这是我的 .babelrc 文件

{
    "plugins": [
        [
            "transform-react-jsx",
            {
                "pragma": "dom" // default pragma is React.createElement
            },
        ]
    ]
}

谢谢

Answer 1

如何使用preset-react 代替，它还将包含transform-react-jsx 插件。

1. 安装预设模块npm install --save-dev @babel/preset-react

2. 将预设添加到您的.babelrc 文件中，即

   { “预设”：[“@babel/preset-react”] }

3. 运行你的 babel 脚本babel app.jsx -d dist

如果您不想添加.babelrc 文件，只需在安装预设模块babel --presets @babel/preset-react app.jsx -d dist 后运行脚本即可

关于preset-reacthere的更多信息