npm 包 @fiblan/assets-service 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常会使用到各种图片、音频、视频等静态资源。如何统一管理、访问这些资源并在项目中使用，是一个需要解决的问题。@fiblan/assets-service 正是解决这个问题的 npm 包。

安装和使用

可以通过 npm 命令行工具来安装 @fiblan/assets-service：

npm install @fiblan/assets-service

安装成功后，在项目中引入 @fiblan/assets-service：

import assetsService from '@fiblan/assets-service'

const assetURL = assetsService.getAssetURL('images/logo.png')

getAssetURL 方法可以返回资源的 URL 地址，供前端代码使用。

配置

在使用 @fiblan/assets-service 之前，需要在项目中进行配置。可以通过以下方式创建配置文件：

mkdir .fiblan
cd .fiblan
touch config.js

然后在 config.js 中添加以下配置：

module.exports = {
  bucket: 'my-bucket',
  accessKeyId: 'my-access-key-id',
  accessKeySecret: 'my-access-key-secret',
  region: 'oss-cn-hangzhou',
  domain: 'https://example.com/',
  path: 'assets/',
}

这些值需要根据实际情况进行填写和修改。其中，

bucket：存储资源的阿里云 OSS 存储桶名称
accessKeyId：阿里云 AccessKeyId
accessKeySecret：阿里云 AccessKeySecret
region：存储资源的 OSS 存储桶所在地域
domain：可通过 CDN 访问的资源域名（可选）
path：存储资源的路径前缀（可选）

示例

下面是一个完整的示例，用于获取一个图片资源的 URL 并在页面中展示：

import assetsService from '@fiblan/assets-service'

assetsService.init().then(() => {
  const image = new Image()
  const url = assetsService.getAssetURL('images/logo.png')
  image.src = url
  document.body.appendChild(image)
})

在页面中展示了一个带有图片的 Logo。

总结

@fiblan/assets-service 可以方便地管理、访问静态资源，并且支持使用阿里云 OSS 存储和 CDN。通过本文的介绍，您可以初步了解该 npm 包的基本用法和配置方法，并通过示例代码加深理解。

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