在现代 Web 开发中，React 成为了一个非常流行的前端框架，尤其在构建单页应用中更是无可替代。同时，ES2015+ 的特性也为开发人员带来了很多方便，但遗憾的是，它们并不被所有浏览器支持。为了解决这一问题，我们需要使用 @babel/preset-env 和 webpack 4，来将我们的代码编译成跨浏览器可用的版本。
前置知识
本文需要读者具备以下知识：
- 基本的 HTML、CSS 和 JavaScript
- React 的基本使用方法
- Node.js 环境的安装和使用
什么是 @babel/preset-env？
@babel/preset-env 是一个 Babel 插件，它根据你的配置智能地转换你的 JavaScript 代码，以使其在特定浏览器或运行环境中运行。它监测当前环境，并仅包括必要的转换，从而避免了像使用 es2015 这样的大而全的 preset 带来的不必要的转换。这意味着，如果你仅仅需要支持对某些新特性的编译而不是全部特性，你就可以使用 @babel/preset-env 来自动选择必要的插件。
什么是 webpack？
Webpack 是一个静态模块打包器，它可以从各种资源建立一个依赖关系图，并将它们打包成一个或多个 JavaScript 文件，这样就可以优化页面性能，同时也节省了大量的网络带宽。Webpack 4 是一个很好的选择，它比较容易设置和配置，同时还有很多重要的性能改进。
如何开始一个基于 React 的应用？
在开始此教程前，请确保你已经安装了最新版本的 Node.js 和 npm。接下来，为了开始一个基于 React 的应用，请按照以下步骤执行：
初始化一个项目
打开命令行界面，进入你想要保存项目的文件夹，并输入以下命令：
npm init
这个命令会将当前目录初始化为一个 npm 项目，在交互式控制台中请按照提示输入相关信息。
安装 React 和相关库
在项目根目录中，执行以下命令，以安装 React 和其它相关库：
npm install react react-dom npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin
创建 webpack.config.js 文件
在项目根目录中，创建一个名为 webpack.config.js 的文件。我们会在接下来的步骤中填写内容。
编写 webpack.config.js 文件
我们需要编写一个配置文件来告诉 Webpack 如何构建我们的项目。以下是一个示例的 Webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - --- -- -
----- ------------ - --- --- -------------
------ -
----- ------------ - ------------ - --------------
------ -------------------
------- -
----- -------------------- ---------
--------- ------------
----------- ---
--
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
--------------------
---------------------
-
-
-
--
-
----- ---------
---- ---------------- -------------
-
-
--
---------- -
------------ ---------
---- -----
----- ----
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- -
------------------- ------------
-
--
-
--
--简单介绍一下这个配置文件：
- mode：模式，可以是 'production' 或者 'development'。生产模式会自动压缩代码，而开发模式会开启 HMR。
- entry：应用程序入口，也就是你打算暴露给 Webpack 控制的文件。在这个例子中，我们仅仅引入了一个文件 index.js。
- output：Webpack 输出文件的设置。
- module.rules：定义如何处理各种类型的文件，包括装载机、规则、预设、插件等。
- devServer：如果你想要使用开发服务器，这里指定它的行为参数。
- plugins：一个包含所有 Webpack 插件的数组。
修改 package.json 文件
现在我们已经有了不错的配置文件和一个库存，但是我们在启动应用程序时需要一个简单的命令。为了简化操作，请在 package.json 文件中添加以下 npm 脚本：
"scripts": {
"start": "webpack-dev-server --mode development --open -p 3000",
"build": "cross-env NODE_ENV=production webpack --mode production --progress --hide-modules",
"lint": "eslint src/**/*.js"
}创建一个基本的应用程序
我们需要创建一个基本的应用程序，以确保所有的东西都在正确的位置，并且一切准备就绪。为了达到这个目的，我们可以创建以下示例文件：
- src/index.html
- src/index.js
- src/App.js
- src/App.css
其中，index.html 文件如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------ --------------- ------- ------ ---- --------------- ------- -------
index.js 文件和 App.js 文件分别如下：
import React from 'react';
import { render } from 'react-dom';
import App from './App';
render(<App />, document.getElementById('app'));-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------
----- --- ------- --------- -
-------- -
------ -
---- ----------------
---------- -----------
------
--
-
-
------ ------- ----注意，这里我们引入了 App.css 文件。
启动应用程序
现在，启动应用程序并验证一切是否正常。执行以下命令：
npm start
这个命令将使用 webpack-dev-server，它将自动打开默认浏览器，并在页面上显示 Hello，world！这个文本。
构建你的应用程序
当你准备好生产环境时，你需要构建你的应用程序。执行以下命令：
npm run build
这个命令将生成一个 dist 目录，里面包含了所有的 JavaScript 和样式文件。
总结
现在您已经知道如何使用 @babel/preset-env 和 Webpack 4 来创建一个基于 React 的应用程序。在本文中，我们讨论了 @babel/preset-env 和 Webpack 4 的基础知识，并演示了如何使用它们来开始你的 React 应用程序的开发。
在你继续探索 React 和 Webpack 相关技术时，请始终考虑可维护性、可扩展性和性能的问题，以确保你拥有一个具有高质量的代码库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64620642968c7c53b035b4b2