随着前端技术的不断发展，React+ES6/ES7 成为了近几年最流行的前端技术组合之一。然而，由于浏览器的兼容性问题，使用这些技术创建的应用程序无法在所有浏览器中运行。为了解决这个问题，我们可以使用 Webpack+Babel 将应用程序打包成可在所有浏览器中运行的代码。
Webpack 介绍
Webpack 是一个强大的模块打包工具，它可以将所有的前端资源打包成一个或多个 JavaScript 文件。这意味着，我们可以将所有的 React 组件、CSS 样式和其他前端资源打包到一个或多个文件中，让浏览器加载这些文件，从而为我们的应用程序提供更好的性能和用户体验。
Webpack 可以根据配置选项来完成各种不同的任务。在本文中，我们将会重点介绍如何使用 Webpack 打包 React+ES6/ES7 应用程序。如果你想深入学习 Webpack，可以查看官方文档：https://webpack.js.org/
Babel 介绍
Babel 是一个 JavaScript 编译器，它可以将 ES6/ES7 代码转换成 ES5 代码，从而兼容所有浏览器。使用 Babel，我们可以在应用程序中使用最新的 JavaScript 特性，而不必担心浏览器的兼容性问题。
Babel 可以根据配置选项来完成各种不同的任务。在本文中，我们将会重点介绍如何使用 Babel 将 ES6/ES7 代码转换成 ES5 代码。
安装 Webpack 和 Babel
首先，我们需要全局安装 Webpack 和 Babel：
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
这里我们安装了 Webpack、Webpack CLI、Babel Loader、@babel/core、@babel/preset-env 和 @babel/preset-react。@babel/preset-env 和 @babel/preset-react 分别用于将 ES6/ES7 代码转换成 ES5 代码和将 JSX 语法转换成 JavaScript 对象。
配置 Webpack
在项目根目录下创建一个 webpack.config.js 文件，并添加如下内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
--------------------
---------------------
-
-
-
-
-
-
--这里我们定义了入口文件和输出文件的路径，以及一个名为 module 的选项，它用于配置各种不同的模块。我们使用 rules 选项来定义一个 JavaScript 模块，在这个模块中，我们使用 Babel Loader 来将 ES6/ES7 代码转换成 ES5 代码。Babel Loader 的 options 选项用于指定 Babel 要使用的预设（Presets），也就是 @babel/preset-env 和 @babel/preset-react。
配置 Babel
在项目根目录下创建一个 .babelrc 文件，并添加如下内容：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}这里我们使用了与 webpack.config.js 文件中相同的内容来配置预设选项。
编写应用程序代码
在 src 目录下创建一个 index.js 文件，并添加如下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- --- - -- -- -
-----
---------- -----------
------
--
-------------------- --- ---------------------------------这里我们导入了 React 和 ReactDOM 两个模块，并创建了一个名为 App 的组件，它会在页面上显示一条简单的问候语。
编译应用程序代码
现在我们可以使用 Webpack 和 Babel 来编译应用程序代码了：
npx webpack
这里我们使用 npx 命令来执行 webpack 命令，这样我们就不必全局安装 Webpack。
Webpack 会将所有的 React 组件、CSS 样式和其他前端资源打包到一个名为 bundle.js 的文件中。
在页面中加载应用程序
最后，我们需要在页面上加载打包后的 JavaScript 文件。在 public 目录下创建一个 index.html 文件，并添加如下内容：
-- -------------------- ---- -------
--------- -----
------
------
-------------------- -----------
-------
------
---- ----------------
------- ---------------------------------
-------
-------这里我们在页面上添加了一个名为 root 的元素，它将会在运行时被 React 渲染。我们使用 script 标签来加载打包后的 JavaScript 文件。
最后，我们只需在浏览器中打开 index.html 文件即可。
结论
通过本文，我们学习了如何使用 Webpack+Babel 打包 React+ES6/ES7 应用程序。在这个过程中，我们了解了 Webpack 和 Babel 的基本概念和用法，并实际编写了一个简单的 React 应用程序。
这里提供了完整的示例代码：https://github.com/SydneyWong/webpack-babel-react-example
希望本文能够对你在日常工作中使用 React+ES6/ES7 技术提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67034040d91dce0dc84a9c8d