在前端开发中，我们经常需要使用一些资源，如 js、css、图片等。而这些资源通常会托管在服务器上，我们需要通过网络请求将其下载下来。在一些特殊的场景中，如线下演示、局域网开发等，由于网络限制，我们无法将资源从外网获取，这时候就需要一个将资源打包到本地的方案。而这正是本文要介绍的 npm 包 bstaticsrc 所提供的功能。
bstaticsrc 是什么
bstaticsrc 是一个可以将资源打包到本地的 npm 包，支持多种资源类型，包括 js、css、图片等，支持通过配置文件灵活定制，使用简便，适用于线下演示、局域网开发等场景。
安装
通过 npm 安装 bstaticsrc：
$ npm install bstaticsrc --save
完成安装后，在项目目录下新建一个配置文件 bstaticsrc.config.js，并填充以下内容：
module.exports = {
entry: {
'index.js': 'https://cdn.example.com/index.js',
'index.css': 'https://cdn.example.com/index.css',
'logo.png': 'https://cdn.example.com/logo.png'
},
outputDir: './static'
}其中，entry 用于设置需要打包到本地的资源，key 值表示输出文件名，value 值表示资源的在线地址。outputDir 用于设置输出目录，可以是相对路径或绝对路径。
使用
在配置文件填写完成后，通过以下命令执行 bstaticsrc，即可完成资源的打包：
$ bstaticsrc
执行完毕后，资源将按照配置文件中的设置，打包到 outputDir 目录下。
在 HTML 中引入打包后的资源，可以如下进行：
<link rel="stylesheet" href="./static/index.css"> <script src="./static/index.js"></script>
在 CSS 中引入打包后的图片，可以如下进行：
.logo {
background-image: url('./static/logo.png');
}注意事项
- 打包资源的过程需要网络连接，打包后的资源可以离线使用。
- 打包资源的目录应该与 HTML 文件同级，否则在引用资源时需要使用相对路径。
- 打包前需要保证 outputDir 目录存在，否则会报错。
总结
bstaticsrc 提供了一种方便快捷的方式，可以将线上的资源打包到本地，方便在线下演示、局域网开发等场景使用。使用 bstaticsrc 需要注意的事项在上文中已经提到，大家在使用时需要注意。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8cccdc64669dde5449