02. Elementui source code learning: Babel configuration


The following project will introduce Babel to support ES6 + syntax compatibility.

Babel is a tool chain, which is mainly used to convert ECMAScript 2015 + version code into backward compatible JavaScript syntax, so that it can run in current and old versions of browsers or other environments.Chinese official website

Concept of 0x00.babel

Babel is a compiler (input source code = > output compiled code). The compilation process is divided into three stages: parsing, conversion and printout.

Babel itself has no conversion functionIt decomposes the functions of transformation into plugins. Therefore, when we do not configure any plug-ins, the code and input through Babel are the same.


There are two kinds of plug-ins: syntax plug-ins and transform plug-ins.

  • Conversion plug inUsed to convert your code.
  • Syntax plug inOnly Babel is allowed to parse a particular type of syntax (not a transformation).

The conversion plug-in automatically enables the syntax plug-in. Therefore, if you have used the corresponding conversion plug-in, you do not need to specify the syntax plug-in.
See the official document for the specific plug-in list.Plugins


Presets can be regarded as a set of preset plug-in lists, so we don’t have to add the plug-ins we need one by one.

configuration file

Babel provides the way of config, which is similar to the way of CLI and config in webpack.Official documents

After Babel 7. X, thebabel.config.json(support. JS,. CJS,. MJS and other file formats); Before 7. X, projects were based on.babelrc(support. JSON,. JS,. CJS,. MJS and other file formats) to configure.

commonlybabel.config.jsonIt will be placed in the root directory. When compiling, Babel will look for it firstbabel.config.jsonFile as the root configuration of the entire project.

babel.config.jsonConfiguration example

  "presets": ["@babel/env"],
  "plugins": ["transform-vue-jsx"]

Short name of the plug-in

If the prefix of the plug-in name is Babel plugin -, you can also use its short name:

  "plugins": [
    "Babel plugin myplugin" // the two plug-ins are actually the same

For plug-ins with scope:

  "plugins": [
    "@ org / name" // the two plug-ins are actually the same

Default short name

If the prefix of the preset name is Babel preset -, you can also use its short name:

  "presets": [
    "babel-preset-myPreset" // equivalent

For preset with scope:

  "presets": [
    "@org/name" // equivalent

Execution sequence

  • The order of plug-in execution is before the press
  • Plug ins are executed in the order of the declared plug-in list (first to last)
  • The preset will be executed in the reverse order of the declared list (last to first)

reference resources

Installation and configuration of 0x01.babel

Install the required package

Bable is introduced into the project (plug-ins and presets after Babel 7.0 are prefixed with @ Babel).

carbon (22).png

@babel/cliThe built-in cli command line tool can compile files through the command line.Official documents
@babel/coreThe core of Babel, including the API of each core, is used by Babel plug-ins and packaging tools.Official documents
@babel/preset-envIt is a common preset, which enables you to use the latest JavaScript syntax. It will help you convert the syntax supported by the target running environment of the code, improve your development efficiency and make the packaged code smaller.Related references

Webpack loader module installation

carbon (25).png

JSX syntax module installation

Use of JSX syntax plug-inbabel-plugin-syntax-jsx, not using a higher version of@babel/plugin-syntax-jsxThe latter will appear during project operationCannot find module babel-plugin-syntax-jsxAbnormal.

carbon (26).png

functional verification

After the above modules are installed, in the test directory, create ababel-es6-test.jsFile for

carbon (23).png

Enter the following command in the command line window to compile the entiretestFolder and output tolib(automatically created if it does not exist) folder

carbon (24).png

After running successfully, the project lib directory will also create onebabel-es6-test.jsMy file, follow metestThe files in the directory are the same, and the code is not converted.

Babel itself does not have any conversion function. When no plug-in is configured, the code and input through Babel are the same.

Create in the root directorybabel.config.jsonThe configuration is as follows:

carbon (27).png

Run the command again,libThe output file code has been converted

carbon (28).png

Project configuration

to updatebabel.config.jsonto configure

carbon (33).png

webpack.config.jsAdd a note aboutbabel-loaderThe rules of the game:

carbon (35).png

catalogueexamplesNew filesJSX.vueUsed to test JSX syntax

carbon (34).png

to updateexamples\App.vueFile, importJSX.vueassembly

carbon (36).png

Run NPM run Dev and open the browser. The result is as follows


Latest directory structure

carbon (39).png

Example code

Github Repo