Babel is a JavaScript compiler that uses the latest syntax with converters without waiting for browser support. But only syntax conversions are supported, not new apis. So there are two aspects to using Babel: syntax transcoding and API support.

The installation

yarn add -D babel-cli babel-core babel-preset-env
Copy the code

In the Web project root directory, create the. Babelrc configuration file, config

{ 
    "presets": ["env"]}Copy the code

Such a basic usable configuration would be fine.

The syntax conversion

Babel offers a number of conversion packages:

However, this needs to be introduced one by one, which is tedious and difficult to manage, so several plug-in integration is provided:

Babel-preset -env is what Babel now recommends to install, The default is equivalent to babel-preset-latest = babel-preset- ES2015 + babel-preset- ES2016 + babel-preset- ES2017; In addition, the latest proposal is included in the latest proposal link in stage-*

Adjust the following

yarn add -D babel-preset-stage-2
Copy the code

.babelrc

{
  "presets": ["env"."stage-2"],}Copy the code

polyfill

Polyfill is a shim that emulates a new API using an older version approach, but does not guarantee full support for all features. At present, there are two methods of use, one is to add to the global environment and add the prototype method; The other is to be used as a library without polluting the global environment and modifying the prototype. Luckily, someone has already implemented it: core-js, which can be used differently for different scenarios (v2.5, updated) :

  • The browser references the fully compiled client
    • All features of core.js
    • Shim.js includes only standard code
    • Library.js contains all features, but does not pollute the global environment
  • According to the need to introduce
    • Contents specified in the fn folder
    • Library folder, but does not pollute the global environment
    • Introduce a series of related features, such as ES6 /array, including all features of ES6 array
    • Customizations are introduced into the Modules folder, but you need to be aware of them

Babel introduces the content of core-JS as the foundation, and provides the babel-Polyfill and babel-Runtime plug-ins.

  • Babel – polyfill, Babel-polyfill /lib/index.js contains core-js/shim,regenerator-runtime/runtime,core-js/fn/regexp/escape, Bable packages it all into polyfill.js, so you can just import it manually.
  • The disadvantage of babel-Polyfill and bable Runtime is that the files are larger after packaging and pollute the global environment. If you use the on-demand import scheme, you need to manually import one by one, so Babel provides the babel-Runtime plug-in to automatically import. Another feature of babel-Runtime is that it provides a number of helper functions, which are added to every file by default. Using the babel-Runtime plug-in imports helper functions from the Babel-Runtime module.

The adjustment is as follows:

// Babel-Runtime provides polyfill, Yarn add babel-Runtime yarn add -d babel-plugin-transform-runtimeCopy the code

.babelrc

{
  "presets": ["env"."stage-2"]."plugins": ["transform-runtime"]}Copy the code

Webpack configuration Babel

Webpack is the mainstream packaging tool, and configuring Babel is a basic operation. The first step is to install babel-loader

yarn add -D babel-loader

webpack.config.js

module: {
    rules:[
    {
            test: /\.js$/, <! --> exclude: /node_modules/, use: [{loader:'babel-loader', options: { <! Node_modules /. Cache /babel-loader--> cacheDirectory:true,},}],},]}, <! -- In development mode, via Chrome devtool/source/webpack-internal can see the result of Babel transcoding --> devtool:'cheap-module-eval-source-map'.Copy the code

.babelrc

{
    "presets": [["env"{<! -- Converts modules to commonJS by default, set tofalseNo conversion -- -- >"modules": false}]."stage-2"]."plugins": [transform-runtime"]}Copy the code

Babel eslint configuration

.eslintrc.js configures the parser

parser: 'babel-eslint'
Copy the code

Also, if you configure ESLint in Webpack, make sure that esLint checks are configured as follows before Babel transcodes

Module: {rules:[{// Ensure that babel-loader implements enforce:'pre'.test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'}}]Copy the code

Other plug-ins

  • Babel-plugin-transform-remove-strict-mode removes strict mode
  • babel-plugin-lodash
  • Babel-plugin-equire loads echarts modules on demand
  • Babel-plugin-component loads the Element UI module on demand