webpack之babel配置和HMR-阿里云开发者社区

开发者社区> 开发与运维> 正文

webpack之babel配置和HMR

简介: webpack 是前端开发最常用的模块打包器之一,我们可能是使用github上提供的脚手架如react-boilerplate,也有可能根据自己的项目来写webpack配置。无论你是属于哪一种情况,你还是要熟悉webpack的相关配置才能更好的使用它。

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"
复制代码
  1. 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()
]
复制代码
  1. src/index.js 增加module.hot.accept(),如下。当模块更新的时候,通知index.js

相关参考



原文发布时间为:2018年07月01日

原文作者:Skandar-Ln


本文来源:掘金 如需转载请联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章