编程知识 cdmana.com

Babel preset

In this section, we'll learn about Babel The presupposition in Presets. If we don't want to manually combine plug-ins , have access to preset As Babel Combination of plug-ins , Or share options To configure .

Babel7.8 There are more than 100 official plug-ins and presets , If we study one by one, it will take a lot of time . But we don't have to learn all , Because in practice , There are only a few commonly used presets and plug-ins , Let's focus on these commonly used , After mastering it, other plug-ins and presets will become simple .

official Preset

The official has written some for the common environment preset, As shown below :

  • @babel/preset-env
  • @babel/preset-flow
  • @babel/preset-react
  • @babel/preset-typescript

These are a few preset It's maintained by the community , Can pass npm Command download . We can download and use according to the needs of the project , For example, an ordinary vue project ,Babel In the official preset , You just need one @babel/preset-env That's all right. .

Stage-X The experiment presupposes

stage-x The syntax conversion in the preset will be approved as JavaScript The components of the new version are changed accordingly ( for example ES6/ES2015).

TC39 Divide the proposal into the following stages :

  • Stage 0 – imagine (Strawman): It's just an idea , There may be Babel plug-in unit .
  • Stage 1 – Suggest (Proposal): It's worth following up .
  • Stage 2 – The draft (Draft): Initial specification .
  • Stage 3 – The candidate (Candidate): Complete the specification and implement it on the browser .
  • Stage 4 – complete (Finished): Will be added to the next annual release .

establish preset

If we need to create our own preset, Just export one configuration .

Example :

It can be an array of plug-ins , for example :

module.exports = function() {
  return {
    plugins: [
      "pluginA",
      "pluginB",
      "pluginC",
    ]
  };
}

preset It can contain other preset, And plug-ins with parameters :

module.exports = () => ({
  presets: [
    require("@babel/preset-env"),
  ],
  plugins: [
    [require("@babel/plugin-proposal-class-properties"), { loose: true }],
    require("@babel/plugin-proposal-object-rest-spread"),
  ],
});


Preset path

If preset stay npm On , We can type in preset The name of ,babel Will check if it has been installed in node_modules Under the table of contents :

{
  "presets": ["babel-preset-myPreset"]
}

Or you can also specify a point to preset The absolute or relative path of , As shown below :

{
  "presets": ["./myProject/myPreset"]
}


Preset Short name for

If preset The prefix of the name is babel-preset-, We can use its short name , That is, omit babel-preset- Prefix .

Example :

for example babel-preset-myPreset Short name is myPreset:

{
  "presets": [
    "babel-preset-myPreset", //  amount to myPreset
    "myPreset"
  ]
}

This also applies to names (scope) Of preset:

{
  "presets": [
    "@org/babel-preset-name", //  amount to @org/name
    "@org/name" 
  ]
}

Preset The order of arrangement

preset It is arranged in reverse order , That is, sort from back to front .

Example :

Let's look at the following example :

{
  "presets": [
    "a",
    "b",
    "c"
  ]
}

The order of execution is c、b 、 a, From back to front . This is mainly to ensure backward compatibility , Because most users will "es2015" Put it in "stage-0" Before .

Preset Parameters of

Plug ins and preset All parameters are acceptable , Parameters are an array of plug-in names and parameter objects , You can set... In the configuration file .

If no parameters are specified , The following forms are the same :

{
  "presets": [
    "presetA",
    ["presetA"],
    ["presetA", {}],
  ]
}

To specify parameters , Please pass a parameter name as the key (key) The object of , for example :

{
  "presets": [
    ["@babel/preset-env", {
      "loose": true,
      "modules": false
    }]
  ]
}



版权声明
本文为[Do you know]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/08/20210804223603882z.html

Tags babel preset
Scroll to Top