One 、 Preface

The last one talked about how to Configure a basic development environment . This article will introduce to JS Handling of documents .

Two 、babel-loader

index.js

//  Arrow function 
const add = (a, b) => a + b;

// Promise  object 
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(add(1, 2));
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(add(3, 4));
  }, 1000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(add(5, 6));
  }, 1000);
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 7, 11]
});

//  Example method ：Array.prototype.includes()
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true

const root = document.getElementById('root');
root.innerHTML = add(1, 3);
 Copy code 

There are some versions of browsers for JS New syntax ( for example ES6+) Poor support , At this point, you need to convert the new syntax into ES5 Standard grammar , Let the browser recognize them properly , Ensure the stable operation of the program .

To achieve this transformation , What should we do ？ use Babel, It will convert the new grammar into the old grammar .

1. Dependent installation

install ：

npm install -D babel-loader @babel/core @babel/preset-env
 Copy code 

2. Loader To configure

webpack.config.js

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}
 Copy code 

about babel Configuration of , We usually put it in babel.config.json in , Create a new... In the root directory babel.config.json.

3、 ... and 、Babel Configuration of

1. In general babel To configure

babel.config.json

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage", //  Introduce on demand  corejs  Module in  
      "corejs": 3, //  The core  js  edition 
      "targets": "> 0.25%, not dead" //  Browser support range 
    }]
  ]
}
 Copy code 

Also need to download dependencies ：

npm i [email protected] --save
 Copy code 

Be careful ： Must be configured useBuiltIns, If you don't configure ,babel Will not deal with Promise、Map、Set、Symbol Wait for the global object ;corejs Also configure ,2 The version of can handle global objects , But the instance method does not handle , So here we use 3 Version of .

2. The best babel To configure

If you're writing a library , It's best to add plug-ins —— babel/plugin-transform-runtime, The configuration is as follows ：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }]
  ],
  "plugins": [
    //  Don't pollute the whole situation , Load at run time 
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}
 Copy code 

Also need to download dependencies ：

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs3
 Copy code 

Four 、 Final remarks

Babel After version update , A lot of content has changed , Official documents are also obscure and difficult to read , Many articles on the Chinese Internet are out of date , Fortunately, I saw a big man's article , That's what makes me right @babel/preset-env and @babel/plugin-transform-runtime Have a basic understanding of . article link At the end of the article , Please read by yourself .

1. @babel/preset-env just transforms code with syntax, if we don’t config useBuiltIns.
2. @babel/transform-runtime can provide re-use helpers, but don’t polyfill by default.
3. Most situation best config: use @babel/preset-env transforms syntax. use @babel/transform-runtime avoid duplicate code, and config corejs: 3 to polyfill.

Reference resources ：www.zzuu666.com/articles/9