使用 Parcel 构建 Web 应用

快速开始

要快速搭建一个新的 Parcel Web 应用，运行以下命令。这将创建一个新的 Git 仓库，安装依赖，并设置一些可以修改的源文件。

npm create parcel vanilla my-parcel-app
cd my-parcel-app
npm start

将 npm 替换为 yarn 或 pnpm 以使用您喜欢的包管理器。支持以下模板：

vanilla – 一个 Vanilla JS + HTML 应用（如上所示）
react-client – 一个 TypeScript + React 客户端应用。请参见 Parcel 的 React 文档。
react-server – 一个 TypeScript + React 服务器组件应用。请参见 Parcel 的 React 服务器组件文档。
react-static – 一个 TypeScript + React 静态站点生成器。请参见 Parcel 的 React 服务器组件文档。

请看下面的深入介绍。

安装

在开始之前，您需要安装 Node 和 Yarn 或 npm，并为您的项目创建一个目录。然后，使用 Yarn 将 Parcel 安装到您的应用中：

yarn add --dev parcel

或者使用 npm 运行：

npm install --save-dev parcel

项目设置

现在 Parcel 已安装，让我们为我们的应用创建一些源文件。Parcel 接受任何类型的文件作为入口点，但 HTML 文件是一个很好的起点。Parcel 将从那里跟踪所有依赖以构建您的应用。

src/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>我的第一个 Parcel 应用</title>
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
</html>

Parcel 内置了一个开发服务器，它将在您进行更改时自动重新构建您的应用。要启动它，运行指向您入口文件的 parcel CLI：

yarn parcel src/index.html

或者使用 npm 运行：

npx parcel src/index.html

现在在浏览器中打开 http://localhost:1234/ 查看您上面创建的 HTML 文件。

接下来，您可以开始向 HTML 文件添加依赖，如 JavaScript 或 CSS 文件。例如，您可以创建一个 styles.css 文件，并在 index.html 文件中使用 <link> 标签引用它，以及使用 <script> 标签引用的 app.js 文件。

src/styles.css:

h1 {
  color: hotpink;
  font-family: cursive;
}

src/app.js:

console.log("你好世界！");

src/index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>我的第一个 Parcel 应用</title>
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="app.js"></script>
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
</html>

随着您的更改，您应该看到您的应用在浏览器中自动更新，甚至不需要刷新页面！

在这个示例中，我们展示了如何使用原生 HTML、CSS 和 JavaScript，但 Parcel 还可以开箱即用地处理许多常见的 Web 框架和语言，如 React 和 TypeScript。查看文档的"配方"和"语言"部分以了解更多。

包脚本

到目前为止，我们一直直接运行 parcel CLI，但在 package.json 文件中创建一些脚本可以使这个过程更加方便。我们还将设置一个脚本，使用 parcel build 命令为生产环境构建您的应用。最后，您还可以使用 source 字段在一个地方声明您的入口，这样就不需要在每个 parcel 命令中重复它们。

package.json:

{
  "name": "my-project",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

现在您可以运行 yarn build 为生产环境构建项目，并运行 yarn start 启动开发服务器。

声明浏览器目标

默认情况下，Parcel 不执行任何代码转换。这意味着如果您使用现代语言特性编写代码，Parcel 将输出这些特性。您可以使用 browserslist 字段声明应用支持的浏览器。当声明了这个字段时，Parcel 将相应地转换您的代码，以确保与您支持的浏览器兼容。

package.json:

{
  "name": "my-project",
  "source": "src/index.html",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

您可以在目标页面了解更多关于目标的信息，以及 Parcel 对差异化打包的自动支持。

下一步

现在您已经设置了项目，可以学习 Parcel 的一些更高级功能了。查看关于开发和生产的文档，并查看"配方"和"语言"部分，了解使用流行的 Web 框架和工具的更深入指南。