A preliminary study of babel7 - rollup + babel7 load polyfill on demand

I. Introduction

babel7Since it came out in late 2018, it has not been carefully studied. I don't know much about some basic configuration process. Today I will talk about a more important feature in babel7- 按需加载polyfill. This time I took the study fetch, because fetchthe compatibility of mainstream browsers is not high, so I need to use fetch-polyfillthe opportunity to study and consolidate babel7.

There is currently no accurate translation of polyfill. Literal translation is the meaning of filler, that is, after introducing the corresponding grammar polyfill, the script running on the browser side can use the new es syntax and features that the browser does not support. The most common is the Promise, Array.includes, Object.assign, anysc, awaitand so the new syntax. In babel6and before, only you need to be introduced at the entrance polyfillto. However, this also brings problems. The whole is loaded at once polyfill, which is very redundant. With babel7, you can achieve the purpose of loading on demand through simple configuration, and we no longer need to manually introduce polyfills.

2. About the various packages of bable7

@babel/core

For core functions, babel uses scope packages starting with @ starting from version 7. The old version is babel-core, and the other packages are the same.

@babel/plugin-***

A collection of all babel plugins.

@babel/preset-***

• Preset is a collection of pre-determined plugins. The official presets of Babel currently include: @babel/preset-env, @babel/preset-flow, @babel/preset-react, @babel/preset-typescript, and of course unofficial of
• Use babel-preset-env without special requirements. It is not recommended to use the year and stage
• You can customize the preset, but it should not be necessary for general use

@babel/polyfill

Here is what we are going to say today. Actually it is not necessary. If you are writing lib, do not use @babel/polyfill, because some of these implementations will pollute the global
compatibility of new features and will not compile the code to a lower version. If you want to use it, use -S instead of -D. It is said that it is implemented by adding methods to the prototypes of global objects and built-in objects
. Used in webpack, you can write like this. Each official preset has its own option description, such as
https://babeljs.io/docs/en/ babel-preset-react

{
  "presets": [
  	["@babel/preset-env", { useBuiltIns: "usage" }],
  ]
}

Three, actual combat

According to the above configuration, use rollup as a test tool to configure babel7. For the configuration of rollup, please refer to my article . It's just a low version of rollup used in this article. Here I want to use the latest version of rollup 1.21.4.
The complete code can be taken directly here . npm run buildReady to execute

package.json

 "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/preset-env": "^7.6.2",
    "rollup": "^1.21.4",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-json": "^2.3.0",
    "rollup-plugin-node-resolve": "^3.0.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.6.0",
    "fetch-polyfill": "^0.8.2"
  }

Only a few core packages are used here

If you install it yourself, you must use @latest to install the rollup-plugin-babel package. Official website screenshot

rollup.config.dev.js

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';

export default {

    input: 'src/index.js',
    output:{
        name:"Animals",
        file:"dist/animals.js",
        format: 'umd',
        sourcemap: true,
    },
    plugins: [
        resolve({
            browser: true,
        }),
        json(),
        commonjs(),
        babel({
            exclude: 'node_modules/**',
        }),
    ]
};

.babelrc

{
  "presets": [
    [
      "@babel/env",
      {
        "modules": false,
        "useBuiltIns": "usage"
      }
    ]
  ]
}

That's right. It refers to the simplest configuration. Use @babel/preset-envthis pre-made preset directly , and then configure useBuiltInsit usage.

• When the false
  value is false, it is equivalent to useless, then you have to manually import all of them polyfill.
• 
  When using entryentry , you also need to manually import polyfill, that is, import'@babel/polyfill';, and all polyfills are also introduced. This configuration item always feels useless, if someone knows it, you can discuss it in the comment area.
• When the usage
  value is usage, there is no need to introduce polyfills, babel will automatically load the required functions on demand

When we set usage to false, the compilation looks like this:

600 lines of code. For use where Promise, includeslike the code is not polyfill.
When following the usageconfiguration:

2500 lines of code. That's right, the extra code is for polifilling in ie8 and places that don't support promise and other syntax. Therefore, the actual packaging needs to be determined according to the actual business operating environment. It is recommended to configure the env.target property in babellrc. Decide which browsers need to be compatible.

Four introduction of third-party polyfill

After the above code manipulation, I used it in the code fetchand found that there is no polyfill for it. Because what I installed is fetch-polyfillnot in the standard @babel/polyfill. That is, you can manually import it in any entry file:

import 'fetch-polyfill'

After the build, the source code appears fetch-polyfill:

Quote: A summary of some packages that
completely use babel in preset-env in babel7