做项目遇到了一些不能轻易升级chrome版本的客户,他们还用着40版本的chrome,所以今天就来说说为了兼容低版本的chrome做了哪些努力。
主要是两件事情:
(1)将自己代码转为es5版本
(2)将node_modules中引用的插件,有需要的部分转为es5版本
转自己的
配置自己的代码我们需要用到一个新的插件babel-polyfill
(1)安装
由于这个需要在你的源码之前使用,我们需要将其安装为dependency而不是dev-dependency。
npm install --save @babel/polyfill
(2)使用
vue.config.js
module.exports = {
pages: {
index: {
// add here ---start---
entry: ['node_modules/babel-polyfill/dist/polyfill.js', 'src/main.js'],
// add here ---end---
template: 'public/index.html',
filename: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index'],
},
},
};
更多使用请看官方文档
(3)配置
新增babel.config.js文件
将所需要使用的polyfill配置出来
module.exports = {
presets: [
['@vue/app', {
polyfills: [
'es6.promise',
'es6.symbol',
'es6.array.iterator',
'es6.object.assign',
],
useBuiltIns: 'entry',
}],
],
};
转node_modules下指定插件
vue.config.js
新增配置
transpileDependencies: ['your dependency'],
更多使用请看官方文档