跳至主要内容

AssetPack 1.0.0 发布！

·5 分钟阅读时间
Zyie

今天，怀着激动的心情，我们宣布推出 AssetPack 1.0，这是一款针对 Web 开发人员的资产管理和优化工具。

在 Web 开发领域，管理和优化资产通常需要大量人工工作。开发者需要确保图像经过压缩，音频文件经过优化，字体高效加载，等等。此过程可能耗时且容易出错，尤其是在处理包含大量资产的大型项目时。为了应对这一挑战，AssetPack 提供了一个可配置资产流水线来自动化许多此类任务，从而让开发者更容易地在项目中管理和部署资产。

什么是 AssetPack？​

AssetPack 是一款工具，旨在简化 Web 项目中资产的管理、优化和部署。它与框架无关，可以与你喜欢的框架一起使用，例如 PixiJS、Three.js、Phaser 以及其他。AssetPack 采用了基于插件的系统，允许你创建自己的插件，根据自己的需求自定义资产处理。

AssetPack screenshot

AssetPack 自带以下插件

  • 缓存破解：自动将唯一哈希追加到资产 URL，以确保客户端始终加载资产的最新版本。
  • 压缩：使用 sharp 压缩图像，创建 webp/avif 图像，并压缩 png/jpg 以缩小文件大小。
  • TexturePacker：从图像自动生成精灵表。
  • Mipmap：为纹理生成 Mipmap，以提升渲染性能，例如 2 倍、1 倍、0.5 倍等。
  • Spine：通过为 .atlas 文件创建 Mipmap，优化 Spine 动画。
  • Audio/FFmpeg：使用 FFmpeg 将音频文件转换为所需格式和比特率。
  • JSON：缩小 JSON 文件以减小其大小。
  • Webfont：将所有字体文件转换为 WOFF2 格式，以及用于 SDF 和 MSDF 字体生成的插件
  • 清单：生成一个清单文件，包含所有资源 URL，以便轻松加载。这可与 PixiJS 的 资产 加载器配合使用

以上插件只是 AssetPack 能够执行操作的一些示例。您可以创建自己的插件以进一步扩展 AssetPack 的功能。

AssetPack 的关键功能

缓存和 CI

AssetPack 智能地缓存资源，只对每个资源进行一次转换。这减少了冗余处理，并加快了构建时间，从而确保您始终拥有资源的最新版本，而无需承担不必要的开销。

这非常适合持续集成 (CI) 环境，AssetPack 允许您将原始资源提交到存储库，并在构建流程中对它们进行转换。这可确保您的资产始终处于优化状态，且最新，且无需大量手动干预。请参阅 此处 的 Github Action 示例以了解更多信息。

性能

AssetPack 旨在处理大量的资源，利用了最快可用工具。这确保了您的资源管道能够满足现代 Web 开发的需求，快速、高效地提供优化后的资源。

监视模式

通过监视模式，AssetPack 实时监视您的资源，在您添加或删除文件时对其进行更新。此实时更新功能简化了开发，允许您立即查看更改，而不必手动触发资源处理。与缓存系统相结合，监视模式确保只转换必要的资源，从而将构建时间减少到最低。

标签系统

AssetPack 的标签系统使资产管理变得直观且灵活。只需给文件夹或文件添加标签（例如，{tps} 创建精灵图），您就可以轻松应用特定处理规则。此功能简化了复杂的资产工作流程，并增强了自定义功能。

AssetPack screenshot

如何使用 AssetPack​

安装​

要安装 AssetPack，您需要安装 @assetpack/core 包。

npm install --save-dev @assetpack/core
兼容性注意事项

AssetPack 需要 Node.js 20+ 版本，如果您的包管理器发出警告，请升级。

设置​

要设置 AssetPack，您需要创建一个配置文件，该文件定义了要优化的资产以及优化方式。

首先在项目的根目录下创建一个 .assetpack.js 文件。此文件应导出一个包含以下属性的对象

// .assetpack.js
import { pixiPipes } from '@assetpack/core';

export default {
    entry: './raw-assets',
    output: './public/assets',
    pipes: [
      /* If you are using AssetPack with PixiJS, you can use the `pixiPipes` function
       * to add a pre-configured set of plugins, with an opinionated
       * set of defaults for PixiJS.
       */
      ...pixiPipes()
    ],
};

要查看完整的配置选项列表，请参阅 API 参考 页面。

然后要运行 AssetPack，您可以使用 CLI、以编程方式运行，或使用 Vite 等构建工具。

AssetPack 为您提供了许多内置插件，要查看完整的插件列表，请参阅 插件 页面。

开源游戏​

开源游戏仓库中已使用 AssetPack。查看 游戏，以利用 AssetPack 进行资产管理。这些示例展示了 AssetPack 在实际场景中的强大功能和灵活性。

结论​

AssetPack 是一个功能强大的工具，可以帮助您管理和优化 Web 项目中的资产。通过自动化资产管理中涉及的许多任务，AssetPack 可以节省您的时间和精力，让您专注于构建出色的 Web 体验。我们希望您在项目中发现 AssetPack 很有用，我们期待看到您用它创造的作品！

我们致力于持续改进 AssetPack，您的反馈对我们来说非常宝贵。如果您遇到任何问题或对新功能有任何建议，请在我们的 Discord 上联系我们或在我们的 GitHub 仓库中打开一个问题。

🌐 保持联系​

关注 Zyie 和 PixiJS 的社交媒体获取最新动态。加入我们充满活力的 Discord 社区，参与实时讨论和获得支持。