How do I transpile React JSX and ES6 modules with babel and use browser native ES6

问题

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

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

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

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

回答1:

The solution I found was to do the following.

Create a .babelrc file Then use the settings below

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

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

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

来源：https://stackoverflow.com/questions/40857289/how-do-i-transpile-react-jsx-and-es6-modules-with-babel-and-use-browser-native-e