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

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

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

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

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

相关文章
|
3月前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
241 1
|
4月前
|
Windows
禁止ie自动跳转edge
禁止ie自动跳转edge
135 0
|
4月前
|
JavaScript 前端开发
|
5月前
|
Apache 数据安全/隐私保护
HAProxy的高级配置选项-ACL篇之基于浏览器匹配制案例
这篇文章介绍了HAProxy的ACL(访问控制列表)功能,特别是如何基于用户代理(User-Agent)即浏览器类型进行匹配和流量分发的高级配置选项,并通过实战案例展示了如何配置ACL规则以实现基于不同浏览器的访问控制。
78 5
HAProxy的高级配置选项-ACL篇之基于浏览器匹配制案例
|
6月前
|
存储 NoSQL 文件存储
【Azure 环境】存储在Azure上的文件,使用IE/Edge时自动打开的问题,如何变为下载而非自动打开
【Azure 环境】存储在Azure上的文件,使用IE/Edge时自动打开的问题,如何变为下载而非自动打开
|
6月前
|
CDN
Iconfont——Error: <path> attribute d: Expected number, "MNaNNaNaNaNNaNNaN…".
Iconfont——Error: <path> attribute d: Expected number, "MNaNNaNaNaNNaNNaN…".
64 0
|
6月前
Edge——如何打开IE浏览器进行访问
Edge——如何打开IE浏览器进行访问
95 4
|
6月前
|
JavaScript
VUE——如何兼容IE9|IE10|IE11浏览器
VUE——如何兼容IE9|IE10|IE11浏览器
197 0
VUE——如何兼容IE9|IE10|IE11浏览器
|
7月前
|
搜索推荐 数据安全/隐私保护
战斧指纹浏览器与IPXProxy海外代理IP配置详解
对于需要管理多个电商平台店铺的用户而言,战斧指纹浏览器提供了便捷的多账号隔离功能。跨境电商卖家要想在海外顺利的管理自己的店铺,还需要用到海外代理IP来实现IP隔离,确保店铺之间互相独立,不会受到其他店铺的牵连。下面以IPXProxy海外代理IP为例,给大家带来战斧指纹浏览器集成IPXProxy海外代理IP的详细指南。
222 0
|
7月前
|
数据安全/隐私保护
如何配置战斧指纹浏览器和IPXProxy海外代理IP?
通过代理IP,用户可以轻松绕过地域限制,访问全球范围内的网站和服务。特别是对于跨境用户来说,需要在目标市场投放广告,而代理IP能帮助实现精准投放,快速的提升品牌或者店铺的知名度。那如何在如何在战斧指纹浏览器中设置IPXProxy海外代理IP?
129 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等