Vue Babel 输出不兼容的代码,忽略浏览器列表
Vue Babel outputting incompatible code disregarding browserslist
我有一个正在构建的 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',
],
}
我尝试过的:
- 正在从项目中删除 Typescript
- 使用无效的浏览器更改
.browserslistrc
以检查它是否正在读取文件,并且由于找不到浏览器(意味着它正在读取文件)而导致构建崩溃。
- 将 .browserslistrc 设置为 "ie 11",它仍然输出 lambda 和扩展运算符。
问题在于两件事结合在一起。
- Babel(至少在默认情况下)不会转换导入的库,因此任何使用新语法的导入的 JS 文件很可能保持原样。
- Bootstrap-vue使用这样的语法,单独引入组件会出现这个问题
解决方案:
- 在
main.js
中导入整个 Bootstrap-Vue 和 Vue.use
我有一个正在构建的 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',
],
}
我尝试过的:
- 正在从项目中删除 Typescript
- 使用无效的浏览器更改
.browserslistrc
以检查它是否正在读取文件,并且由于找不到浏览器(意味着它正在读取文件)而导致构建崩溃。 - 将 .browserslistrc 设置为 "ie 11",它仍然输出 lambda 和扩展运算符。
问题在于两件事结合在一起。
- Babel(至少在默认情况下)不会转换导入的库,因此任何使用新语法的导入的 JS 文件很可能保持原样。
- Bootstrap-vue使用这样的语法,单独引入组件会出现这个问题
解决方案:
- 在
main.js
中导入整个 Bootstrap-Vue 和
Vue.use