Babel related knowledge points excerpt

Configuration files are the ones that Babel looks for by default in the current directory when it executes

First, the main forms of existence

  1. .babelrc
  2. .babelrc.js
  3. babel.config.js
  4. package.json
  5. Babel also provides configuration items for different build tools, such as webpack’s Babel-loader configuration items, which are essentially the same as configuration files

For.babelrc, its configuration looks like this

  {
    "presets": ["es2015", "react"],
    "plugins": ["transform-decorators-legacy", "transform-class-properties"]
  }
Copy the code

Babel.config.js and.babelrc.js are configured the same, exporting configuration items through module.exports

  module.exports = {
    "presets": ["es2015", "react"],
    "plugins": ["transform-decorators-legacy", "transform-class-properties"]
  }
Copy the code

For package.json, you add a Babel property and value to package.json, which looks like this

{" name ":" demo ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" test ", "echo \" Error: no test specified\" && exit 1" }, "author": "", "babel": { "presets": ["es2015", "react"], "plugins": ["transform-decorators-legacy", "transform-class-properties"] } }Copy the code

If you look closely at these configuration files, you will see that their configuration items are plugins and presets.

Plugins & presets

  1. Each plug-in or preset is an NPM package
  2. Rules for Babel compilation: Babel plugins or presets that are used during compilation as listed in the configuration file. These plug-ins and presets convert ES6 code to ES5 during compilation
  3. The presets address the problem that many plugins need to be configured. If only the array of plugins is configured, the front-end engineering needs to compile ES2015,ES2016,ES2017… The Babel configuration file will be very bloated
  4. Presets are a collection of Babel plug-ins, or plug-in packages in plain English
  5. Presets can also be collections of plug-ins and other presets
  6. Babel has released a few preset packs for common environments:
    • @babel/preset-env
    • @babel/preset-react
    • @babel/preset-typescript
    • @babel/preset-stage-0
    • @ Babel/preset – stage – 1…
  7. The plugins array and presets array are ordered. If both plug-ins or presets work on the same code snippet, they are executed in the order of plug-in and presets. Here are the rules:
    • The plug-in executes before default
    • The plug-in execution order is the plug-in array executed from front to back
    • The default execution order is that the default array is executed from back to front
  8. The default arguments to presets and plugins are strings:"presets": ["@babel/preset-env"]
  9. Given a plugin or preset parameter, the member cannot be written as a string, but should be overwritten as an array, for example, to @babel/preset-env:
{" presets ": [[" @ Babel/preset - env", / / the default name {/ / the default parameter object "useBuiltIns" : "entry"}]]}Copy the code

Babel presets with plug-in selection

Babel-polyfill

  1. @babel/ Polyfill is essentially a combination of two NPM packages core-js and Regenerator-Runtime

@babel/preset-env

  1. Babel6, the preset name is babel-preset-env; After Babel7, change to @babel/preset-env
  2. Browserslist is called the target environment configuration list and can be written separately in the project directory. Browserslistrc in addition to package.json
Browserslist: [// "> 1%", "not IE <= 8"]Copy the code
  1. @babel/preset-env can be used for syntax conversion for grammars not supported by the target environment via Browserslist
  2. If @babel/preset-env does not set any parameters, Babel will do the grammar conversion entirely based on browserslist configuration. Without Browserslist, Babel will convert all ES6 syntax to the ES5 version.
  3. Babel’s configuration with Browserslist relies on @babel/preset-env, and if Babel doesn’t have any presets or plug-ins configured, Babel doesn’t do anything about the converted code and just generates the same preset code as before
  4. If the targets parameter of @babel/preset-env is set, the browserslist configuration is used instead of the targets configuration. If targets is not set, use the browserslist configuration. If targets is not configured and Browserslist is not configured, @babel/preset-env is converted to ES5 for all ES6 grammars

Excerpt from Jiang Ruitao’s official website