Let’s start with some basic information about Babel, what is it, how to configure Babel, etc.

What is Babel?

Babel: www.babeljs.cn/docs/

Babel is a JavaScript compiler designed to convert ECMAScript 2015+ version code into backwards-compatible JavaScript syntax so that it can run in current and older browsers or other environments.

Babel takes advanced versions of new syntax and converts them into a syntax that works across browsers, so you don’t have to worry about browser compatibility.

How do VUE-CLI2.x version projects configure Babel transformation

@babel/core: The core library of Babel

All Babel conversion operations are based on @babel/core because it contains the compiled transform method

npm install --save-dev @babel/core
Copy the code

Babel/Polyfill: Used to simulate a complete ES2015+ environment

Note –save instead of –save-dev, because this is a polyfill that needs to be run before your source code

npm install --save @babel/polyfill
Copy the code

Once installed, import @babel/polyfill in the project entry main.js

Babel-loader: Webpack configures loader conversion

Babel – loader url chuo chuo chuo: www.webpackjs.com/loaders/bab… Allows JavaScript files to be translated using Babel and Webpack

npm install --save-dev babel-loader
Copy the code

Configured in the webpack.base.config.js file

module.exports = {
      module: {
            rules: [
                  {
                       test: /\.js$/,
                       loader: 'babel-loader',
                       include: [resolve('src')]
                  }
            ]
      }
}
Copy the code

Through the above configuration, you can achieve Babel conversion in vuE-CLI2.x version

What to do with vuE-CLI3.x

The vue-cli3.x project is initialized with a plug-in called @vue/cli-plugin-babel

@vue/cli-plugin-babel: imported by default

The default is Babel 7 +babel-loader + @vue/babel-preset-appIn other words, there is no need to introduce conversion plug-ins such as babel-loader. Let’s take a look at vuE-Cli3. xintroduce:

 @vue/babel-preset-app: Preset is introduced

Configure it in the babel.config.js file. For more details, please visit the official website

module.exports = {
    presets: [
        '@vue/babel-preset-app'
    ]
};
Copy the code

Isn’t it cool to run the project and perform Babel conversion 😎 just configure the Presets

By default, babel-loader ignores all files in node_modules, but we also need to perform Babel conversion when some installation packages are introduced

TranspileDependencies: Transform node-modules prerequisites

Configure in the vue.config.js file:

module.exports = {
    transpileDependencies: [
        /[/\\]node_modules[/\\]test[/\\]/,
        /[/\\]node_modules[/\\][@\\]test2[/\\]test3[/\\]/,
    ]
}
Copy the code

Babel can be converted from node-modules to 😊

Oneself climb pit a record yo, wrong place please correct ~~ crab crab