本来没太想发布这篇文章,不过还是说说吧。
这几年来,只要是可以,在浏览器兼容上,我都是直接忽略掉IE和国产浏览器的,只要我有决定权的情况下,因为我早些年被IE调试折腾够了,知道那很没有意义。当然我也知道,很多国内的小伙伴没办法,没得选择,只要是客户的网站,你不得不给他们去调试各种奇葩的浏览器,好在这些年终归是好一些了,不像早些年连IE6都要兼容那么痛苦了。
那么今天要说的是,用laravel-mix编译出来的js文件,如果这期间你使用了vuejs,如果你用了一些ES6的一些新的语法,那么在IE和Edge上,肯定是各种报错的,就需要想办法去转换一下。
如果你自己熟悉babel和webpack相关的编译,那么可能这个不难。但是在laravel领地里,大部分人还都不那么擅长前端,大家更多需要依赖一些现成的laravel-mix插件,否则就感觉搞不定了。
这里需要提两个方案:
(一)laravel-mix-polyfill
这是一个laravel-mix的插件,你需要用npm或yarn安装一下:
npm install laravel-mix-polyfill --save-dev
// 或者
yarn add laravel-mix-polyfill --dev
然后你需要在你的webpack.mix.js
文件里做类似的更改:
let mix = require('laravel-mix');
require('laravel-mix-polyfill');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.polyfill({
enabled: true,
useBuiltIns: "usage",
targets: {"firefox": "50", "ie": 11}
});
比较关键的是,其中的targets: {"firefox": "50", "ie": 11}
,自行改上你需要兼容的ie版本。
但是,这个方案在我自己的测试中没有成功,还是有些不能解决的问题,但这个方案毕竟偏官方一些,所以介绍出来,大家进行尝试,将你们的测试结果留言发布出来,供更多人参考。
如果你想着查看和调试它的更多选项,可以到它的官网上看一下://laravel-mix.com/extensions/polyfill
(二)targets-webpack-plugin
这个也是类似的道理,但是我实测有效,是目前在用的。
第一步也是装一下组件:
yarn add targets-webpack-plugin -D
然后,在你的webpack.mix.js
文件里做类似的更改:
const TargetsPlugin = require('targets-webpack-plugin')
...
mix.webpackConfig({
plugins: [
new TargetsPlugin({
browsers: ['last 2 versions', 'chrome >= 41', 'IE 11'],
}),
]
})
这样IE 11就可以兼容了,你也可以改成IE 10,如果你的终端用户还有大量IE10的话。
当然在实际中,你也不需要每次编译的时候,都做转换,这样会导致npm run dev的时间增长,可以加个判断,只在生产环境做js转换:
const TargetsPlugin = require(‘targets-webpack-plugin’)
…
if (mix.inProduction()) {
mix.webpackConfig({
plugins: [
new TargetsPlugin({
browsers: [‘last 2 versions’, ‘chrome >= 41’, ‘IE 11’],
})
]
})
}
好了,大概这样,希望能帮到你