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插件。

安装预设模块npm install --save-dev @babel/preset-react
将预设添加到您的.babelrc文件中，即

{ “预设”：[“ @ babel / preset-react”] }
运行Babel脚本babel app.jsx -d dist

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

有关preset-react here

的更多信息

Babel命令行未转译导入语句-React

1 个答案: