Edge浏览器报错IE解决 Expected identifier, string or number 配置 babel vue plugins Preset

Edge,IE（解决Expected identifier, string or number） 配置 babel vue配置 babel vue plugins Preset

前言

在Edge、ie出现这个错误一般是因为 es6及以上的不能兼容问题，我们可以通过 babel来进行编译

1.如果你比较着急想直接解决问题请往下直接看解决方案
2.如果你有时间想；了解学习以下babel的用法可以接着看

首先Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

1.了解 babel.config.js中两个配置 plugins 和 Preset

• Preset

视为 Babel Plugin 的集合。比如 babel-preset-es2015 就包含了所有跟 ES6 转换有关的插件。
类似于我们在引用组件库的时候 直接引用在main.js文件
缺点：preset-env 会将所有 ES2015-ES2020 的代码转化为 ES5 。

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

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

• plugins

我们可以按需引入ES6 转 ES5 的功能，
例如：添加解构赋值插件 ‘@babel/plugin-transform-destructuring’
类似于我们在引用组件库的时候 可以按需引入我们需要的组件

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

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

这样我们在项目中就单独引入了 结构赋值转移的插件
Babel 官方拆成了20+个插件,有其他需要可以去babel官网查看 https://www.babeljs.cn/
亿点小知识

targets： { [string]: number } 设置支持环境

例如版本chrome, edge, firefox, safari, ie, ios, node，支持制定版本，如node: 6.5。也使用node: current代表使用当前的版本。

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

debug: boolean，默认false

编译是否会去掉console.log。

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

loose、whitelist、browsers等…
关于属性的配置还有很多有兴趣或需要的可以去了解

解决方案：

提示：快速的解决你的问题 Expected identifier, string or number

1 npm install --save-dev @babel/preset-env
2 在babel.config.js 中添加

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

3 在vue.config.js中添加

这里也可以选择不添加
原因是：对于node_modules文件夹下的代码，默认是不会转换的（使用vue cli创建的项目，babel-loader默认不会转换这部分代码），所以类似ant-design，element-ui这些使用了新的api的库，在node_modules里是不会被转换的。

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

总结：

• plugins优先于presets进行编译。

• plugins按照数组的index增序(从数组第一个到最后一个)进行编译。

• presets按照数组的index倒序(从数组最后一个到第一个)进行编译。因为作者认为大部分会把presets写成[“es2015”, “es2016”]。
  以上就是 edge,ie 通过babel实现语法编译兼容
  如要了解更加详情 点击穿越
  如碰到其他的问题 可以私下我 一起探讨学习
  可以关注收藏博客 作者会持续更新…