轻松打包应用：React + Parcel，只需不到 2 分钟
轻松打包 Web 应用程序
打包工具用于将各种源文件（JavaScript、CSS、Sass 等）打包，使其可以在浏览器中使用。本文假设您已经决定使用打包工具来管理 JavaScript 应用程序。有关打包工具及其工作原理的更多信息，请参阅 Alberto Gimeno 的这篇文章。
我们可以使用许多优秀的工具来打包应用程序，例如webpack、rollup等。不过，今天我想重点介绍 Parcel。
入门
虽然使用 Parcel 几乎没有额外开销，但我们需要采取两个步骤（如 Parcel 文档中所述）。
首先，我们必须将 parcel 安装为全局依赖项：npm install -g parcel-bundler或者yarn global add parcel-bundler
接下来，我们需要创建一个项目文件夹并初始化项目（使用 package.json 文件）：npm init -y或者（如果您更喜欢通过初始化向导，yarn init -y请删除该标志）。-y
一小段代码
现在，我们应该可以开始编写代码了。我们将从编写一个“Hello world”类型的 React 组件开始。在视频中，我将其命名为 SayHello.js，并将其创建在项目文件夹的根目录下。在一个不那么精心设计的项目中，我们可能需要更清晰地组织文件结构（例如，我们可以将 JavaScript 文件放在某个目录下/src/）。
SayHello.js
import React from "react";
export default function SayHello({ name }) {
return <h1>Hello {name}!</h1>;
}
接下来，我们将创建一个 index.js 文件。我们将把这个文件作为连接 React 组件和 DOM 元素的地方。我们还没有创建 HTML 文件，但假设最终会有一个 id 为“main”的元素，我们希望将组件渲染到这个元素中。
index.js
import React from "react";
import ReactDOM from "react-dom";
import SayHello from "./SayHello";
ReactDOM.render(
<SayHello name="everyone" />,
document.getElementById("main")
);
最后，我们将创建 HTML 文件，它将作为应用程序的入口点。请注意：本示例中我们使用了一些人为设计的标记。理想情况下，HTML 文件应该包含更多内容（例如文档类型声明、标题等），但为了清晰起见，我们将保持简洁。
index.html
<html>
<body>
<div id="main"></div>
<script src="./index.js"></script>
</body>
</html>
运行应用程序
现在我们可以回到命令行，parcel index.html从项目目录输入命令，应该会看到类似下面的提示，表明我们的项目现在正在运行。
➜ testParcel parcel index.html
Server running at http://localhost:1234
⠼ Packaging
✨ Built in 1.52s.
在浏览器中访问 localhost:1234，我们应该就能看到正在运行的应用程序了。
