因为es6语法不兼容部分浏览器,所以要对项目进行配置
1.安装依赖
npm install babel-loader @babel/preset-env @babel/core core-js -D //第一三方法安装这个
npm install @babel/polyfill -D //第二个方法安装这个
2.三种方法兼容
(1)babel-loader @babel/preset-env @babel/core 兼容
只能兼容基本的语法,但是像是promise语法,无法进行兼容
(2)兼容全部js语法 @babel/polyfill
在index.js中引入依赖即可
import ‘@babel/polyfill‘
缺点:全部兼容造成打包文件太大
(3)core-js 配合第一种进行按需兼容
3.配置详情(下面是将eslint检查与js兼容配置放在了一起,module中不可以对.js文件(同一种文件)进行多次匹配,多次匹配只会匹配第一个,所以要结合在一起)
{ test:/\.js$/, exclude:/node_modules/, use:[ { loader: ‘eslint-loader‘, options:{ fix:true//eslint自动修复格式错误 } }, {//js兼容性处理:babel-loader @babel/preset-env @babel/core loader: ‘babel-loader‘, options:{ //预设:指示babel做怎么样的兼容性处理 presets:[ [ ‘@babel/preset-env‘, { // 按需加载 useBuiltIns: ‘usage‘, // 指定core-js版本 corejs: { version: 3, }, // 指定兼容浏览器版本范围 targets: { chrome: ‘70‘, // 谷歌版本70及以上 firefox: ‘62‘, ie: ‘9‘, safari: ‘10‘, edge: ‘17‘, } } ] ] } } ] },
4.所以一般采用第一种加第三种组合进行.js文件兼容,也就是上面贴的代码。
第二种具体引入方式如下,不建议使用
{ test:/\.js$/, exclude:/node_modules/, loader:‘babel-loader‘, options:{ presets:[‘@babel/preset-env‘] } }