webpack之babel配置和HMR

webpack 是前端開發最經常使用的模塊打包器之一，咱們多是使用github上提供的腳手架如react-boilerplate，也有可能根據本身的項目來寫webpack配置。不管你是屬於哪種狀況，你仍是要熟悉webpack的相關配置才能更好的使用它。

接下來主要介紹webpack中的babel配置和HMR兩塊內容。

babel

Babel 是一個 JavaScript 編譯器。 經過編譯轉換容許你馬上使用新語法，無需等待瀏覽器支持。

如今babel的版本是6.x，下面提到的知識點都是基於這個版本的。

.babelrc

.babelrc 是用來配置轉碼的規則和插件的。

{
  // 倒序編譯
  "presets": [
    "env",
    "react"
    "stage-2",
  ],
  "plugins": ["transform-runtime"]，
}
複製代碼

presets是一堆plugins的預設，起到方便的做用。

plugins是編碼轉化工具，babel會根據你配置的插件對代碼進行相應的轉化。

除了presets和plguins配置，babel還支持對應的環境下相關配置。

"env": {
    "production": {
      "plugins": ["transform-react-constant-elements"]
    }
  }
複製代碼

babel-preset-env

babel-preset-env 默認狀況下是等於 ES2015 + ES2016 + ES2017，也就是說它對這三個版本的ES語法進行轉化。

這個preset提供了一些配置，以下面經過配置針對各個瀏覽器的最新的兩個版本，以及safari的版本7及以上進行轉碼

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}
複製代碼

babel-preset-stage-n

ECMAScript標準的制定流程包含下面幾個階段。

• Stage 0 - Strawman（展現階段）
• Stage 1 - Proposal（徵求意見階段）
• Stage 2 - Draft（草案階段）
• Stage 3 - Candidate（候選人階段）
• Stage 4 - Finished（定案階段）

babel-preset-stage-n 包括了 babel-preset-stage-0， babel-preset-stage-1， babel-preset-stage-2， babel-preset-stage-3。

那麼爲何沒有babel-preset-stage-4呢？第四階段屬於定案完成階段了，相關的內容就在上邊的babel-preset-env中。

各個stage之間是包含關係，stage-0會包含stage-1, stage-2, stage-3, 如此類推。

每一個stage都包含相應的插件，我的經常使用的是stage-2，包含插件有類屬性語法、裝飾器語法、對象展開操做、async/await等。

babel-preset-react

這個預設就是包含了react開發所需的相關插件，支持react開發相關語法。

babel-polyfill

Babel 默認只轉換新的 JavaScript 句法（syntax），而不轉換新的 API ，好比 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（好比 Object.assign）都不會轉碼。

如上述所說，對於新的API，你可能須要引入babel-polyfill來進行兼容

安裝和使用：

npm install --save babel-polyfill
+ import "babel-polyfill"
+ module.exports = { entry: ['babel-polyfill', './app/js'] }
複製代碼

關鍵點：

• babel-polyfill 是爲了模擬一個完整的ES2015+環境，旨在用於應用程序而不是庫/工具。
• babel-polyfill 會污染全局做用域

babel-runtime 和 transform-runtime

babel-runtime的做用：

• 提取輔助函數。ES6轉碼時，babel 會須要一些輔助函數，例如 _extend。babel 默認會將這些輔助函數內聯到每個 js 文件裏， babel 提供了 transform-runtime 來將這些輔助函數「搬」到一個單獨的模塊 babel-runtime 中，這樣作能減少項目文件的大小。
• 提供polyfill：不會污染全局做用域，可是不支持實例方法如Array.includes

安裝：

npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
複製代碼

babel-runtime 更像是分散的 polyfill 模塊，須要在各自的模塊裏單獨引入，藉助 transform-runtime 插件來自動化處理這一切，也就是說你不要在文件開頭import相關的polyfill，你只需使用，transform-runtime會幫你引入。

babel-runtime通常用在庫的開發

HMR

兩種方式均可以實現熱加載。

CLI方式

1. package.json 增長 --hot

"dev": "webpack-dev-server --color --progress --hot"
複製代碼

2. src/index.js 增長module.hot.accept(),以下。當模塊更新的時候，通知index.js

if (module.hot) {
    module.hot.accept();
}

console.log('hot module replacement work')
複製代碼

Node.js API方式

1. webpack.config.js

const webpack = require('webpack');

devServer: {
    hot: true
}

plugins:[
     new webpack.HotModuleReplacementPlugin()
]
複製代碼

2. src/index.js 增長module.hot.accept(),以下。當模塊更新的時候，通知index.js

相關參考

• Babel的使用
• babel-polyfill VS babel-runtime VS babel-preset-env