时间戳

首页 > 解决方案 > 运行 JSX 预处理器并使用 ES6 语法

javascript - 运行 JSX 预处理器并使用 ES6 语法

问题描述

我在这里遵循了本指南

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 语法，因此我得到“Uncaught SyntaxError: Unexpected identifier”

标签： javascriptreactjsecmascript-6babeljs

解决方案

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

配置 Webpack 可能比较繁琐，我建议你使用create-react-app来使用预配置的 Webpack 和 Babel。

当您完成构建应用程序后，为了将其发送到您当前的网站，您可以简单地将 root 替换为您网站中index.js中元素的 id 。

ReactDOM.render(<App />, document.getElementById('root'));

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

我希望这有帮助！

推荐阅读