目标(Targets)

Parcel 可以同时以多种不同的方式编译您的源代码。这些被称为目标。例如，您可以有一个针对较新浏览器的“现代”目标和一个针对旧浏览器的“旧版”目标。

入口 Entries

“入口 Entries”是 Parcel 在构建源代码时开始的文件。它们可以在 CLI 上指定，或者使用 package.json 中的source字段。

`$ parcel <entries>`

可以在 CLI 上为任何 Parcel 命令指定一个或多个入口文件。

$ parcel src/a.html src/b.html

入口可以指定为 glob 以一次匹配多个文件。请务必将 glob 用单引号括起来，以确保 glob 不会被您的 shell 解析并直接传递给 Parcel。这确保 Parcel 可以自动拾取与 glob 匹配的新创建的文件，而无需重新启动。

$ parcel './src/*.html'

入口也可以是目录，在这种情况下，必须在package.json中包含source字段的文件，详情见下文。

`package.json#source`

package.json 中的source字段可以指定一个或多个入口文件。

{
  "source": "src/index.html"
}

{
  "source": ["src/a.html", "src/b.html"]
}

`package.json#targets.*.source`

package.json 中声明的任何目标中的source字段可以指定一个或多个特定于该目标的入口文件。例如，您可以同时构建前端和后端，或者您的桌面和移动应用程序。有关配置目标的详细信息，请参见下文。

{
  "targets": {
    "frontend": {
      "source": "app/index.html"
    },
    "backend": {
      "source": "api/index.js"
    }
  }
}

目标 Targets

Parcel 遵循每个已解析目标中的依赖关系，为一个或多个目标构建源代码。目标指定输出目录或文件路径，以及有关如何编译代码的信息。

默认情况下，Parcel 包含一个输出到dist件夹的隐式目标。这可以使用--dist-dirCLI 选项覆盖。

$ parcel build src/index.html --dist-dir output

也可以在 package.json 中使用targets字段指定输出目录。这将覆盖--dist-dirCLI 选项。

{
  "targets": {
    "default": {
      "distDir": "./output"
    }
  }
}

环境

除了输出位置之外，目标还指定了有关代码将在其中运行的“环境”的信息。它们告诉 Parcel 要构建的环境类型（例如浏览器或 Node.js），以及每个引擎的版本支持。这会影响 Parcel 编译代码的方式，包括要转换的语法。

`package.json#browserslist`

对于浏览器目标，ackage.json 中的browserslist字段可用于指定您支持的浏览器。您可以通过使用统计或特定浏览器的版本范围进行查询。有关更多信息，请参阅browserslist 文档。

{
  "browserslist": "> 0.5%, last 2 versions, not dead"
}

`package.json#engines`

对于 Node.js 和其他目标，package.json 中的engines字段可用于指定您支持的版本。使用 semver 范围指定引擎。

{
  "engines": {
    "node": ">= 12"
  }
}

隐式环境

当一个文件依赖于另一个文件时，环境是从其父文件继承的。但是您对资产的依赖方式可能会改变环境的某些属性。例如，当依赖于 Service Worker 时，环境会自动更改为 Service Worker 上下文，以便适当地编译代码。

navigator.serviceWorker.register(new URL("service-worker.js", import.meta.url));

差分打包

“差分打包”是指为不同的目标发布多个版本的代码，并允许浏览器选择最优化的版本进行下载。当您在 HTML 文件中使用<script type="module">元素时，并且环境指定的某些浏览器本身不支持 ES 模块时，Parcel 也会自动生成<script nomodule>回退。

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

编译为：

<script type="module" src="app.c9a6fe.js"></script>
<script nomodule src="app.f7d631.js"></script>

这允许支持 ES 模块的现代浏览器下载更小的包，而使用后备仍然支持旧版浏览器。这可以通过避免转换现代 JavaScript 语法（如类、箭头函数、异步/等待等）来显着减少包大小并缩短加载时间。

这会根据您的浏览器目标自动发生，正如您在 package.json 中的"browserslist"中的字段中所声明的那样。如果没有browserslist或者所有浏览器目标都原生支持 ES 模块，则nomodule不会生成回退。

多个目标 Multiple targets

您可能有多个目标，以便同时为多个不同的环境构建源代码。例如，您可以为应用程序设置“现代”和“传统”目标，或者为库设置 ES 模块和 CommonJS 目标（见下文）。

使用 package.json 中的字段配置targets字段。每个目标都有一个名称，指定为target字段下的键，以及一个关联的配置对象。例如，engines每个目标中的字段可用于自定义编译它的环境。

{
  "targets": {
    "modern": {
      "engines": {
        "browsers": "Chrome 80"
      }
    },
    "legacy": {
      "engines": {
        "browsers": "> 0.5%, last 2 versions, not dead"
      }
    }
  }
}

当指定多个目标时，默认情况下将写入输出dist/${targetName}（例如dist/modern，dist/legacy在上面的示例中）。这可以使用distDir每个目标中的字段进行自定义。或者，如果目标只有一个入口，则可以使用与目标名称对应的顶级 package.json 字段为输出指定准确的文件名。

{
  "modern": "dist/modern.js",
  "legacy": "dist/legacy.js",
  "targets": {
    "modern": {
      "engines": {
        "browsers": "Chrome 80"
      }
    },
    "legacy": {
      "engines": {
        "browsers": "> 0.5%, last 2 versions, not dead"
      }
    }
  }
}

库目标 Library targets

Parcel 包含一些用于构建库的内置目标。其中包括main, module, browser, 和 types字段。

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts"
}

默认情况下，库目标不打包node_modules依赖项。此外，库默认禁用缩小。可以使用目标字段中的适当选项重写这些内容(见下文)。Scope hoisting 不能被禁用为库的目标。

库目标会根据目标自动输出原生 ES 模块或 CommonJS。

main – 默认情况下，输出 CommonJS。如果.mjs使用了扩展名，或者"type": "module"指定了字段，则改为输出 ES 模块。
module – 输出一个 ES 模块。
browser – 特定于浏览器的main字段覆盖。输出 CommonJS。

main和module如果还有可用的目标，或者如果指定了但未指定浏览器目标，则默认为 Node 环境,browser编译engines.node。否则，它们默认为浏览器环境编译。这可以使用context目标配置中的选项覆盖（见下文）。

要使 Parcel 忽略这些字段之一，请在targets字段中指定false。

{
  "main": "unrelated.js",
  "targets": {
    "main": false
  }
}

有关Building a library with Parcel构建库的介绍，请参阅使用 Parcel 构建库。

目标选项

`context`

"node" |
  "browser" |
  "web-worker" |
  "service-worker" |
  "worklet" |
  "electron-main" |
  "electron-renderer";

context属性定义了要构建的环境类型。这告诉 Parcel 有哪些特定于环境的 API 可用，例如 DOM、Node 文件系统 API 等。

对于内置库目标（例如main和module)），context会自动推断。有关更多详细信息，请参阅上面的Library targets。

`engines`

覆盖此目标的顶级package.json#engines和browserslist段中定义的引擎。目标中的engines.browsers字段可以像browserslist。有关详细信息，请参阅上面的环境 Environments和多目标 Multiple targets。

`outputFormat`

"global" | "esmodule" | "commonjs";

定义要输出的模块类型。

global – 可以在浏览器的<script>标签中加载的经典脚本。库目标不支持。
esmodule – 一个使用import和export语句的 ES 模块。可以<script type="module">在浏览器的标签中加载，或者由 Node.js 或其他捆绑程序加载。
commonjs – 一个使用require和module.exports的 CommonJS 模块。可以由 Node.js 或其他捆绑程序加载。

对于内置库目标（例如main和module），outputFormat会自动推断。在目标的顶级 package.json 字段中定义的文件扩展名也可能影响输出格式。有关更多详细信息，请参阅上面的库目标 Library targets。

`scopeHoist`

启用或禁用 scope hoisting。默认情况下，为生产构建启用 scope hoisting。--no-scope-hoistCLI 标志可用于在运行parcel build时禁用 scope hoisting。Scope hoisting 也可以通过在目标配置中设置scopeHoist选项来禁用。

`isLibrary`

当设置为true,时，目标被视为将发布到 npm 并由另一个工具使用的库，而不是直接在浏览器或其他目标环境中使用。当为true，该outputFormat选项必须是esmodule或commonjs并且scopeHoist不能设置为false。

对于内置库目标（例如main和module），它会自动设置为true。有关更多详细信息，请参阅上面的库目标 Library targets。

`optimize`

E 启用或禁用优化（例如缩小）。确切的行为由插件决定。默认情况下，在生产构建期间启用优化 (parcel build)，库目标除外。这可以使用--no-optimizeCLI 标志或目标配置中的选项optimize覆盖。

`includeNodeModules`

确定是打包node_modules还是将它们视为外部。用于浏览器目标默认是true，库目标默认是false。可能的值为：

false – 不包括node_modules。
an array – 要包含的包名称列表。在以下示例中，仅打包react。所有其他文件node_modules都被排除在外。
```
{
  "targets": {
    "main": {
      "includeNodeModules": ["react"]
    }
  }
}
```
an object – 包名到布尔值的映射。如果未列出软件包，则将其包括在内。在以下示例中，node_modules 除了 react 之外的所有内容都捆绑在一起。
```
{
  "targets": {
    "main": {
      "includeNodeModules": {
        "react": false
      }
    }
  }
}
```

`sourceMap`

启用或禁用 sourceMap，并设置源映射选项。默认情况下，源映射已启用。这可以使用--no-source-mapsCLI 标志覆盖，或者通过目标配置中的选项将sourceMap设置为false。

sourceMap选项还接受具有以下选项的对象。

inline – 是否将源映射作为数据 URL 内联到包中，而不是作为单独的输出文件链接到它。
inlineSources – 是否将原始源代码内联到源映射中，而不是从sourceRoot，在为生产构建浏览器目标时，默认情况下设置为true。
sourceRoot – 加载原始源代码的 URL。这是在使用内置 Parcel 开发服务器时在开发中自动设置的。否则，它默认为从项目根目录到包的相对路径。

`source`

覆盖目标根目录的 package.json 中的source字段。这允许每个目标具有不同的条目。有关更多详细信息，请参阅package.json#targets.*.source。

`distDir`

设置将写入此目标中的已编译包的位置。默认情况下，dist如果只给出一个目标，或者dist/${targetName}多个目标。有关详细信息，请参阅目标 Targets。

`publicUrl`

设置在运行时将加载此捆绑包的基本 URL。打包的相对路径distDir将自动附加。如果捆绑包是从与您的网站相同的域加载的，则publicUrl可以是完全限定的 URL（例如，也可以https://some-cdn.com/绝对路径（例如/public)。

默认情况下publicUrl是/。如果您的 HTML 文件和其他资产部署到同一位置，这是一个很好的默认设置。如果您将资产部署到不同的位置，您可能需要设置publicUrl。也可以使用--public-urlCLI 选项设置公共 URL。

在大多数情况下，使用从父捆绑包到子捆绑包的相对路径加载捆绑包。这允许将部署移动到新位置而无需重新构建（例如，将暂存构建提升到生产环境）。当publicUrl相对路径不可能时使用（例如在 HTML 中）。