运行JSX预处理程序并使用ES6语法

Question

我在这里遵循了本指南

https://reactjs.org/docs/add-react-to-a-website.html

并且当前正在使用此命令来编译我的jsx

npx babel --watch src --out-dir . --presets react-app/prod

不幸的是，我无法使用

之类的ES6语法

import MyComponent from 'MyComponent';

它没有将其转换为ES5语法，因此我收到“未捕获的SyntaxError：意外的标识符 “

Answer 1

Babel是一个将您的JSX和ESNext（ES6及更高版本）转换为ES5的编译器，它甚至使旧的浏览器也能理解您的代码。但是，它不具有捆绑功能，这意味着它不会获取导入文件的内容，也不会将所有代码发送到一个文件中。为此，您需要使用Webpack之类的捆绑器。

配置Webpack可能很乏味，我建议您使用create-react-app来使用预先配置的Webpack和Babel。

构建完应用程序后，要将其发布到当前网站，您只需在 index.js 中将root替换为网站元素的ID。

invoke

然后运行 npm run build 来创建要在build文件夹中部署的文件。从那里，只需复制bundle.js并将其包含在您的网站中即可。

我希望这会有所帮助！