vue-cli3打包后chunk文件有ES6箭头函数,转ES5
问题:按照官网创建项目以后正常打包==OK的,但是这边燕尾服编译不支持ES6语法箭头函数,看一下效果可以看到chunk-vendors.[hash].js里面是有箭头函数的,而且能看到是vue-router包存在箭头函数去cli官网上查transpileDependencies要配置这个参数,因为打包的时候默认不转义node_modules的包,显而易见那就配上transpileDependenc
问题:按照官网创建项目以后正常打包 == OK的,但是这边燕尾服编译不支持ES6语法箭头函数,看一下效果
可以看到chunk-vendors.[hash].js里面是有箭头函数的,而且能看到是vue-router包存在箭头函数
去cli官网上查 transpileDependencies
要配置这个参数,因为打包的时候默认不转义node_modules的包,显而易见那就配上 transpileDependencies: ['vue-router']
配完打包,哦吼,不管用。。。。
查资料,据说还得配个babel
babel.config.js
module.exports = {
presets: [
['@vue/app', {
useBuiltIns: 'entry',
polyfills: [
'es6.promise',
'es6.symbol'
]
}
]
]
}
哦吼还是不管用,,,那就把用到的依赖全部加上
不能说不管用吧,成功的从三千多个箭头函数变成三百多了,,,然并卵
经过我一下午的探索,查了Google
查了vue-cli
的 Issues
最后被我发现只需要改成
transpileDependencies: [/node_modules/]
好吧,我哭了。。。。
下面完整答案
- 在vue.config.js里加上
// vue.config.js
transpileDependencies: [/node_modules/],
2. 在vue.config.js
同级新建或者本身就有的 babel.config.js
里加上这句
// babel.config.js
module.exports = {
presets: [
['@vue/app', {
useBuiltIns: 'entry',
polyfills: [
'es6.promise',
'es6.symbol'
]
}
]
]
}
到这里我这边就没有ES6的代码了,但是我想多说几句
- 我在package.json 里加上这个,或者是在
.browserslist
里加也是一样的
- 如果还不行就在入口文件
main.js
里加上
import 'core-js';
import 'regenerator-runtime/runtime';
有的说法是加上import '@babel/polyfill'
但是这个马上就要被废弃,也可以试试吧,没准行呢,就先用着
我找这个费老劲了,希望可以帮到看到此文,遇到此事的大家
最后贴一下package.json
吧
更多推荐
所有评论(0)