使用 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 默认情况下会将我们的代码编译为 main 字段中预期的 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 模块目标，请将 module 字段添加到您的 package.json 中。

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 字段的默认行为。"type": "module" 字段也可以在 package.json 中设置，以将 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 文件，其中包含我们库的类型定义，以及编译后的代码。

下一步

现在您已经设置了项目，您就可以开始学习 Parcel 的一些更高级的功能了。查看有关目标的文档，并查看食谱和语言部分以获取使用流行的 Web 框架和工具的更深入的指南。