简介
在 web 开发中，我们通常需要在页面中引入静态资源，如：图片、stylesheets 和 JavaScript 文件等。通常，我们会直接在 HTML 文件中加入这些资源路径。这种方法不仅不利于维护，还很难被复用和测试。
@deployable/asset 是一个 npm 包，可以让你更方便，更可靠地管理静态资源的路径。在接下来的教程中，将会介绍如何使用 @deployable/asset，以更好地管理你的项目中的资源。
安装
我们可以使用 npm 命令行工具来安装 @deployable/asset，如下所示：
npm install @deployable/asset --save
使用
配置
首先，在项目中新建一个配置文件，比如叫做 assets.config.js。这个文件应该是一个 CommonJS 模块，返回一个对象。如下所示：
-- -------------------- ---- -------
-------------- - -
------- ----------
--------- --------- - ----------
------ -
------- ---------
---- --------------
--- ---------
--
-------- -------
--属性含义：
prefix表示你的资源的 URL 前缀。basePath表示你的资源文件夹的路径。files是一个对象，它的每个属性表示一种类型的资源。比如，images 表示图片的路径，css 表示样式的路径，js 表示脚本的路径。version是一个字符串，表示资源的版本。
引用资源
在项目中，当需要引用资源时，需要使用 asset 函数。需要传入资源的类型和路径。比如，如果要引用一个图片，可以这样写：
const { asset } = require('@deployable/asset');
const imageUrl = asset('images', 'logo.png');
console.log(imageUrl);如果资源的类型已经在配置中定义，可以直接传入资源路径：
const { asset } = require('@deployable/asset');
const imageUrl = asset('logo.png');
console.log(imageUrl);使用资源的版本
为了保证资源在更新时，用户能够获取到新的资源而不是缓存中的旧资源，我们需要给资源加上版本号。@deployable/asset 提供了版本控制功能，可以让你使用和管理资源的版本。
你可以在配置文件中设置版本号，比如：
-- -------------------- ---- -------
-------------- - -
------- ----------
--------- --------- - ----------
------ -
------- ---------
---- --------------
--- ---------
--
-------- -------
--然后，使用 asset 函数来获取带有版本号的静态资源路径：
const { asset } = require('@deployable/asset');
const imageUrl = asset('images', 'logo.png');
console.log(imageUrl);输出结果为：
/assets/images/logo.png?v=1.0.0
我们可以看到，资源路径已经带上了版本号。
与模板引擎结合使用
如果你使用了模板引擎，可以通过自定义过滤器的方式来方便地使用 @deployable/asset。
以 nunjucks 为例，可以像这样定义过滤器：
-- -------------------- ---- -------
----- - ----- - - -----------------------------
----- -------- - --------------------
----- --- - ---------------------------- - --------- -
----------- -----
------ ----
---
---------------------- ------ --------- -- ----------- -----------然后，你就可以在模板中这样使用过滤器：
<img src="{{ 'images/logo.png'|asset('images') }}">示例代码
以下是一个完整的示例代码，你可以通过这个代码理解 @deployable/asset 的使用方法：
const { asset } = require('@deployable/asset');
const imageUrl = asset('images', 'logo.png');
const cssUrl = asset('css', 'style.css');
console.log(imageUrl);
console.log(cssUrl);总结
本文介绍了如何使用 @deployable/asset ，通过配置静态资源路径，可以更好地管理和使用资源。你可以更方便地引用资源路径，也可以更好地控制资源版本。如果你有更好的建议或意见，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005554c81e8991b448d2800