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
视为 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实现语法编译兼容
如要了解更加详情 点击穿越
如碰到其他的问题 可以私下我 一起探讨学习
可以关注收藏博客 作者会持续更新…
