Parcel 2 alpha 1 发布!
Parcel 2.0.0-alpha.1 发布!
今天我非常兴奋地发布 Parcel 2 的第一个 alpha 版本!请尝试并帮助我们将 Parcel 2 推向终点。在 GitHub 上查看!
Parcel 2 是我们已经开发了一年多的从头重写的版本,在此之前还设计了将近一年。它融合了我们从一开始构建 Parcel 以来学到的一切,结果是比 Parcel 1 更加可扩展、可伸缩和可靠,同时保留了你习惯的 Parcel 的易用性和开发者体验。
-
🎛 可扩展性 — Parcel 2 从头到尾都是完全可扩展的。插件类型已经扩展,允许通过易于配置的管道来扩展和覆盖几乎所有核心行为。虽然默认设置包括 Parcel 1 的所有内容(甚至更多),但现在如果需要,你几乎可以自定义和扩展所有内容。
-
⚖️ 可伸缩性 — 尽管 Parcel 一直利用并行性和缓存来扩展到大型应用程序,但在 Parcel 2 中这一点被进一步推进。我们现在缓存和并行化更多 Parcel 的工作,所以你可以期待更快的构建,尤其是缓存构建。我们还保留更少的内存,因此 Parcel 2 可以扩展到更大的应用程序。
-
💪 可靠性 — Parcel 2 在提高缓存可靠性的同时,还将性能发挥到了极致。我们利用全新的跨平台文件系统监视器,即使 Parcel 未运行也能检测细粒度的文件更改。同时,我们的资源图可以非常精细地失效,这意味着缓存构建的性能几乎与监视模式完全相同!
配置
#Parcel 以零配置而闻名。这并不意味着不可配置,而是 Parcel 尝试尽可能从代码本身推断,并使用其他工具的现有配置文件(例如 .babelrc)。用户喜欢这提供的易用性和开发者体验,但总有一些边缘情况和实际用例需要更多的可自定义性。
Parcel 2 是可选配置的。内置在 Parcel 2 CLI 中的默认配置将适用于大多数应用程序,并包括 Parcel 1 支持的所有内容(甚至更多),但 Parcel 2 支持通过专门为 Parcel 的核心阶段设计的一整套插件类型来扩展核心功能。
-
🔎 解析器 — 解析器将诸如
import './foo'
或import 'react'
这样的导入转换为完整的文件路径,如/my/project/foo.js
。Parcel 2 中的默认解析器包括对节点解析算法的支持,以及别名等额外功能。但是,如果你想为你的项目扩展或覆盖解析算法,现在可以通过解析器插件来实现。 -
🦋 转换器 — 转换器将代码和其他资源从一种语言编译到另一种,或以某种方式转换文件。例如,TypeScript 转换器将 TypeScript 编译为 JavaScript,Babel 转换器将 JavaScript 转译为不同的 JavaScript。转换器还负责从代码中提取依赖,如导入语句和 require 调用,这些依赖会传递回解析器,然后传递给另一个转换器,如此往复,直到构建应用程序的完整资源图。
-
🗃 打包器 — 打包器插件以资源图作为输入,输出捆绑图,类似于资源图,但资源被分组到捆绑包中。默认打包器将具有相似文件类型的资源(如 JavaScript 和 CSS)分组在一起,并执行代码分割和一些额外的优化。我很期待看到社区将如何尝试使用自定义打包器插件进一步推进高级代码分割!
-
🏷 命名器 — 命名器插件负责确定每个捆绑包的输出文件名。默认命名器插件包括内容哈希,用于资源的长期缓存,以及与 Parcel 1 相同的命名规则。如果你需要出于任何目的自定义捆绑包的文件名,命名器插件就是实现这一点的方法!
-
👟 运行时 — 运行时插件允许在构建时将代码插入捆绑包。默认情况下,我们使用它来添加异步加载捆绑包所需的运行时代码,并为开发插入热模块替换运行时,但你可以使用它在构建时有条件地插入任何你需要的代码。
-
📦 打包器 — 打包器将公共类型的资源组合成可在浏览器中加载的输出捆绑包。例如,JS 打包器将 JavaScript 文件组合在一起,以便它们在正确的时间、正确的顺序执行。
-
🗜 优化器 — 优化器插件以某种方式优化捆绑包,例如最小化或压缩文件。例如,terser 优化器最小化 JavaScript 捆绑包。
-
✅ 验证器 — 验证器插件在后台运行以执行代码验证,如代码检查(例如 eslint)或类型检查(例如 TypeScript)。它们不会阻塞开发构建,但启用后将阻止生产构建成功。由于它们在低优先级队列的后台运行,因此在你只想快速进行更改时不会造成任何性能下降。
-
🗞 报告器 — 报告器插件在整个打包过程中接收带有状态信息和日志事件的事件。例如,Parcel 2 CLI 是用报告器实现的,开发服务器也是。你还可以使用报告器实现其他类型的 UI 或仪表板、捆绑包可视化工具等。
所有这些都在一个名为 .parcelrc 的非常简单的 JSON 文件中配置。如果你真的需要配置,则不需要 JavaScript 或复杂的逻辑。你还可以扩展其他配置,并将它们作为 npm 包共享。我们预计大多数配置将扩展 @parcel/config-default 包,以根据需要添加或覆盖一些内置默认值。
例如,以下是在发布 parcel-transform-dart 包后如何为你的应用添加 Dart 转换器。
{
"extends": ["[@parcel/config-default](http://twitter.com/parcel/config-default)"],
"transforms": {
"*.dart": ["parcel-transform-dart"],
}
}
小型核心
#现在 Parcel 中的所有内容都拆分为插件,Parcel 核心变得非常小。它现在本质上只是根据应用程序文件图以非常有意和优化的方式运行其他工具。一切都设计为可并行和可缓存,无论是本地还是最终跨机器。
Parcel 维护你整个应用程序的高度优化图,可以非常精细地失效以仅在发生变化时重建确切需要的内容。这包括你的代码,以及影响代码构建方式的所有内容,如配置文件(例如 .babelrc)、插件版本等。当 Parcel 停止时,整个图被缓存到磁盘,可以在启动时恢复并精细地失效,以便仅重建已更改的文件。这就像监视模式,即使 Parcel 重新启动!
Parcel 资源图,显示带有多个目标的构建(见下文)。
工作进程农场已更新,以在可用时利用内置于 Node 12 的新 worker_threads 模块,其开销低于之前版本使用的多进程后端。此外,我们已抽象出 Parcel 中的所有文件系统访问,使其可插拔,可以使用不同的文件系统实现。例如,你可能想使用内存文件系统在浏览器中运行 Parcel。
多目标和捆绑包拆分
#除了全新的核心和插件系统,Parcel 2 还有许多新特性,包括对多目标和捆绑包拆分的支持。
Parcel 2 允许你为多个目标配置构建,这些构建将并行进行。例如,你可能希望为现代浏览器构建使用现代语法的应用程序版本,为旧版浏览器构建需要更多转译的版本。或者你可能想为 Node 和浏览器构建一个库。现在你可以通过在 package.json 中配置目标来实现这一点。
以下示例将生成两个完整的构建,分别针对最近的 Chrome 版本和更传统的浏览器。然后可以使用差异化加载技术加载这些构建,以减小现代浏览器的捆绑包大小。
{
"browser": "dist/legacy/index.js",
"browserModern": "dist/modern/index.js",
"targets": {
"browserModern": {
"engines": {
"browsers": [
"last 1 Chrome version"
]
}
},
"browser": {
"engines": {
"browsers": [
"> 0.25%"
]
}
}
}
}
在本地开发中,为了性能,我们避免这额外的工作,而是为默认的现代浏览器目标编译。这意味着 Babel 和其他工具在你仅在 Chrome 中测试时需要做更少的工作。如果你需要测试特定目标(例如旧浏览器如 IE 11),可以使用 CLI 的 --target 选项为该目标构建。
Parcel 2 还支持高级捆绑包优化,可以自动将 react 和其他库等公共依赖拆分到可以并行加载并与代码其他部分分开缓存的自己的捆绑包中。这应该会导致比 Parcel 1 更小的初始捆绑包大小,因为它不再在入口捆绑包不需要时将公共依赖提升到树的顶部。
整个应用程序打包
#从一开始,Parcel 就比许多其他工具更进一步,打包整个应用程序,包括 JavaScript、CSS、HTML 和静态资源。大多数其他打包器仍然非常专注于 JavaScript,并将所有资源类型转换为 JS,可能需要额外的插件稍后再次提取它们。Parcel 对文件类型不可知,Parcel 2 通过允许你覆盖和组合处理代码的每个方面进一步推进了这一点。
Parcel 2 插件被组织成管道,可以非常轻松地组合以指定高级转换和构建步骤。资源通过 glob 匹配初始管道,并运行该管道中的所有插件,直到文件类型更改(例如 .ts → .js)。然后,它们继续通过下一个管道,直到到达管道末尾。这允许单个插件专注于单个任务,并让用户将多个插件组合在一起做更复杂的事情。
转换还可以输出多个资源,以防有不同类型的内联资源,如 HTML 文件中的内联 <script>
或 <style>
标签,多部分 Vue SFC,或其他尚未发明的多部分文件类型。这些内联资源将以与单独文件相同的方式处理,并可以在通过各自的管道处理后重新插入到它们来源的文件中。
这种灵活性和可组合性在 JavaScript 打包器中以前是不可能的,我非常期待看到这能够支持哪些类型的新工具!
团队
#没有一直辛勤工作以构建它的出色核心团队,Parcel 2 就不会存在!
感谢 Atlassian 投入如此多的资源到 Parcel 中,并全职赞助上面列出的两位开发者(Maia 和 Will)。非常感谢所有向我们的 Open Collective 捐款的人 — 这确实帮助了 Parcel 的发展。😍
试用并帮助我们冲向终点!
#你可以通过 yarn add parcel@v2
安装 Parcel 2 来尝试它。自述文件中提供了入门指南。CLI 与 Parcel 1 大部分兼容,但在这个早期版本中可能会遇到一些差异。另请注意,你之前使用的任何 Parcel 1 插件将不再在 Parcel 2 中工作,需要移植。
这是 Parcel 2 的第一个 alpha 版本,作为 alpha 版本,将会有 bug 和缺失的功能。特别是,许多插件尚未从 Parcel 1 移植到 Parcel 2。如果你想帮忙,请随时查看 v2 分支上现有的插件以获取灵感(我们将在 Parcel 2 的最终版本中提供完整文档),以及 GitHub 上的 Parcel 2 标签。其中一些问题还标记为"新手友好",是开始的好地方。
请在 GitHub 上报告你发现的任何 bug。你还可以在 Twitter 上找到我 @devongovett。