Can't understand Babel configuration stupidly?

Frontier: The origin of the article is that my friend told Shuchan that in the process of solving the project to be compatible with IE11 browser, I encountered "dazzling" babel configuration and plug-ins, etc., stupidly confused about the difference between the configurations, and did not know how to reference the babel plug-in In order to make the performance better, if you also have doubts in this regard, this article may be for you

1.babel

What is babel? Babel is essentially an editor, that is, the role of a "translator". For example, Shujiang does not understand Spanish and needs someone to help me translate into Chinese. I just know it. Then Babel helps the browser to translate, so that the web application can run in the old version of the browser. For example, the IE11 browser does not support ES6 syntax such as Promise. At this time, open the web application you wrote in IE11, and the application will not run normally. At this time, Babel is needed to "translate" and become readable by IE11

1.1 How does Babel work?

In essence, Babel alone cannot complete the "translation". For example, the official website example const babel = code => code; does not use the Babel plug-in. The output will not "translate" the arrow function. If you want to complete it, you need to use the plug-in. Click for more concepts. official document

The working principle of Babel is essentially three steps: parsing, conversion, and output, as shown in the following 👇,

1.2 What is AST?

👨‍🎓 Classmate Ah Bin: What is the abstract syntax tree AST mentioned above?

Answer: As we mentioned above, Babel converts code into an AST abstract syntax tree when parsing, which is essentially an abstract representation of the syntax structure of the code, and expresses its grammatical structure in the form of a tree 🌲-shaped structure. , The abstract is that its language form will not be reflected in the original code code

Here are some application scenarios of AST in front-end project development:

• Vue template analysis .vue file we usually write is vue-template-compiler , and the .vue file is processed as an AST
• Babel's "translation": such as converting ES6 to ES5 during conversion to AST
• webpack plug-in UglifyJS: uglifyjs-webpack-plugin used to compress resources, uglifyjs will encounter the need to parse es6 grammar, this process is essentially with the help of babel-loader

You can install it through the local installation babel-cli be a verification, compile the js file through babel-cli, play "translation"

🌲Recommended reading:

• Yifeng-Getting Started with Babel

1.3 What do I need to know to develop my own babel plugin?

👨‍🎓 Ah Ke classmate: Shuchan, what do I need to use to develop a babel plug-in using AST?

Answer: We mentioned in the previous section that Babel cannot complete the translation by itself without the help of "foreign aid", and a complete "translation" process requires parsing, conversion, and output to complete the entire closed loop. Each link needs to use the following APIs of babel

• @babel/parser : The babel parser parses the source code code into AST
• @babel/generator : Decode AST to generate js code new Code
• @babel/traverse : used to traverse the AST tree, can be used to transform the AST~, such as replacing or adding AST original nodes
• @babel/core : including the entire babel workflow

The following is a simple "translation" demo~

👦: Ah Kuan: Didn’t you say that @babel/parser also parses the source code code into AST? Why is @babel/core too?

Answer: @babel/core contains the entire babel workflow. In the process of developing plug-ins, if each API is introduced separately, wouldn't it be deceived~ So there is the @babel/core plug-in, which is the core plug-in as the name implies , He encapsulated the underlying plug-ins (including parser, generator, etc.) to improve the efficiency of the original plug-in development and simplify the process, which is a "KFC family bucket"

🌲Recommended reading:

• Babel plug-in manual
• implements a real babel plugin
• Understand the basic principles and usage of babel

1.4 Babel plugin related

After talking about the basic use of Babel, let’s talk about plug-ins. As mentioned above, relying on babel alone is "difficult to become a big weapon". It needs the assistance of plug-ins to achieve hegemony. So how does the plug-in work?

Through the study of the first section, we know that after completing the first step of parsing the AST, the next step is to enter the conversion. The plug-in plays a key role at this stage.

1.4.1 Use of plug-ins

Before telling Babel what to do, we need to create a configuration file .babelrc or babel.config.js file

If I want to es2015 the grammar of 060cc0536b7738 to es5 and support es2020 chain writing, I can write like this

As shown in the picture above 👆, we can see that we configure two things present and plugin

👨‍🎓 Ah Ke classmate: Doesn't babel only need plugin to help with translation? What is this present?

Answer: Presets are presets. For example, one day the tree sauce will go to KFC to buy chicken wings, french fries, cola, and burgers. Then I found that there is a package A that contains (fries, cola, burger), then this present is equivalent to package A, it contains a collection of plug-ins, a large package, so I only need a package A + chicken wings to get it done , No need to configure many plug-ins.

Like the above es2015 "package", in fact Babel team will belong ES2015 related to a number of plugins collection to babel-preset-es2015 a preset to go

👧 Aqi classmate: What is @babel/preset-env? I see many babel configurations have

Answer: @babel/preset-env is a present preset, in other words, a "luxury gift package", including a collection of plug-ins, including our commonly used es2015, es2016, es2017 and other latest grammar conversion plug-ins, allowing We use the latest js syntax, such as let, const, arrow functions, etc., but does not include stage-x stage plug-ins. In other words, it includes the es2015 we mentioned above, which is a "family bucket", not just a package.

1.4.2 Custom present

👦 Classmate Ah Bin: Tree sauce, can I make a preset present by myself?

Answer: Yes, but you can create a new project with the naming convention of babel-preset-*, then create a packjson and install the fixed dependency and an index.js file to export .babelrc, and finally publish it to npm ,As follows

1.4.3 About polyfill

For example, when we use it in development, we will use some new features of Array.from etc., but not all JavaScript environments support Array.from. At this time, we can use Polyfill (code filling, which can also be translated as compatibility patch). "Black technology", because babel only converts new js syntax, such as arrow functions, but does not convert new APIs, such as Symbol, Promise and other global objects. At this time, you need to use @babel/polyfill to install all the new features of es. Steps to use as follows

• npm installation: npm install --save @babel/polyfill
• Import the polyfill at the top of the file: import @babel/polyfilll

🙅‍♂️: Disadvantages: global introduction of the entire polyfill package, such as promises will be introduced globally, polluting the global environment, so it is not recommended to use, is there a better way? You can directly use @babel/preset-env and modify the configuration, because @babel/preset-env contains the @babel/polyfill plug-in, see the next section

1.4.4 How to optimize by modifying the @babel/preset-env configuration

After completing the above configuration, and then compiling the code with Babel, we will find that sometimes the package size is very large, because some of @babel/polyfill will be globally quoted, then you have to figure out the configuration of @babel/preset-env

There are two related parameters in @babel/preset-env and @babel/polyfill

• targets : List of supported target browsers
• useBuiltIns : The parameter has three values: "entry", "usage", and false. The default value is false, this parameter determines how to process @babel/polyfilll statements when babel is packaged

Mainly talk about the different configurations useBuiltIns

• entry : Remove the polyfilll module that is already supported by the target browser, and introduce all the polyfilll modules that the browser does not support into the corresponding polyfilll module.
• usage : When packaging, it will automatically introduce some polyfilll modules in the code according to the actual code usage in combination with the targets.
• false : The polyfilll module will not be automatically introduced, and the polyfilll module will be shielded

🌲Recommendation: Use useBuiltIns: usage to introduce the polyfill files used on demand according to the support of the target browser, so that the package size will not be too large

1.4.5 How to use babel for webpack packaging?

For @babel/core , @babel/preset-env , @babel/polyfill etc., when we use webpack for packaging, how do we let webpack know to compile js according to these rules. At this time, babel-loader is needed, which is equivalent to an intermediate bridge, which tells webpack how to handle it by calling the API in babel/core.

1.4.6 Development tool library, how to avoid environmental pollution when using babel?

👦 Student Ah Bin: I have developed a tool library and used babel. If I use polyfill, how can I avoid environmental pollution caused by using it?

Answer: When developing a tool library or component library, you can no longer use babel-polyfill, otherwise it may cause global pollution. You can use @babel/runtime . It will not pollute your original method. When it encounters a method that needs to be converted, it will have a different name, otherwise it will directly affect the business code that uses the @babel/runtime main reason for using 060cc0536b7a81 is

• It can reduce the size of libraries and toolkits, and avoid the repetition of tool functions compiled by babel in each module
• Before @babel/runtime was used, libraries and toolkits generally did not directly introduce polyfills. Otherwise, global objects like Promise will pollute the global namespace, which requires library users to provide their own polyfill. These polyfills are generally mentioned in the instructions for use of libraries and tools. For example, many libraries will require es5 polyfills. After using babel-runtime, libraries and tools only need to add dependency on babel-runtime to package.json and hand it over to babel-runtime to introduce polyfills.

How to use @babel/runtime

• 1.npm installation

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

• 2. Configuration


1.5 Confusing points about babel

1.5.1 The difference between babel-core and @babel/core

👦: Ah, classmate: What is the difference between babel-core and @babel/core?

Answer: @babel was proposed in the version of babel7, which is similar to using @vue/cli after the vue-cli upgrade. Therefore, the later versions of @babel declare the scope at the beginning.