Webpack（十二）：js兼容性处理

方案一：

• 安装

​​npm i babel-loader @babel/preset-env @babel/core -D​​

• 配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          /* 预设：指示babel做怎么样的兼容性的处理 */
          presets: [ '@babel/preset-env' ]
        }
      }
    ]
  }
}

• 处理结果

• 处理前



• 处理后

• 问题

• ​​只能处理一些基本的语法，无法处理如Promise等高级语法​​
• 如：

// src/index.js
const promise = new Promise(resolve => {
  setTimeout(_ => {
    resolve({ msg: 'Hello' })
  }, 3000)
})

promise
  .then(res => {
    console.log(res);
  })

方案二：

• 解决​​方案一​​出现的问题:

• 安装​​npm i @babel/polyfill -D​​
• 在​​src/index.js​​​中引入即可(​​前提必须使用方案一配置​​)

// src/index.js
import '@babel/polyfill';
const promise = new Promise(resolve => {
  setTimeout(_ => {
    resolve({ msg: 'Hello' })
  }, 3000)
})

promise
  .then(res => {
    console.log(res);
  })

• 存在问题

• ​​只需要解决部分代码兼容性问题，但是打包将所有兼容性代码全部引用，体积太大​​

方案三：

• 只处理需要做兼容型处理，​​按需兼容​​

• ​​使用此方案不能再使用方案2​​
• 安装​​npm i core-js -D​​

// src/index.js
const promise = new Promise(resolve => {
  setTimeout(_ => {
    resolve({ msg: 'Hello' })
  }, 3000)
})

promise
  .then(res => {
    console.log(res);
  })

• 配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          /* 预设：指示babel做怎么样的兼容性的处理 */
          presets: [ 
            [
                          '@babel/preset-env',
                          {
                              useBuiltIns: 'usage', // 按需加载
                                corejs: {           
                                    version: 3 // 指定corejs版本
                                },
                                targets: { // 指定兼容性做到哪个版本的浏览器
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                          }
                      ]  
                    ]
        }
      }
    ]
  }
}