前言：ES6 是 JavaScript 的下一代标准，它增加了许多新的语言特性，使 JavaScript 代码更加优雅、易读和易于维护。但是，由于 ES6 还没有得到所有浏览器的完全支持，因此我们需要使用 Babel 将 ES6 代码转换为浏览器可以理解的代码。本文将详细介绍如何在 React 项目中使用 Babel7 和 Webpack 4 来转换 ES6。
Babel 7
Babel 是一个 JavaScript 编译器，它能够把 ES6 代码转换成 ES5 代码，从而实现浏览器兼容性。Babel 7 是 Babel 的最新版本，它支持最新的 ES6/ES7/ES8 语法，支持更简单的配置和更好的性能。
安装 Babel
要在 React 项目中使用 Babel，需要先安装 Babel 7 和 Babel 相关的一些插件。可以通过以下命令安装 Babel：
$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react
其中，@babel/core 是 Babel 编译器的核心库，@babel/cli 是通过命令行使用 Babel 的工具，@babel/preset-env 是用于转换 ES6 语法的工具，@babel/preset-react 是用于转换 JSX 语法的工具。
配置 Babel
安装完 Babel 后，需要在项目根目录下创建一个 .babelrc 文件，并在其中配置 Babel:
-- -------------------- ---- -------
-
---------- -
-
--------------------
- ---------- - ----------- ----- - --------- - -
--
---------------------
-
-该配置文件定义了两个预设（preset）：@babel/preset-env 和 @babel/preset-react。@babel/preset-env用于将 ES6 语法转换为 ES5 语法，@babel/preset-react用于将 JSX 语法转换为普通的 JavaScript 语法。其中，targets属性指定转换的目标浏览器。browsers选项是一个字符串数组，由 browserslist 来解析，它用于设置支持的浏览器版本。在这里，我们设置为最新的两个版本。
Webpack 4
Webpack 是一个模块打包工具，它构建了一个依赖关系图并生成一个或多个包，最终将这些包归纳为一个或多个文件。Webpack 4 是 Webpack 的最新版本，它支持更好的性能、更多的优化和更简单的配置。
安装 Webpack
要在 React 项目中使用 Webpack 4，需要先安装 Webpack 和一些相关的插件。可以通过以下命令安装 Webpack：
$ npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader css-loader style-loader sass-loader node-sass file-loader url-loader webpack-merge
其中：
webpack、webpack-cli和webpack-dev-server是 Webpack 相关的核心库。babel-loader是用于在 Webpack 中使用 Babel 的插件。css-loader和style-loader用于加载和解析 CSS 文件。sass-loader和node-sass用于加载和解析 SASS 文件。file-loader和url-loader用于加载和解析图片等静态资源。html-webpack-plugin用于自动生成 HTML 文件。webpack-merge用于合并 Webpack 配置文件。
配置 Webpack
安装完 Webpack 后，需要在项目根目录下创建以下四个文件：
webpack.common.jswebpack.dev.jswebpack.prod.jsindex.html
其中，webpack.common.js 是公共的 Webpack 配置文件，webpack.dev.js 和 webpack.prod.js 是开发环境和生产环境的 Webpack 配置文件，index.html 是自动生成的 HTML 文件。
首先，需要在 webpack.common.js 中配置 Webpack：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
---- ----------------
--
------- -
----- -------------------- --------
--------- ------------------
--
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- --------------
-
--
-
----- ----------
---- -
-
------- --------------
--
-
------- ------------
--
-
------- -------------
-
-
--
-
----- -------------------------
---- -
-
------- -------------
-------- -
------ ----
-
-
-
-
-
--
-------- -
--- -------------------
--------- ------------------
--
--
-------- -
----------- ------- ------- --------
-
--该配置文件定义了：
entry入口文件，即 React 应用的顶层组件；output输出文件，即打包后的文件输出目录和文件名；module.rules模块加载规则，即 Webpack 如何处理各种类型的文件。其中，- 第一个规则用于加载 and 转换 JSX 文件，使用 Babel 进行转换；
- 第二个规则用于处理 SCSS 文件；
- 第三个规则用于处理图片等静态资源。
plugins插件，即在 Webpack 整个构建过程中需要执行的任务。其中，HtmlWebpackPlugin用于自动生成 HTML 文件。
resolve.extensions将默认的文件扩展名添加到 Webpack 的解析选项中。这样可以在导入模块时省略扩展名。
然后，在 webpack.dev.js 和 webpack.prod.js 文件中分别定义开发环境和生产环境的 Webpack 配置，分别如下所示：
-- -------------------- ---- -------
----- ----- - -------------------------
----- ------ - -------------------------------
-------------- - ------------- -
----- --------------
-------- --------------------
---------- -
------------ ---------
----- -----
---- ----
-
----- -------------------- ---- -------
----- ----- - -------------------------
----- ------ - -------------------------------
----- -------------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
----- -------------- - -----------------------------------
-------------- - ------------- -
----- -------------
-------- -------------
------------- -
---------- ---- ----------------- --- --------------------------
--
-------- -
--- ----------------------
--------- -------------------
--
--
------- -
------ -
-
----- ----------
---- -
-
------- ---------------------------
--
-
------- ------------
--
-
------- -------------
-
-
-
-
-
---其中，开发环境和生产环境的区别主要在于 mode 和相关的配置选项。具体来讲，
- 在开发环境中，我们将
mode设置为development，使用inline-source-map生成源代码映射，并开启webpack-dev-server，以便实时更新代码； - 在生产环境中，我们将
mode设置为production，使用source-map生成源代码映射，并启用一些压缩和优化插件。
注意，在生产环境中，还需要安装一些插件:
mini-css-extract-plugin用于将 CSS 提取到独立的文件中，而不是内联到 HTML 中；uglifyjs-webpack-plugin用于压缩 JavaScript 代码；optimize-css-assets-webpack-plugin用于压缩 CSS。
最后，在 index.html 文件中定义项目的 HTML 结构和 CSS 样式即可。
示例代码
完整的 React 项目代码可在 Github 上查看。
结论
使用 Babel 7 和 Webpack 4 可以将 ES6 代码转换为浏览器可以理解的代码，并使用 Webpack 打包 React 项目，使其变得更加优雅、易读和易于维护。本文详细讲解了如何在 React 项目中使用 Babel 7 和 Webpack 4，并提供了代码示例，希望能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674de7dd947dc5bcb30407b0