@pika/pack - 发布优秀的 npm 包。
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
注：本文最初发表于pika.dev。
如果你最近在 npm 上发布过软件包，你就会知道现代构建流程需要做多少工作。编译 JavaScript、编译 TypeScript、将 ES 模块语法 (ESM) 转换为 Common.js、配置 package.json 清单……而这仅仅是基础工作。
那么，你的软件包是否针对浏览器和打包工具进行了优化？用户能否通过UNPKG加载你的软件包？它是否包含VSCode 和 TypeScript 用户所需的类型定义？是否已去除所有不必要的文件，使其尽可能小巧？用户会关注这些优化，但要做好这些优化，需要更多的知识、配置、工具、时间和精力。
@pika/pack 可以轻松构建出色的软件包：
- 简单⚡️使用预配置的插件构建您的整个软件包。
- 灵活🏋️♀️ 选择符合您需求的插件和优化方案。
- Holistic ⚛️ 让我们来处理您的代码、资源和package.json 配置。
软件包构建流程
@pika/pack连接预配置的插件，自动构建并优化您的软件包。这些插件封装了Babel和Rollup等常用工具，并针对 npm 进行了优化。因此，@pika/pack 几乎无需您进行任何配置即可构建软件包。
@pika/pack 甚至会自动创建和配置您的软件包的 package.json 清单。
之所以可行，是因为@pika/pack会构建你的整个包：代码、资源，甚至包括 package.json 清单文件。通过构建整个包，最终你会得到一个完整的pkg/目录，可以直接发布。诸如“main”、“module”、“umd:main”、“types”、“unpkg”之类的入口点，甚至像“sideEffects”和“files”这样的高级选项，都由你的构建插件处理。
入门很简单：
// 1. Install @pika/pack!
$ npm install -g @pika/pack
// 2. Add this to your package.json manifest:
"@pika/pack": {"pipeline": []},
// 3. Run @pika/pack!
$ pack build
😎 🆒
那么现在怎么办？如果你运行pack build一个空管道，你会得到一个空包。这没什么用。
为了帮助您入门，以下是我们推荐的五件使用@pika/pack最有趣的事情：
1. 默认发布现代 ES2018 JavaScript（1 行代码）
"@pika/pack": {
"pipeline": [
["@pika/plugin-standard-pkg", {"exclude": ["__tests__/**/*"]}]
]
}
大多数软件包首先会使用@pika/plugin-standard-pkg插件。这是我们的标准“源代码”构建器，它可以将任何 JavaScript 和 TypeScript 源代码构建为最新的 ES2018 语言规范。TypeScript 默认受支持，并且您本地的任何自定义 Babel 插件.babelrc都会自动使用（该插件内部由 Babel 提供支持）。
这为我们后续的开发流程提供了一个标准的 ES2018 目标框架。额外好处：部分用户可能支持现代 JavaScript，可以直接利用这个 ES2018 发行版，从而获得更小、更快、更精简的软件包。
2. 发布 Node.js 和 Web 优化版本（各一行）
"@pika/pack": {
"pipeline": [
["@pika/plugin-standard-pkg"],
["@pika/plugin-build-node"],
["@pika/plugin-build-web"]
]
}
创建完现代 ES2018 版本后，向软件包添加 Node.js 和 Web 优化版本就变得非常简单。` @pika/plugin-build-node`会将 Node.js 版本转译为可在任何受支持的 Node.js 版本上运行。` @pika/plugin-build-web`则会构建更现代的 ES 模块 (ESM) 版本：针对打包工具进行了优化，并编译为可在所有原生支持 ESM 语法的浏览器上运行。
这两个插件内部都使用了 Rollup，但您无需自行配置任何打包逻辑。只需三行 JSON 代码，即可获得一个针对两大主流 JS 平台完全优化的软件包。而且，由于@pika/pack会构建您的整个软件包，因此您的 package.json 清单文件会自动配置“main”、“module”和“esnext”入口点。
3. 自动生成 TypeScript 定义（1 行代码）
"@pika/pack": {
"pipeline": [
["@pika/plugin-standard-pkg"],
["@pika/plugin-build-node"],
["@pika/plugin-build-web"],
["@pika/plugin-build-types"]
]
},
借助@pika/pack，每个包都会自动获得.d.tsTypeScript 定义文件，这要归功于@pika/plugin-build-types插件。即使您编写的是 JavaScript，此插件也会使用 TypeScript 从您的 JavaScript 和 JSDoc 中自动生成类型定义！
4. 发布 WASM！或者 Reason、Rust、C++ 等等……（1-2 行）
"@pika/pack": {
"pipeline": [
["@pika/plugin-wasm-assemblyscript"],
["@pika/plugin-wasm-bindings"]
]
},
管道的概念既简单又灵活。灵活到你的包源甚至不需要是 JavaScript：
- @pika/plugin-source-bucklescript - 通过 BuckleScript 将 Reason 或 OCaml 编译为 ES2018 JavaScript
- @pika/plugin-wasm-assemblyscript - 通过 AssemblyScript 将 TypeScript 编译为 WASM
- @pika/plugin-wasm-emscripten - 通过 Emscripten 将 C/C++ 编译为 WASM（即将推出！）。
- @pika/plugin-wasm-bindings - 为任何生成的 WASM 添加简单的 JavaScript 绑定。
5. 自动增强您的套餐（1 行）
"@pika/pack": {
"pipeline": [
["@pika/plugin-standard-pkg"],
["@pika/plugin-build-node"],
["@pika/plugin-simple-bin", {"bin": "my-cli"}]
]
}
构建插件还可以通过一些非常令人兴奋的方式增强现有构建。我们目前最喜欢的增强功能是@pika/plugin-simple-bin，它会将一个简单的 CLI 包装器注入到任何包中，并自动配置 package.json 以指向它。
我们使用 @pika/pack 来构建 @pika/pack，并且我们专门使用此插件来添加命令行界面，而无需任何 package.json 配置和设置方面的麻烦。
我们迫不及待地想看看这种封装概念能带来哪些可能性，尤其是在命令行界面方面：程序失败时自动重启、运行后检查软件包更新、记录使用统计信息……可能性无穷无尽！
发布您的套餐
发布软件包应该像构建它一样简单。因此，我们将np（我们自称是“更好的 npm 发布工具”）中我们最喜欢的部分整合到了@pika/pack中。有了这条publish命令，您无需担心如何发布已构建的软件包。只需pack publish在您的顶级项目中运行，@pika/pack 就会引导您完成新版本发布过程。
最后还附上了一个方便的unpkg.com链接，以便您可以立即查看您的新包裹。
立即体验 @pika/pack！
npm install -g @pika/pack
别犹豫了，下次打包的时候试试@pika/pack（或者任何可以升级到 2019 版的旧版本）。试过之后，请告诉我们效果如何！
Pika是一个旨在推动 JavaScript 生态系统发展的项目。Pika 的使命是让现代 JavaScript 更易于使用，具体做法是让用户更容易在 npm 上查找、发布、安装和使用现代软件包。希望 @pika/pack 能让我们离这个目标更近一步。
已在使用 @pika/pack 的项目
- react-async - 灵活的基于 Promise 的 React 数据加载器。
- hookuspocus - 所有函数的钩子！
- foundationjs - 功能齐全的 NodeJS 框架。
- graphql-rest-proxy - 将您的 REST API 转换为 GraphQL。
- 自定义属性- 定义自定义属性的方式与定义自定义元素的方式相同。
- @pika/pack和@pika/web——没错，我们甚至用 @pika/pack来构建 @pika/pack！ 🤯
- 还有数百个！查看我们的完整示例和入门项目集 →
- 你是否在软件包中使用过 @pika/pack？请告诉我们，我们会将你的软件包添加到列表中！