Parcel.js实战：快速构建和打包Web应用的完整指南

2 年 ago

清, 宇

4 minutes

引言

在开发网站或Web应用程序时，将代码分割成更小、更易管理的块是一种良好的实践。在生产环境中，逐个请求所有资源可能会减慢应用程序的速度。捆绑器（Bundler）是一种工具，通过将代码合并成一个文件来解决这个延迟问题。这样可以减少向服务器发送HTTP请求的数量。使用捆绑器对于优化用户和开发人员的体验都非常有用。

Parcel.js是一个开源的打包工具。它支持许多流行的语言，如TypeScript和SASS，并且还可以处理图像和字体等文件类型。Parcel具有一些附加的内置工具：开发服务器、诊断工具、代码压缩以及图像压缩。如果您的项目需要额外的配置，您可以选择使用Parcel的许多插件。

在本教程中，您将使用Parcel来构建和打包一个包含HTML、CSS和JavaScript文件的小型Web应用程序。您将同时使用文本编辑器和终端进行工作。您还将学习如何使用自定义npm脚本配置Parcel来帮助运行和构建您的应用程序。

先决条件

要跟随本教程，您需要：

了解HTML、CSS和JavaScript。您可以从我们的《如何使用HTML构建网站》、《如何使用CSS美化HTML》和《如何使用JavaScript编程》系列教程中学习这些知识。
一个文本编辑器，如Visual Studio Code。您可以使用任何您喜欢的文本编辑器。
熟悉终端。您可以从我们的《Linux终端简介》和《爱上你的终端》指南中学习如何使用终端。
在您的本地机器上安装Node.js。请根据您的特定环境，遵循我们的《如何安装Node.js并创建本地开发环境》教程。

在您的计算机上设置了Node.js之后，您可以开始进行下一步骤了。

第一步 – 安装 Parcel 打包工具

本教程将使用your_project作为工作目录，但请随意更改名称或使用您自己的项目文件夹。打开您偏好的文本编辑器和一个终端或命令提示符，并确保您在进行下一步之前处于项目的最顶层目录中。

在your_project目录中，使用终端或命令提示符运行npm init命令来初始化您的项目。

您的项目

npm init

这个命令会触发一系列关于您项目的提示。您可以按回车键来跳过每个问题，或者根据您的喜好更改默认设置。当您完成时，如果您没有更改默认设置，您会得到一个package.json文件，其中包含以下信息，可以在文本编辑器中查看：

您的项目/package.json

{  "name": "your_project",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC"}

接下来，使用 --save-dev 标记在本地安装 Parcel 打包工具。

您的项目

npm install –save-dev parcel

使用--save-dev标志将安装包保存为开发依赖项。这意味着在开发过程中，您的项目将依赖Parcel来管理和创建应用程序。

一旦安装完成，您的项目中将包括一个额外的package-lock.json文件和一个node_modules目录。package-lock.json文件是在npm安装过程中自动生成的，它描述了项目所依赖的所有依赖项，以确保项目正常工作。如果您对该文件存储的信息感兴趣，可以查阅npm文档进行详细了解。与package-lock.json文件类似，node_modules文件夹中保存了项目所依赖的各个不同的包。但需要注意的是，自动生成的文件不建议直接进行编辑。

在您的package.json文件中，注意到它现在将parcel作为开发依赖项包含进来了。

您的项目/package.json

..."devDependencies": {    "parcel": "^2.7.0"  }...

现在，您已经安装了 Parcel 打包工具作为本地依赖项，您可以开始在您的应用程序上进行开发了。

第二步 – 创建应用程序文件

在接下来的示例中，您将创建一个小应用程序，当您点击按钮时可以更改背景颜色。在创建这些应用程序文件之后，将实现Parcel到项目中。

Parcel可以接受任何文件作为应用程序的入口点。入口点文件是应用程序执行的起点。从这个入口点开始，Parcel会根据您指定的所有依赖来构建您的应用程序，包括CSS和JavaScript文件的链接。您将使用一个HTML文件，index.html，作为应用程序的入口点。

使用文本编辑器，在your_project目录中创建一个src文件夹来存放和组织代码。如果您正在使用Visual Studio Code，可以在your_project目录内右键单击，选择新建文件夹并将其命名为src。

在src文件夹中创建一个index.html文件。在Visual Studio Code中，右键点击src文件夹并选择新建文件。将该文件命名为index.html。

在您的index.html文件中包含以下行：

您的项目主页的文件路径是：your_project/src/index.html。

这是文章《如何使用Parcel.js绑定一个Web应用程序》的第2部分（共8部分）。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>您的Parcel项目</title>
  </head>
  <body>
    <h1>欢迎使用Parcel！</h1>

    <div class="sammy-wrapper">
      <div class="img-wrapper sammy-1">
        <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="鲨鱼萨米">
      </div>
    </div>
    
    <button>改变背景颜色</button>

    <script type="module" src="js/app.js"></script>
  </body>
</html>

这个HTML文件是您应用程序的主页。它包含了样式表和脚本的链接。为了保持代码分离和组织性，这些文件将被存放在各自的文件夹中。更新后请务必保存您的文件。在VS Code中，您可以按下CTRL+S或CMD+S来保存文件。

在您的src目录中，创建一个名为css的新文件夹。然后，在您的css文件夹内，创建一个名为style.css的CSS样式表。

这是文章《如何使用Parcel.js绑定一个Web应用程序》的第3部分（共8部分）。

将以下CSS代码添加到您的`style.css`文件中：
您的项目CSS文件路径位于`your_project/src/css/style.css`。

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
  color: white;
  background: var(--bg, rgb(26, 80, 190));
  font-size: 16px;
}
h1 {
  font-size: 3rem;
  padding: 2rem;
}
.img-wrapper {
  max-width: 600px;
  padding: 0 1rem;
  margin: 2rem;
  cursor: pointer;
}
.img-wrapper img {
  width: 100%;
}
button {
  font-size: inherit;
  font-size: 1rem;
  padding: .5rem;
  margin: 8rem 0;
}

记得保存此文件。

接下来，在您的`src`目录下创建一个名为`js`的文件夹，用于存放您的JavaScript代码。

这是文章《如何使用Parcel.js绑定一个Web应用程序》的第4部分（共8部分）。

内容片段：在你的js文件夹里创建一个名为app.js的文件，并加入以下代码。

你的项目的源代码文件夹是：your_project/src/js/app.js。

const btn = document.querySelector('button');
const body = document.querySelector('body');

let availableColors = ['darkslateblue', 'midnightblue', 'teal', 'tomato', 'seagreen', 'royalblue', 'saddlebrown', 'indigo', 'olivedrab', 'rosybrown'];

btn.addEventListener('click', function() {
  const randomizeColor = Math.floor(Math.random() * availableColors.length);
  body.style.setProperty('--bg', availableColors[randomizeColor]);
});

这段JavaScript代码在点击时会从availableColors数组中随机选择一种颜色，并将背景更改为所选颜色。

编辑完成后，请保存此文件。

总体而言，您当前的网站架构将如下所示：

your_project/
|── node_modules
|── src/
|   |── css/
|   |   |── style.css
|   |── js/
|   |   |── app.js
|   |── index.html
|── package.json
|── package-lock.json

现在您已经创建了应用程序的基本元素，可以使用Parcel来查看和配置您的应用程序。

第三步 — 在开发服务器上运行应用程序

查看您的应用程序的一种方法是在浏览器中打开您的HTML文件。然而，如果您对任何文件进行了更改，每次更改时都必须手动刷新浏览器。Parcel自带一个在您的计算机上运行的开发服务器。当您的开发服务器运行时，如果您对代码进行了更改，Parcel会自动更新您在浏览器中的应用程序，无需刷新。这通常被称为热重载。这样，您就不必停止服务器，应用更改，然后再次启动服务器来查看更改。

例如，当Parcel开发服务器正在运行时，您可以在your_project/src/css/style.css样式表中将背景属性更改为红色，并保存更改。保存后，您会立即在浏览器中注意到更改，而无需停止开发服务器或刷新页面。

在您的终端中，请确保您位于您的项目目录内。一旦您进入了您的项目目录，则运行以下代码以启动您的开发服务器。

你的项目

npx parcel src/index.html

输出

❯ npx parcel src/index.html
✨ Built in 5ms
Server running at http://localhost:1234

Parcel的内置开发服务器正在运行。npx parcel命令将您的入口点src/index.html与所需资源一起构建您的应用程序。输出还指示应用程序正在http://localhost:1234上运行。

要查看您正在运行的应用程序，请打开您的网络浏览器，然后导航到http://localhost:1234。

您的Parcel应用程序正在http://localhost:1234的着陆页上运行。

Parcel.js Web应用绑定教程：文件结构与NPM脚本优化（五）

在您的 your_project 目录中，当您运行 npx parcel 命令后，Parcel.js 会自动生成两个新文件夹：.parcel-cache 和 dist。

.parcel-cache 文件夹：此文件夹用于存储项目信息，Parcel 利用它来加速应用的重新构建。当您修改文件时，Parcel 会检测到这些更改，并基于缓存快速重新构建应用，而无需从头开始。
dist 文件夹：此文件夹包含 Parcel 动态生成的文件，这些文件是您应用的构建产物。请注意，其中包含了您的 HTML、CSS 和 JavaScript 文件，它们通常会被 Parcel 赋予随机字符作为文件名（例如 index.html、index.css、index.js）。此外，dist 文件夹还会包含 .map 文件（源映射）。当您使用 npx parcel 命令时，Parcel 会自动生成源映射。源映射的作用是帮助浏览器将捆绑后的代码映射回原始源代码，这对于在开发和生产环境中调试代码至关重要。

在VS Code中，运行'npx parcel'命令后会自动生成'.parcel-cache'和'dist'文件夹。

值得注意的是，您无需手动操作这些文件。实际上，即使您删除这些文件夹，当您再次运行 npx parcel 命令时，.parcel-cache 和 dist 文件夹也会被自动重新生成和更新。

注意：有时，当您对代码进行重大修改后，这些更改可能无法立即在浏览器中反映出来。如果遇到这种情况，您可以尝试刷新浏览器。如果问题仍然存在，请在终端中按下 CTRL+C 停止服务器运行。然后，删除 .parcel-cache 和 dist 文件夹。.parcel-cache 文件夹有时会保留旧代码的残余，删除它可以解决一些难以发现的问题。删除这些文件夹后，再次运行 npx parcel src/index.html 命令。这将使用您更新后的代码重新生成 .parcel-cache 和 dist 文件夹及文件。检查完新的文件夹和文件后，通过在终端或命令提示符中按下 CTRL+C 停止服务器运行。

第四步：创建NPM脚本以启动和构建您的应用程序

为了避免每次检查开发服务器时都在终端中重复运行 npx parcel src/index.html 命令，您可以在 package.json 文件中创建一个 NPM 脚本来自动化此步骤。当您的应用程序准备好进行生产部署时，您还可以添加一个额外的脚本来构建您的应用程序。

首先，从文本编辑器中打开 your_project/package.json 文件。

请将此文件修改为包含以下内容：

您的项目的 package.json 文件

{
  "name": "your_project",
  "version": "1.0.0",
  "description": "",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build --dist-dir public"
  },
  "author": "",
  "license": "ISC"
  ...

在您的 package.json 文件中，您将 "main": "index.js" 替换为 "source": "src/index.html"。"source" 字段表示您应用程序的输入或源文件，并指定了文件的具体路径。您还添加了以下两个脚本：

"start": "parcel"：这里的 "start" 是命令的名称，您可以随意命名。"parcel" 是您希望脚本执行的实际命令。在这种情况下，"parcel" 的功能与之前运行的 npx parcel 命令完全相同。它会启动开发服务器，以您的入口文件为起点，并构建您包含的资源。由于您已经在 "source" 字段中指定了入口文件的路径，Parcel 知道在哪里找到这个文件。
"build": "parcel build --dist-dir public"：这里的 "build" 也是命令的名称，与上面的 "start" 类似，您可以随意命名。"parcel build" 命令用于为生产环境构建和优化您的代码。这通常在您完成应用程序开发后运行。Parcel 默认的输出目录名为 dist。--dist-dir public 标签定义了生产文件的输出文件夹，并将其命名为 public，以避免与默认的 dist 目录混淆。您将在后续步骤中执行此任务。

现在，您不再需要在终端中输入 npx parcel src/index.html 来启动开发服务器，而是可以通过输入 npm start 来实现。

您的项目

npm start

输出

❯ npm start > your_project@1.0.0 start > parcel Server running at http://localhost:1234 ✨ Built in 5ms

npm start 命令是启动开发服务器的便捷方式。

打开您的网络浏览器，并导航到 http://localhost:1234。应用程序的主页面应该和之前一样。

当配置文件完成后，您可以继续开发和测试您的应用程序。当您的应用程序准备好投入生产时，您可以开始下一步。

第五步：为生产环境构建您的应用程序

这是文章《如何使用Parcel.js绑定一个Web应用程序》的第6部分（共8部分）。

内容片段：当你运行构建命令时，打包工具的一个主要特点是合并文件类型。Parcel在你运行构建命令时会自动完成此操作。例如，假设你的src/css目录中有多个相互依赖的CSS文件，当你使用npm run build命令时，Parcel会将这些文件合并成一个文件。你的JavaScript文件也会有相同的处理方式。你可以通过深入研究Parcel的文档来了解更多关于Parcel是如何实现这一点的。

当您的应用程序准备好投入生产时，请使用您在package.json文件中包含的构建命令来创建生产文件。

首先，确保你在顶层目录下，即你的项目目录，然后在终端或命令提示符中输入以下命令：

你的项目

npm run build

输出

❯ npm run build > your_project@1.0.0 build > parcel build ✨ Built in 767ms public/index.html 781 B 239ms public/index.9daf4050.css 582 B 21ms public/index.a9c94235.js 532 B 179ms

如上所述，Parcel的默认输出文件位于dist文件夹中。由于您指定了构建脚本将文件输出到名为public的目录中，Parcel会生成此文件夹并将生产文件输出到其中。与开发时不同，此文件夹中的文件经过合并、压缩和进一步优化。您可以从Parcel的文档中了解有关生产文件以及Parcel在优化代码方面的操作的更多信息。

例如，如果你打开public/index.html文件，那么代码应该被压缩：

你的项目的公共主页是在 “your_project/public/index.html”。

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/index.9daf4050.css"><title>您的Parcel项目</title></head><body><h1>欢迎使用Parcel!</h1> <div class="sammy-wrapper"><div class="img-wrapper sammy-1"><img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark"></div></div> <button>改变背景颜色</button> <script type="module" src="/index.a9c94235.js"></script></body></html>

与dist文件夹类似，您无需在public目录中进行任何操作。如果您需要修改代码，请直接在src目录中的相应文件进行更改。

与npm start命令类似，您可以在进行更改后使用npm run build命令重新构建生产文件。准备就绪后，您应该将public文件夹及其包含的文件部署到Web服务器上。

至此，您已经成功使用Parcel创建并打包了一个应用程序。

结论

这是文章《如何使用Parcel.js绑定一个Web应用程序》的第8部分（共8部分）。

在本教程中，您创建了一个应用程序并使用Parcel对其进行了打包。您还创建了两个npm脚本，用于生成开发和生产环境所需的文件。如果您希望深入了解Parcel的更多内容，可以查阅其官方文档。

如果您想学习如何部署您的应用程序，请阅读我们的Silicon Cloud应用平台教程：《如何将静态网站部署到云端》。

#JavaScript打包 #Parcel.js #Web应用开发 #前端构建工具 #零配置构建