前言
在前端开发中，我们常常使用 React 进行开发，而 Webpack 则被广泛地应用于打包和构建项目中。但是，由于浏览器对 ES6 语法支持的不完全，我们需要使用 Babel 将 ES6 转换为浏览器可识别的 ES5 语法。因此，这篇文章将讲解如何在 React 和 Webpack 中使用 Babel7.4 进行开发，以及一些常见的配置。
Babel7.4 的安装
Babel7.4 是最新版本的 Babel，现在我们来安装它。
首先，我们需要在本地安装 Babel-cli 以及它的插件，具体指令如下：
npm install -D babel-cli @babel/core @babel/preset-env
Babel-cli 是 Babel 的命令行工具，@babel/core 则是 Babel 的核心模块，@babel/preset-env 则是 Babel 的预设环境模块。
除此之外，还需要安装若干个需要的插件，具体插件名字我们会在下文中讲到。插件的安装指令也非常简单，只需要在命令行中输入：
npm install -D @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/plugin-syntax-dynamic-import @babel/preset-react
注意：使用 npm 4 以下的版本可能会出现一些问题。建议升级到最新版本以保证正常安装。
Babel7.4 的配置
完成 Babel7.4 的安装之后，我们还需要对其进行配置。在项目的根目录下新建一个 .babelrc 文件（如果没有就新建一个），然后加入如下代码：
-- -------------------- ---- -------
-
---------- -
--------------------
---------------------
--
---------- -
--------------------------------------
----------------------------------
-----------------------------------------
-
-这里的 "presets" 数组中包含了两个预设环境：@babel/preset-env 和 @babel/preset-react。@babel/preset-env 可以根据配置的目标浏览器或者 Node.js 版本，自动将 ES6 转换为 ES5 语法。@babel/preset-react 则可以将 JSX 语法转换为能够被浏览器识别的 JavaScript 代码。
而 "plugins" 数组则包含了三个转换插件，分别是：
- @babel/plugin-syntax-dynamic-import: 用于支持 import() 动态导入语法；
- @babel/plugin-transform-runtime: 用于避免在每个模块中重复引入 Babel 的辅助函数，从而减小编译后的代码体积。
- @babel/plugin-proposal-class-properties：用于支持在 class 中使用属性初始化器和访问器。
除此之外，还有很多其他的插件可以用于 Babel 的配置，可根据项目需求决定是否添加。
React + Webpack + Babel7.4 的配置
对于使用 React 和 Webpack 进行开发的项目，还需要对 Webpack 进行相应的配置来支持 Babel7.4。下面我们就以一个简单的 React 应用为例，来了解 Webpack + Babel7.4 的配置。
在开始之前，我们需要先安装 React 和 ReactDOM，命令行命令如下：
npm install -S react react-dom
配置 Webpack
先来看一下 Webpack 的配置文件，简单来说，Webpack 的核心作用就是将多个 JavaScript 文件打包成单个文件，以便于在浏览器中执行。下面这个 Webpack 配置文件中，我们添加了 Babel7.4 的支持。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- ---------------
-------- -----------------
---- -
------- ---------------
-------- -
--------------- ----- -- ---------
--
--
--
--
--
-------- -
-- ----------
----------- ------- -------- ------- --------
--
-------- --------------------
---------- -
------------ -------------------- --------
--------- -----
----- -----
--
--在这个 Webpack 配置文件中，我们使用了 babel-loader 来对 JavaScript 文件进行转换。babel-loader 是 Webpack 与 Babel 集成的关键，它会将文本中的 ES6/ES7/JSX 语法转换为 ES5 语法供浏览器使用。
编写 React 组件
在我们了解了 Webpack 和 Babel 组件之后，我们还需要对 React 组件进行编写。这里是一个简单的组件代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
------ -
-----
---------- -------- - ----- - --------------
------
--
-
-
------ ------- ----在上面这段代码中，我们首先使用了 import 语句引入了 React 中的组件，然后定义了一个 App 组件。该组件只有一个 render 方法，返回一个包含了 "Hello, Babel7.4 + React + Webpack4!" 文本的 div 节点。最后，我们使用 export default 将该组件导出，以便在其他地方使用。
配置 Babel
除此之外，我们还需要在项目根目录下添加一个 .babelrc 文件，用于配置 Babel 的一些参数。这个文件的内容和之前我们讲过的文件一样。
-- -------------------- ---- -------
-
---------- -
--------------------
---------------------
--
---------- -
--------------------------------------
----------------------------------
-----------------------------------------
-
-运行项目
最后，我们可以运行 npm start，在浏览器中查看运行结果。如果一切顺利，你将会看到一个包含 "Hello, Babel7.4 + React + Webpack4!" 文本的页面。
总结
Babel7.4 + React + Webpack4 的搭建并不是很难，只需要按照上述步骤进行配置即可。其中，Webpack 中的配置是比较关键的一步，需要注意细节。同时，由于 Babel7.4 和其他依赖库的升级，新版的 Webpack 现在支持的 Babel 真的变多了，大大提高了前端开发的效率和体验。如果你对此项技术感兴趣，建议多研究一下 Babel7.4 的各种特性和插件，深入理解其工作原理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64640b3e968c7c53b04f6d91