unplugin-dist-zip-pack：前端构建产物打包神器，开发者的得力助手

作为一名前端开发者，在项目开发过程中，我们常常需要对构建产物进行高效的打包管理。最近，我发现了一个超级好用的插件——unplugin-dist-zip-pack，它简直是我们开发者的福音。

一、强大的功能特性

unplugin-dist-zip-pack 能够将构建产物完美打包，并且支持众多主流的构建工具，包括 Webpack、Vue-CLI、Vite、Rollup、esbuild、Astro、Nuxt 和 Rspack。无论你使用哪种构建工具进行项目开发，都能轻松使用这个插件来打包构建产物。

而且，它还支持对打包后的 zip 文件添加密码，为我们的项目成果提供了更高的安全性保障。

二、灵活的配置选项

这个插件提供了丰富的配置选项，让我们可以根据项目的具体需求进行个性化定制。

1. 可以自定义输入目录（inDir），如果你有特定的构建产物存放位置需求，这个功能非常实用。
2. 输出目录（outDir）也可以自行设置，方便我们管理打包后的文件存储位置。
3. 压缩包名称（outFileName）同样可以根据项目来命名，更加清晰易辨。
4. 通过设置路径前缀（pathPrefix），可以更好地组织压缩包中的文件结构。
5. 还有一个非常强大的过滤函数（filter），相当于 JavaScript 中的 Array.prototype.filter，可以对每个文件和目录进行筛选，只打包我们真正需要的内容。

三、简单易用的安装方式

安装 unplugin-dist-zip-pack 非常简单，只需要以下命令之一即可。

npm i unplugin-dist-zip-pack

或者

yarn add unplugin-dist-zip-pack

四、多种构建工具的使用示例

1. Vite：

   // vite.config.ts
   import zipPack from "unplugin-dist-zip-pack/vite";
   
   export default defineConfig({
     plugins: [
       zipPack({
         /* options */
       }),
     ],
   });

2. Rollup：

   // rollup.config.js
   import zipPack from "unplugin-dist-zip-pack/rollup";
   
   export default {
     plugins: [
       zipPack({
         /* options */
       }),
     ],
   };

3. Webpack：

   // webpack.config.js
   module.exports = {
     /*... */
     plugins: [
       require("unplugin-dist-zip-pack/webpack")({
         /* options */
       }),
     ],
   };

4. Vue CLI：

   // vue.config.js
   module.exports = {
     configureWebpack: {
       plugins: [
         require("unplugin-dist-zip-pack/webpack")({
           /* options */
         }),
       ],
     },
   };

5. esbuild：

   // esbuild.config.js
   import { build } from "esbuild";
   import zipPack from "unplugin-dist-zip-pack/esbuild";
   
   build({
     plugins: [zipPack()],
   });

6. Nuxt：

   // nuxt.config.js
   export default defineNuxtConfig({
     modules: [
       [
         "unplugin-dist-zip-pack/nuxt",
         {
           /* options */
         },
       ],
     ],
   });

值得一提的是，这个插件对于 Nuxt 2 和 Nuxt Vite都能很好地兼容。

五、项目地址

如果你也对这个强大的插件感兴趣，不妨去它的 GitHub 地址看看：https://github.com/zengjunlin2022/unplugin-dist-zip-pack。

总之，unplugin-dist-zip-pack 插件为我们前端开发者提供了高效、便捷的构建产物打包解决方案，强烈推荐大家在项目中使用。