如何使用Parcel.js绑定一个Web应用程序

2 年 ago
清, 宇
6 minutes

引言

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

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

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

先决条件

要跟随这个教程，你需要：

  • An understanding of HTML, CSS, and JavaScript. You can learn about these from our How To Build a Website with HTML, How To Style HTML with CSS, and How To Code in JavaScript tutorial series.
  • A text editor like Visual Studio Code. You may use any text editor you like.
  • Familiarity with a terminal. You can learn how to use a terminal from our An Introduction to the Linux Terminal and Learning to Love Your Terminal guides.
  • Node.js installed on your local machine. Follow our How to Install Node.js and Create a Local Development Environment tutorial for your specific environment.

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

第一步 – 安装 Parcel Bundler

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

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

你的项目 (nǐ de
  1. 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 打包工具。

你的项目
  1. 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。

Inside of Visual Studio Code, right-clicking inside of a directory to create a new folder.

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

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

你的项目主页的文件路径是：your_project/src/index.html。
<!DOCTYPE html>
<html lang="en">
  <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>Your Parcel Project</title>
  </head>
  <body>
    <h1>Welcome to 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>Change the Background Color</button>

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

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

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

Creating a new folder within the ‘src’ directory called ‘css’

将以下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代码。

Creating another folder named ‘js’ inside of your ‘src’ directory.

在你的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样式表中将背景属性更改为红色，并保存更改。保存后，您会立即在浏览器中注意到更改，而无需停止开发服务器或刷新页面。

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

你的项目 (nǐ de
  1. npx parcel src/index.html

 

Output

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

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

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

Your Parcel application running on http://localhost:1234 landing page.

在你的 your_project 目录中，当你运行 npx parcel 命令时生成了两个新文件夹。.parcel-cache 文件夹保存有关你的项目的信息，并且被 Parcel 用来重新构建你的应用。当你对文件进行更改时，Parcel 会检测到这些更改，并重新运行构建以使用这些文件，而不是从头开始。

另一个文件夹dist包含Parcel为您生成的动态生成的文件。请注意，此文件夹包括您的HTML、CSS和JavaScript文件，但它们都以随机字符命名为index。它还包括.map文件。当您使用npx parcel命令时，Parcel会为您生成源映射。源映射告诉浏览器如何从捆绑的代码中定位原始源代码。它用于帮助调试开发和生产中的代码。

Inside of VS Code, the ‘.parcel-cache’ and ‘dist’ folders are automatically generated after you run the ‘npx parcel’ command.

清楚起见，你在这些文件中并没有执行任何工作。实际上，如果你删除这些文件夹，当你再次运行npx parcel命令时，.parcel-cache和dist文件夹将会被自动重新生成和更新。

Note

注意：有时，当对代码进行重大编辑时，你可能会发现这些更改在浏览器中无法反映出来。如果出现这种情况，你可以尝试刷新浏览器。如果仍然有问题，请按下终端中的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” is the name of this command. You can name this whatever you like. “parcel” is the actual command you want your script to perform. In this instance, “parcel” does exactly what the previous npx parcel command does. It starts the development server with your entry point file and builds it with the assets you’ve included. Since you specified the source of the entry point in the “source” field, Parcel understands where to find this file.
  • “build”: “parcel build –dist-dir public”: “build” is the name of this command like ”start” above. You can name this anything you like. The ”parcel build” command builds and optimizes your code for production. This is typically run after you’ve finished developing your application. Parcel’s default directory for your output is named dist. The –dist-dir public tag defines the output folder for your production files and is named public to avoid confusion with the dist default directory. You will perform this task in a later step.

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

你的项目
  1. npm start

 

Output

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

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

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

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

第五步 – 为产品构建您的应用程序

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

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

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

你的项目
  1. npm run build

 

Output

❯ 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="en"><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>Your Parcel Project</title></head><body><h1>Welcome to 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>Change the Background Color</button> <script type="module" src="/index.a9c94235.js"></script></body></html>

与dist文件夹一样，您不在public目录中进行任何工作。如果您需要对代码进行更改，请直接在src目录中的文件中进行更改。

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

你现在已经使用Parcel创建并打包了一个应用程序。

结论

在这个教程中，你创建了一个应用并使用Parcel打包它。你还创建了两个npm脚本来生成开发和生产文件。如果你对Parcel想要了解更多的内容，你可以查看他们的官方文档。

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

发表回复 0

Your email address will not be published. Required fields are marked *

✖
广告
将在 10 秒后关闭
bannerAds