Edge browser reports error IE to solve Expected identifier, string or number configuration babel vue plugins Preset

Edge, IE (solve Expected identifier, string or number) Configure babel vue Configure babel vue plugins Preset

foreword

This error in Edge and ie is generally due to the incompatibility of es6 and above, we can compile it through babel

1. If you are in a hurry and want to solve the problem directly, please read the solution directly below.
2. If you have time to think about it; you can continue to read the following babel usage

First of all, Babel is a tool chain, 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.

1. Understand the two configuration plugins and Preset babel.config.jsin

• Preset

Think of it as a collection of Babel Plugins. For example babel-preset-es2015 contains all plugins related to ES6 transpilation.
Similar to when we directly refer to the main.js file when referencing the component library
Disadvantages: preset-env will convert all ES2015-ES2020 code into ES5.

npm install --save-dev @babel/preset-env

{
    
    
  "presets": [
      "@babel/preset-env",
  ]
}

• plugins

We can introduce ES6 to ES5 functions on demand,
for example: adding the deconstruction assignment plug-in '@babel/plugin-transform-destructuring'
is similar to the fact that we can introduce the components we need on demand when referencing the component library

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

module.exports = {
    
    
  plugins: [
    // 添加解构赋值插件
    '@babel/plugin-transform-destructuring'
  ]  
}

In this way, we have separately introduced the plug-in of structure assignment and transfer in the project.
Babel has officially dismantled it into 20+ plug-ins. If you have other needs, you can go to the official website of Babel to check https://www.babeljs.cn/
亿点小知识

targets: { [string]: number } set support environment

For example, the versions of chrome, edge, firefox, safari, ie, ios, node support the specified version, such as node: 6.5. Also use node: current to use the current version.

{
    
    
	"presets": [
		[
			"@babel/preset-env", {
    
    
				"targets": {
    
    
				  	"node": "current",
				    "chrome": "58",
				    "ie": "11"
				  }
			}
		]
	]
}

debug: boolean, default false

Will the compilation remove the console.log.

"presets": [
		[
			"@babel/preset-env", {
    
    
				{
    
    
					debug: true
				}
			}
		]
	]
	

loose, whitelist, browsers, etc.
There are still many interested or needed ones to learn about the configuration of attributes

solution:

Hint: Quick solution to your problem Expected identifier, string or number

1 npm install --save-dev @babel/preset-env
2 Add in babel.config.js

{
    
    
  "presets": [
      "@babel/preset-env",
  ]
}

3 Add in vue.config.js

Here you can also choose not to add
the reason: for the code under the node_modules folder, it will not be converted by default (for projects created using vue cli, babel-loader will not convert this part of the code by default), so it is similar to ant-design, element -ui Libraries that use the new API will not be converted in node_modules.

module.exports = {
    
    
    ...
 transpileDependencies: ['@babel/preset-env'],
}

Summarize:

• Plugins are compiled in preference to presets.

• Plugins are compiled in ascending order of the index of the array (from the first to the last in the array).

• The presets are compiled in reverse order of the index of the array (from the last to the first in the array). Because the author thinks that most of them will write presets as ["es2015", "es2016"].
  The above is the compatibility of edge and ie through babel.
  If you want to know more details , click
  through. If you encounter other problems, you can discuss and study with me in private.
  You can pay attention. 收藏博客The author will continue to update...