如何在不使用 create-react-app 的情况下搭建 React 项目
本分步指南解释了如何从头开始设置 React 应用程序，而无需使用任何“create-react-app”脚本。
免责声明：
首先我想强调的是，使用“create-react-app”脚本编写代码完全没有问题。过去，我发现这是一种非常高效便捷的 React 应用搭建方式，尤其是在我刚开始学习 React 的时候。这些脚本会自动配置 Webpack 和 Babel，让你能够专注于应用本身的开发。如果你想了解更多关于配置过程以及这些工具如何与你的 React 应用相关的信息，我强烈建议你按照本指南中的步骤进行操作。
入门
步骤 1：设置您的项目
首先，您需要在您的计算机上下载并安装Node.js或Yarn 。
安装完成后，您应该创建一个空目录来存放您的项目。您可以通过在终端中输入以下命令来创建并进入新目录：
> mkdir myProject
> cd myProject
步骤 2：初始化您的项目
现在您已经创建了一个目录，接下来需要初始化项目并创建一个package.json文件。
该文件将：
- 列出项目所依赖的所有软件包
- 指定项目中可以使用的软件包的哪个版本（使用语义化版本控制规则）。
- 这样可以方便地与其他开发者分享你的工作成果，因为他们可以使用此文件来重现你的构建过程。
您可以通过在终端中运行一个命令来初始化您的项目。
##for node use:
> npm init
##for yarn use:
> yarn init
这将提示您输入一系列命令，要求您输入项目信息，以便创建相关的package.json文件。您输入的信息将以 JSON 对象的形式出现在package.json文件的顶部。（您可以在项目开发过程中随时更改这些信息，因此暂时留空也没关系。）
package name: (myProject)
version: (1.0.0)
description: //enter a short description about your project
here
entry point: (index.js)
test command: //enter your test command here e.g test
git repository: //enter the link for your github repo (if
you already cloned a github repo and created your directory
inside of it, the repo link will automatically appear here)
keywords: //enter any optional keywords here
author: Rasveer Bansi
license: (ISC)
接下来，您需要在 myProject 目录下创建一个 src 文件夹，用于存储项目的所有源代码。
> mkdir src
您的项目结构现在应该类似于：
myProject
| - src
步骤 3：设置 Webpack
Webpack是一款用于处理和打包应用程序的工具，它可以让你的代码更易于浏览器使用。你的应用程序包含可重用代码模块（例如 JavaScript、Node.js、图片和 CSS 样式），这些模块共同构成了你的应用程序。Webpack 会根据代码在应用程序中的使用方式对其进行拆分，从而让浏览器更容易理解和执行。
您可以通过在终端中运行以下命令来安装 Webpack。
##for node use:
> npm install --save-dev webpack webpack-dev-server webpack-cli
##for yarn use:
> yarn add webpack webpack-dev-server webpack-cli
接下来，您需要在myProject目录下创建一个名为webpack.config.js 的文件。在该文件中，您需要保存以下代码：
const path = require('path');
module.exports = {
//define entry file and output
entry: './src/index.js',
output: {
path: path.resolve('dist'),
filename: 'main.js'
},
}
entry - 这是要包含在构建中的顶级文件集。它可以是单个文件，也可以是文件数组。
（注：在上面的示例中，我们传递了单个文件index.js）。
output - 这是一个包含输出配置的对象。在上面的示例中，我们指定了 Webpack 要构建的文件的名称（ main.js）以及该文件应存储的项目路径。
第四步：设置 Babel
Babel是一个 JavaScript 编译器，它可以将 ES6 代码转换为向后兼容的版本，这样旧版浏览器也可以运行你的应用程序。
要安装 Babel，您需要在终端中运行以下命令。
##for node use:
> npm install --save-dev babel-core babel-loader
babel-preset-es2015 babel-preset-react @babel/core
@babel/preset-env @babel/preset-react
> npm install --save-dev babel-plugin-transform-object-rest-spread
##for yarn use:
> yarn add babel-core babel-loader babel-preset-es2015
babel-preset-react @babel/core @babel/preset-env
@babel/preset-react
> yarn add babel-plugin-transform-object-rest-spread
接下来，您需要在myProject目录下创建一个名为babel.config.json 的文件。在该文件中，您需要保存以下代码：
{
"presets":[
"@babel/preset-env",
"@babel/preset-react"
],
"env": {
"test": {
"plugins": ["@babel/plugin-transform-modules-commonjs"]
}
},
"plugins": [ "transform-object-rest-spread" ]
}
预设 - 这允许您使用之前安装的 React 和 ES2015 预设，将代码编译成与旧版浏览器兼容的版本。安装“ @babel /preset-env”后，您就包含了所有JavaScript 版本。
插件 - 这些是您可以安装的独立插件，它们可以将特定的 ES6 模块编译成更兼容旧版浏览器的格式。
接下来，你需要将 Babel 加载器添加到webpack.config.js文件中。为此，你需要创建一个模块对象，并在该对象内部创建一个名为rules 的数组。该数组将每个加载器存储为单独的对象，每个对象都由键“ loader ”定义。
整个文件现在应该看起来像这样：
const path = require('path');
module.exports = {
//define entry file and output
entry: './src/index.js',
output: {
path: path.resolve('dist'),
filename: 'main.js'
},
//define babel loader
module: {
rules: [
{ test: /\.jsx?$/, loader: 'babel-loader',
exclude: /node_modules/
},
{ test: /\.css$/i,
use: ["style-loader", "css-loader"],
}
]
}
};
test - 一个正则表达式 (regex)，用于测试哪些类型的文件需要通过加载器加载。如您所见，此示例添加了正则表达式来测试所有扩展名为jsx的 ES6 文件，并且还创建了一个单独的对象来处理CSS文件。
loader - 你要使用的加载器的名称（例如babel-loader 或 style-loader / css-loader）。
排除项 - 指定加载器应排除或忽略哪些文件。本例选择排除并忽略node_modules文件夹。
步骤五：设置您的参赛文件
现在您已经设置好了项目配置（太棒了！），接下来您需要创建一些入口文件，以便开始开发您的应用程序。
您可以先创建两个条目文件：
- src文件夹内有一个index.js文件
- 在你的myProject目录中有一个index.html文件
您的文件结构应类似于这样
| - src
| | - index.js
|
| - index.html
| - webpack.config.js
| - babel.config.json
| - package.json
index.js文件与webpack.config.js文件中配置的入口点
是同一个。目前您可以将以下代码放在其中，但是一旦开始开发应用程序，就需要更新此文件，使其包含用于渲染应用程序的相关起始组件。
console.log('hello world!');
index.html
文件为您的应用程序提供结构，并被 Web 服务器用作“默认文档”。它包含一个 script 标签，该标签会将浏览器引导至专门为浏览器构建的 webpack 文件。
将以下代码添加到您的index.html文件中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React</title>
</head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>
在这段代码中，是将我们的浏览器指向 webpack 文件（ main.js ）的标签。
步骤六：设置项目脚本
现在你已经设置好了一些入口文件，接下来需要编写一些脚本来告诉你的应用程序该做什么。这些脚本也是你在终端中编写应用程序时需要使用的命令。目前，你可以先编写两个脚本来构建和启动你的应用程序。
为此，您需要在package.json文件中创建一个scripts对象。在该对象中，您可以将每个脚本编写为单独的 script 对象。对于要包含的每个 script 对象，键是运行该脚本所需的命令关键字，值是应用程序要遵循的指令。
将以下脚本对象添加到您的package.json文件中
"scripts": {
"start": "webpack serve --mode development --env
development",
"build": "webpack"
}
现在，如果您想通过终端启动应用程序，可以使用键为“start”的脚本对象。这将指示您的应用程序启动 Webpack 服务器。
##for Node use:
> npm run start
##for Yarn use:
> yarn start
步骤 7：设置 React
最后一步是配置React，这样你就可以开始开发 React 应用程序了。
为此，我们需要在myProject目录中安装 React，方法是在终端中输入以下命令。
##for Node use:
> npm install --save react react-dom
##for Yarn use:
> yarn add react react-dom
恭喜！您已完成设置，现在可以开始开发您的 React 应用了🎉
