npm 包 general-resources 使用教程

在前端开发过程中，我们时常需要使用一些公共资源，如字体、图标、视频等等。这些资源虽然不是前端核心技术，但却至关重要，因为他们可以为网站增色不少。general-resources 就是一个可以帮助我们使用公共资源的 npm 包，本文就来介绍使用教程。

安装 general-resources

我们可以通过 npm 安装 general-resources，以下是安装命令：

npm install general-resources --save

安装完毕后，我们可以在项目文件夹下的 node_modules/general-resources/dist 目录中看到相关资源文件。

使用 general-resources 中的资源

general-resources 中包含多种类型的资源，我们可以通过以下方式引入：

字体

@import '~general-resources/dist/fonts/iconfont'

这样就可以引入 general-resources 中的 iconfont 字体。

图标

<img src="~general-resources/dist/images/icon.png" alt="icon" />

这样就可以引入 general-resources 中的 icon.png 图标。

视频

<video src="~general-resources/dist/videos/video.mp4" />

这样就可以引入 general-resources 中的 video.mp4 视频。

动画

@include sprite(video_spritemap, video-play) {
  display: inline-block;
  width: 30px;
  height: 30px;
}

<div class="video-play"></div>

这样就可以引入 general-resources 中的 video_spritemap 动画。

general-resources 包含了哪些资源

general-resources 包含了多种类型的资源文件，以下是详细列表：

• fonts
  • iconfont
• images
  • icon.png
  • logo.png
• videos
  • video.mp4
• animations
  • video_spritemap.png
  • video_spritemap.json

总结

general-resources 是一个非常实用的 npm 包，它为我们带来了各种常用资源文件，使得我们不需要再单独下载和管理这些资源了。本文介绍了 general-resources 的安装和使用方法，并列举了包含了哪些资源文件。希望本文可以帮助大家更好地利用 general-resources，提升自己的前端开发能力。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005557481e8991b448d2a11