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实现语法编译兼容

    如要了解更加详情 点击穿越

    如碰到其他的问题 可以私下我 一起探讨学习

    可以关注收藏博客 作者会持续更新…