Question

我有一个正在构建的Vue CLI 3项目。内置的代码似乎无视broswerslist。无论我是否将Edge添加到浏览器列表中，它都会输出破坏Microsoft Edge的代码。

正在输出的语法是像lambda这样的参数散布运算符

(...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',
  ],
}

我尝试过的事情：

从项目中删除打字稿
使用无效的浏览器更改.browserslistrc来检查它是否正在读取文件，并且由于找不到浏览器而导致构建崩溃（意味着正在读取文件）。
将.browserslistrc设置为“ ie 11”，它仍然输出lambda和散布运算符。

Answer 1

问题在于两件事结合在一起。

Babel（至少默认情况下）不会转换导入的库，因此，使用新语法的任何导入的JS文件都有很大的机会保持原样。
Bootstrap-Vue使用这种语法，并且导入单个组件会导致此问题。

解决方案：

导入整个Bootstrap-Vue，并将其Vue.use导入main.js

Vue Babel输出不考虑浏览器列表的不兼容代码

1 个答案: