使用 Parcel 构建库

安装

#

在开始之前，您需要安装 Node 和 Yarn 或 npm，并为您的项目创建一个目录。然后，使用 Yarn 安装 Parcel：

yarn add --dev parcel

或者使用 npm 运行：

npm install --save-dev parcel

项目设置

#

现在 Parcel 已安装，让我们为我们的库设置一个 package.json 文件。我们将使用 source 字段引用我们的源文件，并创建一个 main 目标作为构建的输出文件。这将被其他使用我们库的工具（如打包器或 Node.js）使用。

package.json: 
{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "devDependencies": {
    "parcel": "latest"
  }
}

上面的示例使用 src/index.js 作为库的源代码，所以接下来让我们创建这个文件。在这个示例中，我们使用 JavaScript 文件，但我们也可以在这里引用 TypeScript 文件或任何可以编译为 JavaScript 的其他语言。

src/index.js: 
export function add(a, b) {
  return a + b;
}

现在，我们的库导出了一个名为 add 的函数，它将两个参数相加并返回结果。由于这是使用 export 关键字编写的 ES 模块语法，Parcel 默认会将我们的代码编译为 CommonJS 模块。

要构建我们的库，在项目目录中运行 npx parcel build。Parcel 将构建您的源代码，并在 dist/main.js 中输出一个 JavaScript 文件，正如 main 字段所引用的。

包脚本

#

到目前为止，我们一直直接运行 parcel CLI，但在 package.json 文件中创建一些脚本可以使这个过程更加方便。我们还将设置一个 watch 脚本，它将监视您的源文件的变化并自动重新构建，这样您在开发过程中就不需要手动运行 build 脚本了。

package.json: 
{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "scripts": {
    "watch": "parcel watch",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

现在您可以运行 yarn build 来为发布构建项目，并在开发中运行 yarn watch。

CommonJS 和 ES 模块

#

Parcel 接受 CommonJS 和 ES 模块作为输入，并可以根据 package.json 中声明的内容输出一个或多个这些格式。要添加 ES 模块目标，请在 package.json 中添加 module 字段。

package.json: 
{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "devDependencies": {
    "parcel": "latest"
  }
}

现在 Parcel 将输出 dist/main.js 作为 CommonJS 模块，并输出 dist/module.js 作为 ES 模块。使用您库的工具将选择它们支持的模块类型。

您还可以使用文件扩展名来指示要输出的模块类型。.mjs 扩展名将生成 ES 模块，.cjs 扩展名将生成 CommonJS 模块。这会覆盖 main 字段的默认行为。还可以在 package.json 中设置 "type": "module" 字段，以将 main 字段视为 ES 模块。有关更多详细信息，请参见 Node.js 文档。

TypeScript

#

Parcel 还支持构建用 TypeScript 编写的库。source 字段可以指向您的入口 .ts 或 .tsx 文件，Parcel 将自动将 JavaScript 输出到您的目标中。您还可以在 package.json 中使用 types 字段指向 .d.ts 文件，Parcel 将在编译的 JavaScript 旁边生成一个类型定义文件。这让像 VSCode 这样的编辑器能为库的用户提供自动完成功能。

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

现在 Parcel 将输出一个 dist/types.d.ts 文件，其中包含我们库的类型定义，以及编译后的代码。

改进树摇（Tree Shaking）

#

默认情况下，Parcel 将您的整个库打包到每个目标（例如 main 和 module）的单个文件中。如果您有许多可能独立使用的导出，分发单独的文件可以提高最终应用程序中的树摇效果。这可以通过 @parcel/bundler-library 插件来实现。

.parcelrc: 
{
  "extends": "@parcel/config-default",
  "bundler": "@parcel/bundler-library"
}

下一步

#

现在您已经设置了项目，可以学习 Parcel 的一些更高级功能了。查看关于目标的文档，并查看"配方"和"语言"部分，了解使用流行的 Web 框架和工具的更深入指南。