使用 Babel 7 + webpack 4 构建你的 ES6 和 React 应用
随着前端技术的不断发展，越来越多的开发者开始使用 ES6 和 React 来构建高效、可重用的应用。然而，这些新技术并没有得到所有浏览器的完全支持，所以我们需要使用工具把它们转换为能被所有浏览器理解的代码。
这里推荐使用 Babel 7 + webpack 4 来构建你的 ES6 和 React 应用。 Babel 是一个 JavaScript 编译器，它可以把 ES6 和 JSX 转换为浏览器可理解的代码。而 webpack 则是一个模块打包器，它可以把所有的代码打包成一个或多个文件，以方便浏览器加载。
下面我们具体介绍一下如何使用 Babel 7 和 webpack 4 来构建你的应用。
- 安装依赖
首先，在你的项目中安装以下依赖：
npm install --save-dev babel-core babel-loader @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server
其中， babel-core 是 Babel 的核心代码，babel-loader 是与 webpack 协同工作的加载器， @babel/preset-env 用于转换 ES6 语法， @babel/preset-react 用于转换 React 的 JSX 语法，而 webpack、webpack-cli 和 webpack-dev-server 则是 webpack 的核心代码及相关工具。
- 配置 webpack
在项目根目录下创建一个 webpack.config.js 文件，用于配置 webpack。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
--
--
--
--
--
---------- -
------------ ---------
----- -----
--
--这个配置文件指定了入口文件 src/index.js，打包后的文件名为 bundle.js，输出到 dist 目录下。另外，它还使用了 babel-loader 来转换所有的 .js 文件，忽略了 node_modules 目录下的文件。最后，它使用 webpack-dev-server 来提供一个简单的开发服务器。
- 配置 Babel
在项目根目录下创建一个 .babelrc 文件，用于配置 Babel。
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}这个配置文件和 webpack.config.js 中的 babel-loader 配置是一样的，它指定了要转换的语法类型。
- 编写代码
现在，你可以开始编写你的 ES6 和 React 代码了。比如，你可以在 src/index.js 文件中写一个简单的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- --- ------- --------------- -
-------- -
------ ---------- ------------
-
-
-------------------- --- ---------------------------------这个组件会在页面上显示一个 Hello, World! 的标题。
- 运行
现在，你可以使用以下命令来运行你的应用：
npx webpack-dev-server --open
这个命令会启动开发服务器，并打开一个浏览器窗口，在浏览器中你可以看到你的应用运行了起来。
- 构建
当你准备把你的应用部署到生产环境中时，你可以使用以下命令构建你的项目：
npx webpack
这个命令会打包你的应用，并生成一个 bundle.js 文件，你可以把它发布到服务器上。
总结
通过本文的讲解，我们学会了如何使用 Babel 7 和 webpack 4 来构建我们的 ES6 和 React 应用。我们了解了如何安装相关依赖，如何配置 webpack 和 Babel，以及如何运行和构建我们的应用。希望本文对你有所帮助，祝愿你构建成功出彩的应用！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aca9d048841e98948965d2