插件系统概述

插件系统的高级概述

Parcel架构

即使您没有做任何复杂的事情，如果您要使用 Parcel，花一些时间并了解它的工作原理是很有意义的。

概括地说，Parcel 经历了几个阶段：

resolving 和 transforming 阶段并行工作以构建所有资产的图表。

资产图在 bundling 阶段被转换为捆绑包。每个包的输出文件名在Naming阶段确定。

然后，Packaging、Optimizing和Compressing阶段协同工作以并行生成每个包的最终内容。

packaging阶段将每个捆绑包中的资产合并到输出文件中。

optimizing阶段转换每个包的内容。完成后，Parcel 确定每个包的内容哈希，这些哈希将应用于最终输出文件名。

最后，Compressing阶段为每个输出文件生成一个或多个编码，因为它们被写入文件系统。

在解析和转换阶段，Parcel 会发现您的应用程序或程序中的所有资产。每个资产都可以对 Parcel 将引入的其他资产有自己的依赖关系。

表示所有这些资产及其相互依赖关系的数据结构称为“资产图”。

一旦 Parcel 构建了整个 Asset Graph，它就会开始将其变成“捆绑包”。这些捆绑包是放在一个文件中的资产分组。捆绑包将（通常）仅包含相同语言的资产。

某些资产被视为您应用程序的“入口”点，并将作为单独的捆绑包保留。例如，如果您的 index.html 文件链接到 about.html 文件，它们不会被合并在一起。

Transformer: Converts an asset (into another asset)
Example: convert Typescript to JavaScript (per file)
Resolver: Turns dependency requests into absolute paths (or exclude them)
Example: add your own syntax for imports, e.g. import "^/foo"
Bundler: Turns an asset graph into a bundle graph
Example: create a bundler that does vendoring (splitting app and node_modules code)
Namer: Generates a filename (or filepath) for a bundle
Example: place output bundles in a hierarchical file structure, omit hashes in bundle names
Runtime: Programmatically inserts (synthetic) assets into bundles"
Example: add analytics to every bundle
Packager: Turns a group of assets (bundle) into a bundle file"
Example: concatenate all input CSS files into a CSS bundle
Optimizer: Applies modifications to the finished bundle (similar to a transformer)
Example: run a minifier or convert into a data-url for inline usage
Compressor: Compresses or encodes bundles in one or more ways
Example: compress a bundle with Gzip
Validator: Analyzes assets and emit warnings and errors
Example: do type-checking (TypeScript, Flow)
Config: A reuseable '.parcelrc' package
Example: provide a tailor-made parcel config for your boilerplate
Reporter: Listens to events of the build
Example: generate a bundle report, run a dev server