Fatal编程技术网
  • javascript/
  • Javascript 运行JSX预处理器并使用ES6语法

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

javascript reactjs ecmascript-6

Javascript 运行JSX预处理器并使用ES6语法,javascript,reactjs,ecmascript-6,babeljs,Javascript,Reactjs,Ecmascript 6,Babeljs,我是按照这个指南来的 我目前正在使用这个命令编译我的jsx npxbabel--watchsrc--out dir--预设响应应用程序/产品 不幸的是，我无法使用ES6语法，例如 从“MyComponent”导入MyComponent 它没有将其转换为ES5语法，因此我得到了“uncaughtSyntaxerror:Unexpected identifier” “Babel是一款将JSX和ESNext（ES6及以上版本）转换为ES5的传输工具，即使是旧浏览器也能理解您的代码。然而，它并没有捆绑

我是按照这个指南来的

我目前正在使用这个命令编译我的jsx

npxbabel--watchsrc--out dir--预设响应应用程序/产品

不幸的是，我无法使用ES6语法，例如

从“MyComponent”导入MyComponent

它没有将其转换为ES5语法，因此我得到了“uncaughtSyntaxerror:Unexpected identifier”

“
Babel是一款将JSX和ESNext（ES6及以上版本）转换为ES5的传输工具，即使是旧浏览器也能理解您的代码。然而，它并没有捆绑功能，这意味着它不会将文件的内容导入并将所有代码放在一个文件中。为此，您需要使用像Webpack这样的捆绑程序

配置Webpack可能会很乏味，我建议您使用Webpack和Babel预配置

构建完应用程序后，为了将其发送到当前网站，您只需在index.js中用网站中元素的id替换root即可


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



ReactDOM.render（，document.getElementById（'root'）；


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


我希望这有帮助
你可以提供你的配置文件，用于<代码> Babel< /C>吗？你可能想考虑使用“需要”语法代替导入。常量MyComponent=require（“MyComponent”）；它并没有将其转换为ES5语法-除非这是模块化环境（节点），否则没有用于导入的ES5语法。巴别塔应该与捆绑机（网页包）一起使用。