What does babel in vue mean?

In vue, Babel is a JavaScript compiler, mainly used to convert code written in ECMAScript 2015 syntax into backward-compatible JavaScript syntax so that it can run on current and older versions of browsers or other Environment.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

ES6 syntax is commonly used in vue projects, but sometimes our projects need to be compatible with lower version browsers. In this case, we need to introduce the babel plug-in to convert es6 to es5. Let’s take a look at what babel is.

Babel is a JavaScript compiler

Babel is a tool chain mainly used to convert code written in ECMAScript 2015 syntax into backward-compatible JavaScript syntax. To be able to run in current and older versions of browsers or other environments. Listed below is what Babel can do for you:

• Grammar conversion

• Add missing features in the target environment through Polyfill (By introducing third-party polyfill modules, such as core-js)

• Source code conversion (codemods)

// Babel 输入： ES2015 箭头函数
[1, 2, 3].map(n => n + 1);

// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

vue Steps to introduce babel in

1. Install babel-polyfill plug-in

npm install --save-dev babel-polyfill

2. There are three ways to introduce babel after successful installation

The first type: introduce it in the entry file, for example: add

import 'babel-polyfill'

to main.js. The second type: introduce it in webpack.config.js In the file, at the entry entrance, modify it as follows

Third method: Use cdn resources and add js files to the html page: For example:

Explanation:

Although the babel plug-in can help us convert es6 syntax to es5, it cannot convert new APIs, such as Global objects such as Iterator, Generator, Set, Map, Proxy, Reflect, Symbol, and Promise will not be converted. If you want this method to run, you must use babel-polyfill to provide a shim for the current environment.

The installation command is as follows.

　　　

Then, add the following line of code at the head of the script.

　　

[Related recommendation: "vue.js tutorial"]

The above is the detailed content of What does babel in vue mean?. For more information, please follow other related articles on the PHP Chinese website!