Elenment-UI is used in the project
The clear scope is given in Vue's official documentation: Vue does not support IE8 and below because Vue uses the ECMAScript 5 feature that IE8 cannot simulate. But it supports all ECMAScript 5-compatible browsers.
Moreover, Element-UI supports IE10+ and most browsers. This requires Babel, which is mainly used to convert ECMAScript 2015+ code into a backward compatible JavaScript version in an old browser or environment. Before this, you need to figure out whether IE6~11 supports es5:
- IE6~IE8: All syntax of es5 are not supported;
- IE9: Supports es5 syntax except ECMAScript 5 Strict Mode;
- IE10: Supports all syntax of es5;
- IEÏ11: Supports all es5 syntax and new const and Typed Arrays syntax in es6
babel can translate high-version rules in the same language into low-version rules, and its translation process is also divided into three stages: parsing, transforming, and generating. (1) The parsing step receives the code and outputs AST (Abstract Syntax Tree), which includes two stages of lexical analysis and grammatical analysis. The lexical analysis stage converts string-form code into tokens streams. The syntax analysis stage will convert a token stream into AST to facilitate subsequent operations. (2) Use our configured plugins/presets to convert the AST generated by Parser into a new AST. (3) The code generation step process is to traverse the entire AST in depth first, and then build a string that can represent the converted code.
The following summarizes the use of Babel:
1. Since the project uses webpack packaging tool, install it
npm install --save-dev babel-loader babel-core
2. Set it in
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
include: [
resolve("src"),
resolve("test"),
],
},Ï
]
}
You can configure the corresponding content according to the Module options in webpack
3. Create a .babelrc file in the root directory to add plug-ins. After the file is added successfully, you can start configuring the content.
First, you can use evn preset, which supports conversion of ES2015+
npm install babel-preset-env --save-dev
In .babelrc file
{
"presets":["evn"]
}
Without any configuration options, babel-preset-env behaves exactly the same as babel-preset-latest (or babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017).
Of course, there are optional options to configure, such as:
[
"env",
{
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions"]
}
}
"stage-2"
],
What is the meaning of setting items in evn:
- Which version is supported to
- Which browser version of node supports
- loose starts loose mode and use it with webpack's loader
- What module loading mechanism is used for modules
- debug enable debug mode
- include which files are included
- exclude which files are excluded
- useBuiltIns does decompose babel-polyfill, introducing only the required part
It's a reference browserslist/browserslist/browserslistSet browser conditions.
After setting up, babel-polyfill is also needed to implement native code that the browser cannot support. After the browser introduces the corresponding polyfill, you can use new built-in objects such as Promise or WeakMap, static methods such as or instance methods such as. However, because babel-polyfill is a method that is directly added to the prototype chain, it will pollute global variables and the volume will increase after the project is packaged.
npm install --save babel-polyfill
If introduced at the entrance vertex of the application,
require("babel-polyfill")；
If you use ES6's import syntax at the entry point of your application, you should import polyfills at the top of the entry point to ensure that polyfills are loaded first
import("babel-polyfill");
If passed, add at the entrance:
= { entry: ["babel-polyfill", "./app/js"] };
In order not to pollute global objects and built-in object prototypes, you can use babel-plugin-transform-runtime in the .babelrc file
"plugins": [
[
"transform-runtime",
{
"helpers": false,
"polyfill": true,
"moduleName": "babel-runtime"
}
],
]
Plugins are used in the translation process of babel, especially the second stage of transforming. If no plug-ins are used in this stage, babel will output the code as it is.
If plugins and presets are added at the same time, note: the plugin will run before the preset item; the plugin will execute in the first to the last positive order; the preset is set to execute in the reverse order from the last to the first, and pay attention to the execution order when setting.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.