webpack@4中babel7配置

安裝

首先確保本地已經安裝了webpack和webpack-cli

安裝babel-loader

npm i -D babel-loader

安裝玩後，控制檯有提示：

按照提示安裝@babel/core@^7.0.0

npm i -D @babel/core@^7.0.0

繼續安裝@babel/preset-env

npm i -D @babel/preset-env

注意：
注意版本衝突，babel-loader 8.x對應babel 7.x，以此類推

配置

webpack配置

webpack.config.js中增加匹配規則：

module.exports = {
    module:{  
        rules:[   
            {
                test:/\.js$/,   //匹配JS文件  
                use:'babel-loader',
                exclude:/node_modules/   //排除node_modules目錄
            }
        ]
    }
}

Babel配置

在工程跟目錄創建名爲 .babelrc 的Babel配置文件（需要遵守JSON規範）

{
    "presets": ["@babel/env"]
}

測試

該安裝的也已經安裝了，該配置的也都配置了，那麼我們現在來測試一下

假如我們現在有個b.js文件

let a = new Map()

我們通過webpack打包試試，webpack配置文件：

module.exports = {
    entry: './b.js',
    output: {
		filename: './b.min.js'
	},
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/, 
                loader: "babel-loader"
            }
        ]
    },
    mode: "development" // 開發模式，不會打包後的js文件
}

運行：

npx webpack

轉換後的文件：

可見，babel已經將es6的語法let轉成了var，但是Map()並沒有轉，在不支持es6的瀏覽器中仍然無法運行，這時，我們需要用到babel-polyfill

babel-polyfill

安裝babel-polyfill

npm i -S @babel/polyfill

修改babel配置文件：

{
    "presets": [
        [
          "@babel/env",
          {
            "useBuiltIns": "usage",
            "targets": {
              "chrome": "64",
              "ie": "9"
            }
          }
        ]
      ]
}

useBuiltIns和targets配置的解釋見文章：babel7入門 —— 超詳細學習筆記

配置好後執行：

npx webpack

結果：

可見，在輸出的js文件中，引入很多膩子腳本以達到在低版本瀏覽器支持map的目的

transform-runtime

對於開發應用來說，直接使用上述的 polyfill 方案是比較方便的，但如果是開發工具、庫的話，這種方案未必適合（babel-polyfill 是通過向全局對象和內置對象的prototype上添加方法實現的，會造成全局變量污染）。Babel 提供了另外一種方案 transform-runtime，它在編譯過程中只是將需要polyfill的代碼引入了一個指向 core-js 中對應模塊的鏈接(alias)

安裝依賴：

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

參考plugin-transform-runtime 的配置：

{
  "presets": [
    ["@babel/env", {
      "modules": false,
      "targets": {
         "chrome": "64"
       }
    }]
  ],
  "plugins": [["@babel/plugin-transform-runtime", {
      "useBuiltIns": true
      // "polyfill": false
    }]
  ]
}

這裏解釋一下 useBuiltIns（默認爲 false） 和 polyfill（默認爲 true） 兩個選項，如果不配置或使用默認值，那 Babel 是會自動 polyfill 的（引入core-js polyfill 的alias），哪怕你指定的 targets 只有最新版chrome，最終編譯出來的包會比較大，這不是我們所希望的。解決辦法是通過配置 polyfill爲 false 或 useBuiltIns 爲true (二選一即可)，從而不引入 core-js 的 polyfill 。如果目標環境是較新的瀏覽器，可以按此配置，但是有一些最新的特性可能還需要單獨 polyfill。個人認爲，如果開發應用可以直接使用 babel-polyfill 方案，相對來說簡單方便，編譯輸出的包大小也是可控的
——————————————————————————
transform-runtime部分轉自文章：
標題：使用 webpack 4 和 Babel 7 配置 Vue.js 工程模板
鏈接：https://segmentfault.com/a/1190000015247255
作者：xsbear