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方式
package.json
增加--hot
"dev": "webpack-dev-server --color --progress --hot"
复制代码
src/index.js
增加module.hot.accept()
,如下。当模块更新的时候,通知index.js
if (module.hot) {
module.hot.accept();
}
console.log('hot module replacement work')
复制代码
Node.js
API方式
webpack.config.js
const webpack = require('webpack');
devServer: {
hot: true
}
plugins:[
new webpack.HotModuleReplacementPlugin()
]
复制代码
src/index.js
增加module.hot.accept()
,如下。当模块更新的时候,通知index.js