如何使用 babel 编译 React JSX 和 ES6 模块并使用浏览器原生 ES6答案

【问题标题】：How do I transpile React JSX and ES6 modules with babel and use browser native ES6如何使用 babel 编译 React JSX 和 ES6 模块并使用浏览器原生 ES6
【发布时间】：2017-04-12 22:36:22
【问题描述】：

我遇到的问题是在使用“react-app”Babel 预设时，Babel 阻止我使用浏览器原生 ES6 功能。

如何使用最新版 Chrome 中提供的 ES6 浏览器原生功能 http://kangax.github.io/compat-table/es6/

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

另外在编写 React 组件时继续使用 JSX 语法？

【问题讨论】：

标签： reactjs ecmascript-6 babeljs react-jsx es6-modules

【解决方案1】：

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

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

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

presets react 设置加载处理 JSX 转译的模块 https://babeljs.io/docs/plugins/preset-react/

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

【讨论】：