在前端开发中，React 是一个非常流行的框架，而 babel7 则是一个非常流行的 JavaScript 编译器，它可以将 ES6+ 的代码转换成浏览器可以理解的代码。在使用 React 进行开发时，我们通常需要使用 babel7 进行编译，以便将 JSX 代码转换成浏览器可执行的 JavaScript 代码。本文将介绍如何简化对 babel7+React 环境的搭建。
安装 Node.js 和 npm
在开始之前，我们需要先安装 Node.js 和 npm。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，而 npm 则是 Node.js 的包管理器。安装 Node.js 和 npm 的方法因操作系统而异，可以在官方网站上找到相应的安装程序进行安装。
初始化项目
在安装完 Node.js 和 npm 后，我们可以使用 npm 初始化一个新的项目。在项目根目录下执行以下命令：
npm init
在执行该命令后，我们需要按照提示填写项目的基本信息，例如项目名称、版本号、作者等等。填写完毕后，会在项目根目录下生成一个 package.json 文件，该文件用来记录项目的依赖信息以及其他相关信息。
安装依赖
在初始化项目后，我们需要安装一些必要的依赖。在本文中，我们需要安装以下依赖：
- react：React 框架
- react-dom：React 的 DOM 操作库
- @babel/core：babel7 的核心库
- @babel/preset-env：babel7 的一个预设，用于将 ES6+ 代码转换成 ES5 代码
- @babel/preset-react：babel7 的一个预设，用于将 JSX 代码转换成 JavaScript 代码
在项目根目录下执行以下命令来安装这些依赖：
npm install react react-dom @babel/core @babel/preset-env @babel/preset-react --save-dev
其中，--save-dev 参数表示这些依赖是开发环境所需的，不会被打包到生产环境中。
配置 babel7
在安装依赖后，我们需要配置 babel7。在项目根目录下创建一个名为 .babelrc 的文件，并在其中添加以下内容：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}该配置文件指定了 babel7 的预设，即 @babel/preset-env 和 @babel/preset-react。
编写代码
在配置完 babel7 后，我们可以编写 React 代码了。在项目根目录下创建一个名为 index.js 的文件，并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- --- - -- -- -
------ -
-----
---------- -----------
------
--
--
-------------------- --- ---------------------------------该代码定义了一个名为 App 的组件，并将其渲染到页面上。
编译代码
在编写完代码后，我们需要使用 babel7 将其编译成浏览器可执行的 JavaScript 代码。在 package.json 文件中添加以下脚本：
{
"scripts": {
"build": "babel src -d dist"
}
}该脚本使用 babel7 将 src 目录下的所有代码编译成浏览器可执行的 JavaScript 代码，并将编译后的代码保存到 dist 目录中。
在项目根目录下执行以下命令来编译代码：
npm run build
执行该命令后，我们可以在 dist 目录下找到编译后的 JavaScript 代码。
使用 webpack 打包
在编译完代码后，我们可以使用 webpack 将其打包成一个或多个 JavaScript 文件。在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
-
-
-
--该配置文件指定了 webpack 的入口文件和输出文件，并使用 babel-loader 对所有的 .js 和 .jsx 文件进行编译。
在项目根目录下执行以下命令来打包代码：
npx webpack
执行该命令后，webpack 会将代码打包成一个名为 bundle.js 的文件，并将其保存到 dist 目录中。
结论
在本文中，我们介绍了如何简化对 babel7+React 环境的搭建。我们安装了 Node.js 和 npm，并初始化了一个新的项目。然后，我们安装了必要的依赖，并配置了 babel7。最后，我们编写了 React 代码，并使用 babel7 和 webpack 将其编译和打包成浏览器可执行的 JavaScript 代码。这些步骤可以帮助我们快速搭建一个基于 babel7+React 的开发环境，以便进行开发和调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676caae21b6ecd978c74b189