打包内联

Parcel 包含多种将一个包的编译内容内联到另一个包中的方法。

¥Parcel includes several ways to inline the compiled contents of one bundle inside another bundle.

将包内联为文本

¥Inlining a bundle as text

bundle-text: 方案可用于将包的内容以纯文本形式内联。Parcel 将照常编译已解析的文件，包括打包所有依赖，然后将结果作为字符串内联到父包中。

¥The bundle-text: scheme can be used to inline the contents of a bundle as plain text. Parcel will compile the resolved file as normal, including bundling all dependencies, and then inline the result as a string into the parent bundle.

这可以用在很多方面。例如，你可以内联已编译的 CSS 包并使用结果在运行时注入样式标记。当你需要控制插入样式标签的位置时，这可能很有用，例如 进入 Shadow DOM 根。

¥This could be used in many ways. For example, you could inline a compiled CSS bundle and use the result to inject a style tag at runtime. This might be useful in cases where you need to control where the style tag is inserted, e.g. into a Shadow DOM root.

import cssText from 'bundle-text:./test.css';

// inject <style> tag
let style = document.createElement('style');
style.textContent = cssText;
shadowRoot.appendChild(style);

内联为数据 URL

¥Inlining as a data URL

data-url: 方案允许将包内联为数据 URL。解析后的文件（包括所有依赖）将被编译，并转换为数据 URL。如果文件是二进制格式，它将被编码为 base 64，否则被编码为 URI。

¥The data-url: scheme allows inlining a bundle as a data URL. The resolved file will be compiled, including all dependencies, and converted to a data URL. If the file is in a binary format, it will be encoded as base 64, otherwise as a URI.

一个有用的例子是在 CSS 文件中内联小图片。

¥One example where this could be useful is inlining small images inside a CSS file.

.foo {
  background: url(data-url:./background.png);
}

在引擎盖下

¥Under the hood

bundle-text: 和 data-url: 在默认 Parcel 配置中使用 命名管道 实现。@parcel/transformer-inline-string 转换器 插件将编译后的资源标记为内联，这告诉 Parcel 不要将包写入磁盘，而是将其内联到父包中。为了实现数据 URL，使用 @parcel/optimizer-data-url 优化器 插件将编译后的包转换为数据 URL。

¥bundle-text: and data-url: are implemented in the default Parcel config using Named pipelines. The @parcel/transformer-inline-string Transformer plugin marks the compiled asset as inline, which tells Parcel not to write the bundle to disk and instead inline it into the parent bundle. To implement data URLs, the @parcel/optimizer-data-url Optimizer plugin is used to convert the compiled bundle to a data url.

在 Parcel 配置中，如下所示。每个管道中的 "..." 告诉 Parcel 首先运行与文件匹配的普通转换器，然后运行 @parcel/transformer-inline-string。

¥In the Parcel config, it looks like the following. The "..." in each pipeline tells Parcel to run the normal transformers that match the file first, and then run @parcel/transformer-inline-string.

{
  "transformers": {
    "bundle-text:*": ["...", "@parcel/transformer-inline-string"],
    "data-url:*": ["...", "@parcel/transformer-inline-string"]
  },
  "optimizers": {
    "data-url:*": ["...", "@parcel/optimizer-data-url"]
  }
}

你可以创建自己的命名管道来自定义内联，重用上述插件或创建自定义插件。详细信息请参见 Parcel 配置。

¥You can create your own named pipelines to customize inlining however you’d like, reusing the above plugins or creating custom ones. See Parcel configuration for more details.

另一个可能有用的 Parcel 插件是 @parcel/transformer-inline。与 @parcel/transformer-inline-string 一样，它将资源标记为内联，但结果不编码为字符串。这意味着如果内联包包含代码，它将在父包中执行，而不是向用户返回字符串。如果你有一个自定义插件以某种方式封装打包包并需要在运行时对其进行解码，这可能会很有用。

¥Another Parcel plugin that might be useful is @parcel/transformer-inline. Like @parcel/transformer-inline-string, it marks assets as inline, but the result is not encoded as a string. This means if the inline bundle contains code, it will be executed in the parent bundle rather than returning a string to the user. This could be useful if you have a custom plugin that wraps the bundle somehow and needs to decode it at runtime.

例如，也许你想将文件内联为 ArrayBuffer 或其他自定义编码。这可以使用自定义优化器插件来实现，该插件对打包包的输出进行后处理。

¥For example, maybe you’d like to inline a file as an ArrayBuffer, or some other custom encoding. That could be implemented using a custom Optimizer plugin, which post-processes the output of a bundle.

import {Optimizer} from '@parcel/plugin';
import {blobToBuffer} from '@parcel/utils';

export default new Optimizer({
  async optimize({contents}) {
    let buffer = await blobToBuffer(contents);
    return {
      contents: `new Uint8Array(${JSON.stringify(Array.from(buffer))}).buffer`
    };
  }
});

现在，你可以使用新插件定义命名管道，并将编译文件作为数组缓冲区导入。

¥Now you could define a named pipeline using your new plugin, and import compiled files as array buffers.

有关编写自定义插件的更多详细信息，请参阅 插件系统 文档，有关命名管道的更多信息，请参阅 Parcel 配置 文档。

¥See the Plugin system docs for more details on writing custom plugins, and the Parcel Configuration docs for more information about named pipelines.

内联为 blob URL

¥Inlining as a blob URL

你可能希望将包的内容内联为 斑点网址，它可以传递到浏览器中的许多 Web API。@parcel/optimizer-blob-url 插件可与 @parcel/transformer-inline 组合使用来执行此操作。默认情况下不包含这些的命名管道，因此你需要在 .parcelrc.txt 中创建一个命名管道。

¥You may want to inline the contents of a bundle as a blob URL, which can be passed to many web APIs in the browser. The @parcel/optimizer-blob-url plugin can be used to do this, in combination @parcel/transformer-inline. A named pipeline for these is not included by default, so you'll need to create one in your .parcelrc.

{
  "extends": "@parcel/config-default",
  "transformers": {
    "blob-url:*": ["...", "@parcel/transformer-inline"]
  },
  "optimizers": {
    "blob-url:*": ["...", "@parcel/optimizer-blob-url"]
  }
}

内联而不转换

¥Inlining without transforming

在 JavaScript 中，可以内联文件的内容，而无需先通过 Parcel 转换器运行它。这可以使用 fs Node 模块来完成，Parcel 会对该模块进行静态分析。它可以作为多种不同编码的字符串内联，或者作为 Buffer。有关更多详细信息，请参阅 Node 模拟 文档。

¥In JavaScript, it’s possible to inline the contents of a file without running it through Parcel transformers first. This can be done using the fs Node module, which Parcel statically analyzes. It can be inlined as a string in a number of different encodings, or as a Buffer. See the Node emulation docs for more details.

import fs from 'fs';

const sourceCode = fs.readFileSync(__dirname + '/foo.js', 'utf8');

在上面的例子中，sourceCode 变量将是未编译的 foo.js 的内容，即原始源代码而不是打包结果。

¥In the above example, the sourceCode variable would be the contents of foo.js without being compiled, i.e. the original source code rather than the bundled result.

与其他工具集成

¥Integration with other tools

由于打包内联是 Parcel 特定的功能，因此你需要配置其他工具（例如 TypeScript 或 Flow）来支持它。有关如何执行此操作的详细信息，请参阅依赖解析文档中的 配置其他工具 部分。

¥Since bundle inlining is a Parcel-specific feature, you’ll need to configure other tools such as TypeScript or Flow to support it. See the Configuring other tools section in the dependency resolution docs for details on how to do this.