One, foreword

The last article covered configuring a basic development environment. This article describes how to handle JS files in your project.

Second, the 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]
});

// Instance 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 the code

Some browsers do not support the new JS syntax (such as ES6+) well. In this case, you need to convert the new syntax into ES5 standard syntax so that the browser can recognize them properly and ensure the stable operation of the program.

What can we do to achieve this transformation? With Babel, it converts the new syntax into the old syntax.

1. Rely on the installation

Installation:

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

2. The Loader configuration

webpack.config.js

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

For the configuration of Babel, we usually place it in babel.config.json and create babel.config.json in the root directory.

Configuration of Babel

1. Configure Babel in common cases

babel.config.json

{
  "presets": [["@babel/preset-env", {
      "useBuiltIns": "usage".// Import modules from Corejs as needed
      "corejs": 3.// Core JS version
      "targets": "> 0.25%, not dead." " // Range of browser support}}]]Copy the code

Also need to download dependencies:

npm i core-js@3 --save
Copy the code

Note: useBuiltIns must be configured. If not, Babel will not handle promises, maps, sets, symbols, and other global objects. Corejs is also configured. Version 2 can handle global objects, but instance methods do not, so version 3 is used here.

2. Best Babel configuration

— Babel /plugin-transform-runtime — Babel /plugin-transform-runtime

{
  "presets": [["@babel/preset-env", {
      "targets": "> 0.25%, not dead." "}]],"plugins": [
    // Does not pollute globally and is loaded at run time
    ["@babel/plugin-transform-runtime", {
      "corejs": 3}}]]Copy the 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 the code

Fourth, the last remarks

Much of Babel’s content has changed since the update, the official documentation is opaque, and many of the articles on The Chinese web are out of date. Fortunately, I read an article by a big guy, This gives me a basic understanding of @babel/preset-env and @babel/ plugin-transform-Runtime. The article link is 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: www.zzuu666.com/articles/9