Describes the configurations of webpack babel and webpackbabel.

Describes the configurations of webpack babel and webpackbabel.

What is Babel?

Babel is a JavaScript compiling platform. Its strength lies in its ability to help you achieve the following through compilation:

1. Use the next generation of javascript (ES6, ES7 ,......) Code, even if the current browser does not complete support;
2. Use JavvScript-based extension languages, such as React JSX;

Npm I babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2-D

Usage of babel

First babel-preset-es2015 has been abandoned, you can use babel-preset-env to replace it, the latter is better and more convenient than the former, here is not to repeat.

Babel-polyfill VS babel-runtime VS babel-plugin-transform-runtime

1. First, babel-polyfill sets global settings for all APIs. Global variables are also contaminated.
2. Babel-runtime requires the APIS you need, such as Object. assign (). Will first require ()
3. Babel-plugin-transform-runtime is the most recommended. It does not require () or global pollution. What's more, it is packed on demand and fully automated.

Start

/***** Webpack. config. js *** // Add {test:/\ to the rule :/\. js $/, use: 'babel-loader ', // only process the following in the src directory. // You can also configure a rule to process the rules under node_modules. // I remember that swiper did not know which version directly gave me the es6 syntax originally compiled, resulting in browser incompatibility. Include: [resolve ('.. /src ')]}/*****. babelrc ***** // set the transcoding rule for the presets field {"presets": [["env", {"modules": false, // environment to be supported, optional: chrome, edge, or node: 6.5, node: current ...... "targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}], "stage-2"], // babel-transform-plugin content that does not work by default during transcoding, for example, Object. assign () and so on "plugins": ["transform-runtime"]}

Which syntaxes can be solved by presets. Package

What syntaxes can babel-plugin-transform-runtime address. Package

Others. More

Finally, babel seems to have to be configured a lot. In fact, it is not that complicated after an official simplification.

Github

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.