为什么 Parcel 成为我的首选开发打包工具

今天我们要谈论应用程序打包器 - 这些工具简化了我们作为开发人员的生活。它们的核心是将来自多个文件的代码提取并整合到一个或多个文件中，按照逻辑顺序进行编译，以便在浏览器中使用。此外，通过不同的插件和加载器，您可以压缩代码、打包其他类型的资产（如 CSS 和图像）、使用预处理器、代码分割等。它们管理开发工作流程。

市面上有很多打包器，例如 Browserify 和 webpack。虽然这些都是很好的选择，但我个人发现它们很难设置。您从哪里开始？这对于初学者来说尤其如此，因为“配置文件”可能有点吓人。

这就是我倾向于使用 Parcel 的原因。我是在 YouTube 上观看教程时偶然发现它的。演讲者谈论了加速开发的技巧，他强烈依赖 Parcel 作为其工作流程的一部分。我决定自己尝试一下。

Parcel 的独特之处

我最喜欢这个打包器的地方：**它不需要任何配置。** 从字面上看，一点也不！将其与 webpack 相比较，webpack 的配置可能散布在多个文件中，所有文件都包含大量代码……这些代码可能来自其他人的配置或从其他项目继承而来。当然，配置的复杂程度取决于您的设置，但即使是最简单的工作流程也需要一组插件和选项。

我们都使用不同的工具来简化工作。有些工具例如预处理器、后处理器、编译器、转译器等。设置这些工具需要时间，而且通常需要相当长的时间。您是否宁愿将这些时间用于开发？

这就是 Parcel 似乎是一个良好解决方案的原因。您想用 SCSS 或 LESS 编写样式吗？做吧！您想使用最新的 JavaScript 语法吗？包含在内。需要开发服务器吗？搞定。这仅仅触及了它支持的大量其他功能列表的表面。

Parcel 允许您简单地开始开发。这是使用它作为打包器的最大优势 - 以及它闪电般的快速编译速度，该速度利用多核处理，而其他打包器（包括 webpack）则依赖于复杂而繁重的转换。

使用 Parcel 合适的场景

Parcel 与任何工具一样，并非万能药，不能作为所有事物的通用解决方案。它有一些最适合使用的场景。

我已经提到过它启动项目的快速速度。这使得它非常适合处理时间宝贵且目标是尽快在浏览器中显示结果的紧迫截止日期和原型。

这并不意味着它无法胜任处理复杂的应用程序或许多开发人员可能触及代码的项目。它非常有能力做到这一点。但是，我意识到这些项目可能非常受益于手工定制的工作流程。

这有点像自动变速箱和手动变速箱汽车之间的区别。有时您需要额外的控制，有时您不需要。

我一直致力于开发一个包含大量 JavaScript 代码的商业多页面网站，Parcel 对我来说非常有效。它提供了我的服务器，它将我的 Sass 编译为 CSS，它在需要时添加供应商前缀，它允许我在 JavaScript 文件中开箱即用地使用导入和导出，无需任何配置。所有这一切使我可以轻松地启动并运行我的项目。

让我们一起使用 Parcel 创建一个简单的网站

让我们试用 Parcel，看看用它创建东西有多简单。

我们将构建一个简单的页面，使用 Sass 和少量 JavaScript。我们将获取当前一周的日期和来自 Unsplash Source 的随机图像。

基本结构

我们不需要使用任何脚手架或框架来初始化项目。相反，我们将创建三个文件，这些文件应该看起来非常熟悉：index.html、style.scss 和 index.js。您可以在终端中手动设置它们

mkdir simple-site
cd simple-site
touch index.html && touch style.scss && touch index.js

让我们将一些样板标记和基本轮廓添加到 HTML 文件中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.scss">
  <title>Parcel Tutorial</title>
</head>
<body>
  <div class="container">
    <h1>Today is:</h1>
    <span class="today"></span>
    <h2>and the image of the day:</h2>
    <img src="https://source.unsplash.com/random/600x400" alt="unsplash random image">
</div>
<script src="index.js"></script>
</body>
</html>

您可能已经注意到，我从 Google 中引入了一个网络字体（Lato），这是完全可选的。否则，我们所做的就是链接 CSS 和 JavaScript 文件，并添加基本的 HTML，它将显示一周的日期和来自 Unsplash 的链接，该链接将提供随机图像。这是我们基线真正需要的全部。

感受 Parcel 的快速设置！

在我们深入研究样式和脚本之前，让我们使用 Parcel 作为打包器运行应用程序。安装 Parcel 与任何东西一样

npm install -g parcel-bundler
# or
yarn global add parcel-bundler

我们也创建一个 package.json 文件，以防我们需要任何开发依赖项。这里也是 Parcel 将包含开箱即用工作所需的一切。

npm init -y
# or
yarn init -y

就这样！不再需要配置！我们只需要告诉 Parcel 项目的入口文件是哪个，这样它就知道将服务器指向哪里。我们的 HTML 文件将是入口文件

parcel index.html

如果我们打开控制台，我们将看到类似这样的内容，表明服务器已在运行

Server running at https://127.0.0.1:1234

Parcel 的服务器支持热重载，并在保存更改时重建应用程序。

现在，回到我们的项目文件夹，我们将看到 Parcel 为我们创建的额外内容

对我们来说，重要的是 dist 文件夹，它包含我们所有编译后的代码，包括 CSS 和 JavaScript 的源代码映射。

现在我们只需构建！

让我们进入 style.scss，看看 Parcel 如何处理 Sass。我创建了变量来存储一些颜色和包含我们内容的容器的宽度

$container-size: 768px;
$bg: #000;
$text: #fff;
$primary-yellow: #f9f929;

现在进行一些样式设置，包括一些嵌套的规则集。您当然可以做自己的事情，但为了演示目的，我制作了以下内容

*, *::after, *::before {
  box-sizing: border-box;
}

body {
  background: $bg;
  color: $text;
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 auto;
  max-width: $container-size;
  text-align: center;

  h1 {
    display: inline-block;
    font-size: 36px;
  }

  span {
    color: $primary-yellow;
    font-size: 36px;
    margin-left: 10px;
  }
}

保存后，Parcel 的魔法就会触发，所有内容都会编译并在浏览器中重新加载。不需要任何命令，因为它已经在监视文件以进行更改。

到目前为止，我们已经有了这些

Webpage with black background, a heading and an image

唯一剩下的就是显示一周的当前日期。我们将使用导入和导出，这样我们就可以看到 Parcel 如何让我们使用现代 JavaScript。

让我们创建一个名为 today.js 的文件，并包含一个函数，该函数从日期数组中报告当前一周的日期

export function getDay() {
  const today = new Date();
  const daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  return daysArr[today.getDay()];
}

💡 值得注意的是，getDay 函数将星期日作为一周的第一天。

请注意，我们正在导出 getDay 函数。让我们进入 index.js 文件并将其导入到那里，以便在编译发生时将其包含在内

import { getDay } from './today';

我们可以导入/导出文件，因为 Parcel 开箱即用地支持 ES6 模块语法 - 重申一遍，不需要任何配置！

唯一剩下的就是选择 <span> 元素并将 getDay 函数的值传递给它

const day = document.querySelector('.today');
day.innerHTML = getDay();

让我们看看最终结果

Webpage with black background, heading that includes the day of the week, and an image below.

最后一步是构建生产环境

我们已经创建了应用程序，但我们希望将其部署到某个地方——无论是你的个人服务器，还是一些零配置部署工具，例如 Surge 或 Now——而且我们希望部署编译和压缩后的代码。

下面是唯一需要执行的命令

parcel build index.js

Terminal output after a successful build.

这将为我们提供应用程序的所有生产就绪的资产。你可以阅读更多关于 Parcel 的生产模式，以获得一些提示和技巧，以充分利用你的环境。

我已经说过很多次了，并且再次重申：Parcel 是一个很棒的工具。它可以捆绑、编译、部署、预处理和后处理、压缩和混淆等等。我们可能只看了一个非常简单的例子，但希望你现在对 Parcel 提供的功能以及如何在自己的项目中开始使用它有了很好的了解。

我很想知道你是否已经在使用 Parcel，如果是，你如何使用它。你是否发现它在某些方面比其他方面更有效？你是否发现了一些使它更强大的巧妙技巧？请在评论区告诉我！

Evan

# 2019 年 10 月 21 日

在开始时，你可以直接执行 touch index.html style.scss index.js 命令，而不是链式执行多个 touch 命令。

Exifers

酷文章

Andreas

有人知道 Parcel 对异步代码块的支持情况吗？它是否会保留构建之间未更改的文件的哈希值？

Chris Panayotoff

# 2019 年 10 月 22 日

parcel build 命令不会删除源映射，所以这里有一些简单的 npm 脚本可以帮助你入门

"scripts": {
    "prebuild": "rm -rf dist",
    "build": "parcel build index.html --no-source-maps",
    "serve": "parcel index.html --open"
  }

我使用 Parcel 进行快速原型设计，它非常适合这个目的，但缺少一些关键功能，例如复制资产、代理（例如，热重载 WordPress 网站等）。尽管如此，对于小型项目来说，它仍然是一个很棒的捆绑器。

Elio

我在 CodePen 上尝试过它，但得到了错误 Uncaught ReferenceError: ReactDOM is not defined，我想这与添加的 react.production.min.js 有关。如果添加 react.development.js，Pen 就可以正常工作。有什么帮助吗？

重点在于它不需要任何配置，Webpack 4(+) 包含 Parcel 提供的所有功能，只是略有不同。与此同时，Parcel 没有提供高级功能。

Youcef

评论永久链接# 2019 年 10 月 23 日

你想到哪些缺少的高级功能？
Joel

评论永久链接# 2020 年 1 月 11 日

如果 webpack 文档能针对某些问题提供通用的解决方案就好了。我不得不在一个项目中切换到 Parcel，因为我无法在 webpack 中引用我的图像（js 中的动态图像，但在 css 和 html 中可以正常工作）。我调试并搜索了 SO 好几个小时，而且截止日期临近。

出于这样的原因，我希望 Parcel 能变得更好。我并不是在贬低 webpack，即使从初学者的角度来看，它也很棒。但这些细微的问题可能会吓跑任何人。

Daniel Van Cuylenburg

我喜欢 Parcel 的一个特点是，如果你需要包含一个你尚未安装的 npm/yarn 模块，当你添加 import ‘module’ 并保存时，Parcel 会自动为你安装该包。

太棒了

Andy F

我觉得这正是构建工具应该的样子——非常容易上手，但功能强大到足以用于大型项目。我可以想象，一个刚接触 web 开发的人会立即被像 Vue 或 React 这样东西的复杂程度所吓倒，他们需要在建立第一个应用程序之前安装和配置一堆工具（或者依赖于一些“魔法”来完成这些工作）。

John Gouigouix

你好,
我个人使用 Fuse Box，用于所有类型的项目，无论大小。它简单而快速…

好文章,
谢谢

Youcef

# 2019 年 10 月 23 日

它非常有能力做到这一点。但是，我意识到这些项目很可能受益于手工定制的工作流程。

你是否遇到过 Parcel 似乎存在局限性的例子？

srcspider

评论永久链接# 2019 年 10 月 31 日

#1. 多个动态入口点。

#2. 我没有也不想使用 index.html，因为对于一个 index.html 来说，动态部分太多了。

#3. 对配置进行精细控制。用于生成要在其他网站上包含的脚本的 webpack 配置与用于构建前端的 webpack 配置完全不同。有时，你需要在同一个项目中拥有多个这样的配置。

#4. 对它到底在做什么的可见性和清晰度（它生成的代码块是什么，它们有多大，它使用什么来生成源映射等等）。

#5. 它是否具有所有花哨的标志来支持 safari10（因为它没有，而且你无法在 uglifyjs 或 terser（无论它使用哪个）中设置它，所以你注定要失败。例如，在某些全局文件中设置它来告诉它你的浏览器支持是毫无用处的！没错，毫无用处，你只能通过将大多数压缩工具发送到专门用于这些浏览器的模式来支持这些该死的浏览器（而且该模式除非明确启用，否则不会激活）。这在一定程度上是由于 safari10 中的范围模型有多么糟糕。

等等等等

基本上，当你需要做一些“大”的事情时，这种“无配置”就成了一个巨大的痛苦。

最后，对于你的单个 css、10 个 js 文件项目来说，“易于配置”很好。现实世界中的 js、css 和其他文件比我能数的还多。光入口点就有很多。它处理这些问题的效果如何？当你无法动态调整这些东西时，开发体验就会变成地狱般的存在；无论它有多“快”，它都不会快到足以应付。

Martin Dimmock

# 2019 年 10 月 25 日

哇，太简单了！非常感谢。

# 2019 年 10 月 27 日

你考虑过 FuseBox 吗？

Emmanuel DEMEY

# 2019 年 11 月 5 日

一方面称 parcel index.html，另一方面称 parcel build index.js 很奇怪。

Phil

# 2020 年 1 月 30 日

如何将它与 wordpress 集成

Chris Coyier

# 2020 年 9 月 25 日

来自读者 Patrik Pindeš 的评论，在比赛结束之后

Parcel 不需要任何配置

… 不正确。我说的不是任何高级的东西，而是 90% 的开发者都会遇到的东西。

原因如下

想要复制静态资产（例如 robots.txt、favicon.ico）？

你必须安装一个插件“parcel-plugin-static-files-copy”并对其进行配置。

想要在内联 svg 中保留 id？

你必须创建一个“.htmlnanorc”文件并对其进行配置

想要在多个页面之间共享你的 style.css 文件？

你必须创建链接器 js 文件，否则它将无法工作，https://github.com/parcel-bundler/parcel/issues/2340

想要出于某种原因使用内联样式？

你不能，捆绑器将无法正常工作。

一些错误报告已经提交很久了，但还没有得到修复。因此，在生产环境中使用此捆绑器时，我建议你谨慎行事。