1. 程式人生 > 其它 >webpack js相容性處理

webpack js相容性處理

1、基本js相容性處理 --> @babel/preset-env
只能轉換基本語法,promise等高階語法不能轉換
官方文件:https://webpack.docschina.org/loaders/babel-loader/
1)安裝
npm install -D babel-loader @babel/core @babel/preset-env
2)配置

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

2、JavaScript的模組化標準庫 --> core-js
可以按需載入,支援js的高階語法轉換
1)安裝
npm install -D core-js
2)配置

{
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      // 預設:知識babel做怎樣的相容性處理
      "presets": [
        ["@babel/preset-env", {
          // 按需載入
          "useBuiltIns": "usage",
          // 指定core-js版本
          "corejs": 3,
          // 指定瀏覽相容性版本
          "targets": {
            "chrome": "60",
            "firefox": "60",
            "ie": "9",
            "safari": "10",
            "edge": "17"
          }
        }]
      ]
    }
  }
}

本次安裝包的版本:
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"babel-loader": "^8.2.3",
"core-js": "^3.19.2",