简介
在前端开发中，有时需要使用一些静态资源，如图片、字体、样式等。而通常情况下，这些静态资源会存放在项目的 assets 文件夹中。但是，在实际开发中，针对不同的环境与需求而打包的代码也有所不同，这就给前端开发带来了不小的冗余工作。为了解决这个问题，我们可以使用 npm 包 dassets。
dassets 是什么？
dassets 是一个简便的依赖管理器，它可以管理项目中的所有资源：样式、图片、字体等。它提供了多种自动化功能，如压缩和自动命名。同时，dassets 还可以应用各种依赖分析技术来分析和动态管理项目中的资源。
dassets 的优势
- 一站式解决多种静态资源问题，不用再去寻找各种工具进行打包和管理；
- 天生支持多种引入方式，使用简单明了；
- 自动化功能强大，又完全可配置，更加适合不同的开发团队作出自己的定制化方案；
- 支持依赖分析，让你可以清楚地知道项目中那些地方引用某个资源，更好的管理项目。
安装
使用 npm 安装 dassets：
npm install dassets --save-dev
配置
在项目的根目录下创建 dassets.config.js，配置 dassets：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ------------------
-------------- - -
------ ------ -- ---------
------- ------- -- ---------
-------- ------- ------ ------- -- -------
-------- -
-- -- ------------- ------ --- ---------
--- -----------------------------------
-- -----------------
--- --------------------------------------
-- -------
--- -----------------------------------
-- -----
--- ---------------------------------
-- -- ------------- -----------------
--- ------------------------------------
-
-使用
1. 引入图片
<img src="images/logo.png" alt="logo">
2. 引入字体
@font-face {
font-family: 'example';
src: url('../fonts/example.eot');
src: local('example'),
url('../fonts/example.ttf') format('truetype'),
url('../fonts/example.woff') format('woff'),
url('../fonts/example.svg') format('svg');
}3. 引入样式
/* NPM 模块 */ @import '~bootstrap/dist/css/bootstrap.css'; /* 本地样式 */ @import './style.css';
4. 动态获取资源地址
import logoUrl from '@/images/logo.png'
总结
dassets 可以在前端开发中大幅减少开发者的冗余工作，让开发者可以更加专注于业务上。同时，dassets 的强大功能同样也为前端开发提供了更加便利和高效的开发方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596681e8991b448d6e75