如何使用babel和使用浏览器本机ES6来扫描React JSX和ES6模块 [英] How do I transpile React JSX and ES6 modules with babel and use browser native ES6

问题描述

我遇到的问题是使用反应应用程序Babel预设时，Babel阻止我使用浏览器本机ES6功能。

The problem I have is when using the "react-app" Babel presets, Babel prevents me from using browser native ES6 features.

如何使用<强大的> ES6浏览器原生特征可在最新的Chrome
中 http： //kangax.github.io/compat-table/es6/

How do I use the ES6 browser native features available in the latest Chrome http://kangax.github.io/compat-table/es6/

同时使用 ES6模块系统，目前没有支持
https：//developer.mozilla .org / en / docs / Web / JavaScript / Reference / Statements / import

While also using the ES6 module system, which currently has no support https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import

另外继续使用JSX语法编写React Components？

And additionally keep using the JSX syntax while writing React Components?

推荐答案

我找到的解决方案是执行以下操作。

The solution I found was to do the following.

创建一个.babelrc文件
然后使用下面的设置

Create a .babelrc file Then use the settings below

{
    "presets": ["react"],
    "plugins": ["transform-es2015-modules-umd"]
}

预设将对设置加载处理JSX透明的模块
https://babeljs.io/docs/plugins/preset-react/

The presets react setting loads the modules that handles the JSX transpilation https://babeljs.io/docs/plugins/preset-react/

转换es2015模块umd设置处理模块系统。
https://babeljs.io/docs/plugins/transform -es2015-modules-umd /

The transfrom es2015 modules umd setting handles the modules system. https://babeljs.io/docs/plugins/transform-es2015-modules-umd/

这篇关于如何使用babel和使用浏览器本机ES6来扫描React JSX和ES6模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！