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