babel-loader

Babel-loader is a bridge between Webpack and Babel. Plugins are configured to translate ES6+ syntax into ES5 syntax in conjunction with Babel

How Babel works

Parsing, a transforming, and generating process. Taking ES6 into ES5 code as an example, the process of Babel translation is as follows: Parsing: 1. ES6 code was translated into AST syntax tree via Babylon. 2. The transforming AST syntax tree was transformed through the plugin. 3. Babel-generator will compile the AST tree to generate ES5 code

In vuecli, there is a babel.config.js file, which is recommended to be configured here, and you can run the Vue UI to see more configuration items

//babek.config.js
module.exports = {
  presets: ['@vue/app'],
  plugins: []
}
Copy the code
//.babelrc
{
  "presets":[
      "@babel/preset-env"
  ],
  "plugins":[
  
  ]
}
Copy the code

@vue/app is an abbreviation for @vue/babel-preset-app, and the corresponding dependency is seen in package-lock

The @vue/babel-preset-ap configuration is the same as @babel/preset-env and includes many plugins to process ES6+ syntax if not included in the plugins extension.

It is important to note that Babel only translates syntaxes introduced by new standards, such as ES6 arrow functions into ES5 functions and Class into functions; The new standard introduces new native objects, new prototype methods for some native objects, new apis (such as Proxy, Set, etc.) that Babel does not translate. We need to introduce Polyfill to solve this problem

For example,

module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}
Copy the code

babel-polyfill

Babel-polyfill is a collection of both core-js and regenerator-Runtime. Starting with Babel7.4, core-js is recommended as a collection of core polyfills, but has the disadvantage that it does not satisfy the GENERATOR functions of ES6. Regenerator-runtime can be solved, so a combination of core-js and Regenerator-Runtime is used. Note that the babel-Polyfill file is quite large, assuming that only part of the functionality is used, the configuration needs to be introduced on demand

The problems with Babel-Polyfill:

1) pollution of the global environment: to achieve compatibility can only be hung on the global, so it depends on the use scenario, if an independent system does not matter; If it’s a third-party library, and this is the introduction when you use it and you redefine something like Promise, it can lead to overwrite and pollute the whole world and so on

To solve

Install @babel/ plugin-transform-Runtime and @babel/runtime plugin-transform-Runtime so that the global environment is not polluted

//. Babelrc babel-polyfill introduces {"presets": [["@babel/preset-env", {"useBuiltIns": "usage", "corejs": }]], "plugins": ["@babel/ plugin-transform-Runtime ", {"absoluteRuntime": false, "corejs": ["absoluteRuntime": false, "corejs": 3, "helpers": true, "regenerator": true, "useESModules": false } ] ] }Copy the code

How does transform-Runtime handle this

Generators/async () {/ / generators/async () {/ / generators/async (); Replace it with a function derived from babel-Runtime /regenerator (similar to polyfill split into regenerator and core-js) 3. Replace the helper functions generated by Babel with those exported at the top of the babel-Runtime /helpers section. You can reduce code size by referring to babel-Runtime /helpers.)

Continue to supplement

Reference source

www.cnblogs.com/75115926/p/…