Vue Babel输出不兼容的代码而忽略了browserslist

问题描述 投票:1回答:1

我正在构建一个Vue CLI 3项目。构建的代码似乎忽略了broswerslist。无论我是否将Edge添加到browserslist,它都会输出破坏Microsoft Edge的代码。

正在输出的语法是lambda中的参数spread运算符

(...x) => {}

某个版本的Edge不支持此功能,我的项目会不断输出!

这些是我的一些文件:

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "await-mutex": "^1.0.2",
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.0-rc.15",
    "json5-loader": "^1.0.1",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.11",
    "popper.js": "^1.14.7",
    "pretty-checkbox-vue": "^1.1.9",
    "vee-validate": "^2.2.0",
    "vue": "^2.6.9",
    "vue-router": "^3.0.2",
    "vuex": "^3.1.0",
    "tiptap": "^1.14.0"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.123",
    "@vue/cli-plugin-babel": "^3.5.1",
    "@vue/cli-plugin-eslint": "^3.5.1",
    "@vue/cli-plugin-typescript": "^3.5.1",
    "@vue/cli-service": "^3.5.1",
    "@vue/eslint-config-typescript": "^3.0.5",
    "@types/jwt-decode": "^2.2.1",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "typescript": "^3.0.0",
    "vue-template-compiler": "^2.6.9"
  }
}

.browserslistrc

> 1%
last 2 versions
edge 15
not ie <= 8

babel.config.js

module.exports = {
  presets: [
    '@vue/app',
  ],
}

我尝试过的:

  1. 从项目中删除Typescript
  2. 用无效的浏览器更改.browserslistrc以检查它是否正在读取文件,并且由于找不到浏览器而导致构建崩溃(意味着它正在读取文件)。
  3. 将.browserslistrc设置为“ie 11”,它仍然输出lambdas和spread运算符。
vue.js babeljs microsoft-edge vue-cli-3 browser-support
1个回答
1
投票

问题在于两件事情的结合。

  1. Babel(至少在默认情况下)不会转换导入的库,因此任何使用新语法的导入JS文件都很有可能保持原样。
  2. Bootstrap-Vue使用这种语法,导入单个组件可能会导致此问题。

解:

  1. Vue.use中导入整个Bootstrap-Vue和main.js
© www.soinside.com 2019 - 2024. All rights reserved.