本文将介绍如何在 React 开发中使用 Babel 处理 HMR。Babel 是一个 JavaScript 编译器，可以将高级语法转换成低级语法，这对于开发者来说非常方便，可以使用新的 JavaScript 特性来编写代码。HMR 全称为热模块替换(Hot Module Replacement)，它可以让我们在代码修改后，无需刷新页面，就能看到修改后的效果。
Babel
首先让我们来看看 Babel，Babel 可以把 ES6 代码转换成 ES5 代码，这样就可以在现有浏览器上运行 ES6 代码。Babel 可以通过命令行工具安装：
npm install -g babel-cli
安装完成后，就可以运行 babel 命令：
babel source.js --out-file target.js
这样就可以将 source.js 转换成 ES5 代码，并输出到 target.js 中。
Webpack
接下来，我们需要使用 Webpack 来进行打包。Webpack 是一个打包工具，可以把多个 JavaScript 文件打包成一个文件，便于浏览器加载。Webpack 需要安装：
npm install -g webpack
安装完成后，我们可以使用配置文件 webpack.config.js 来进行打包：
-- -------------------- ---- ------- -------------- - - ------- ----------------- -------- - ------- --------- - -------- ----------- ----------- --- -------- - ---------- -- -------- -------- ----------- --------------- ---------- -------------- ---- -- --
这个配置文件指定了打包的入口文件是 ./src/index.js，输出文件是 ./dist/bundle.js，并且指定了使用 babel-loader 来处理 JavaScript 文件。babel-loader 需要安装：
npm install babel-loader --save-dev
HMR
现在我们已经可以使用 Babel 和 Webpack 编译我们的代码，接下来让我们来讨论如何使用 HMR 来处理热更新。HMR 的核心思想是让修改后的代码替换旧的代码，这样就不需要刷新浏览器。可以使用 webpack-dev-server，这是一个 Webpack 相关的开发服务器，可以在保存修改时自动刷新页面。
首先需要安装 webpack-dev-server：
npm install webpack-dev-server --save-dev
接下来修改 webpack.config.js 文件：
-- -------------------- ---- ------- ----- ------- - ------------------- -------------- - - ------- - ---------------------------------------------------- ------------------ --- -------- - ------- --------- - -------- ----------- ----------- --- -------- - ---------- -- -------- -------- ----------- --------------- ---------- -------------- ---- --- --------- - ----- ------------------------------------ --- ----------- - ------ ---- -- --
这里我们添加了 webpack-dev-server 的配置。首先是添加了 entry，指定要启动的文件是 ./src/index.js，同时添加了 webpack-dev-server/client?http://localhost:8080 这一行，用于与开发服务器进行通信。然后我们添加了 plugins，使用 webpack.HotModuleReplacementPlugin() 来启用 HMR。最后在 devServer 中设置 hot 为 true，这样开发服务器就支持 HMR 了。
接下来，运行开发服务器：
webpack-dev-server --hot --inline
这样就可以打开浏览器 http://localhost:8080，看到页面了。当修改代码时，你会发现代码已经被更新了，但是页面并没有刷新。现在你已经成功地使用 Babel 处理 HMR 了。
示例代码
这里是一份示例代码：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ----- --- ------- --------- - --------- - -------- - ------------- ----------- ---- -- - ------ ------- ----
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- ----- ------ - --------- -- - ----------------- ------------ --- --------------------------------- --- -- ------------ -- ------------ - --------------------------- -- -- - ----------------------------------- ---- -
结论
本文介绍了如何使用 Babel 和 Webpack 处理 React 开发中的 HMR。希望通过这篇文章的介绍，读者已经理解了如何使用 Babel 处理 HMR，并且能够在自己的项目中成功地使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67729d116d66e0f9aadb6243