js-cdn

0.3.0 • Public • Published

JS-CDN

自建前端静态JS资源库CDN服务。

自建CDN服务,资源及版本可控。放在阿里云OSS上,“稳定又可靠”。 反正我信了

Why?

前段时间,总有用户反馈公司的产品页面打不开或报错,经排查发现是jsDelivr服务在国内部分区域是无法访问的。(弃用unpkg)

以前也有遇到由于公共CDN访问不了导致的问题,辗转国内的CDN服务,也有很多问题:1. 资源不全;2. 有时访问慢;3. 还有更换访问域名的。

真要了老命,蹭着公司的阿里云OSS服务,那就自己动手吧。

优点:

  1. 对于懂与不懂技术的领导,都方便甩锅:阿里云都挂了,我能怎么办 ┓( ´∀` )┏

缺点:

  1. 至于自建服务的缺点,那可就太多了... 硬盘空间不够写了🤪
  2. ......

jsDelivr 访问不了对国内用户的伤害真的太大了,估计很多国人的图床服务都是通过 jsDelivr 加速的 (包括本人),毕竟免费又快速。

Installation

npm install js-cdn

Usage

方式一

import CDN from "js-cdn"

new CDN(
  [
    'react',
    {
      name: 'vue',
      version: '>= 2.6.10 < 2.6.15'
    },
    {
      name: 'jquery',
      version: ['1.9.1', '1.12.4', '3.6.0']
    }
  ],
  {
    destination: './dist',
    upload: './.oss-sync.json',
    queryFn(error, lib) {
      if (error) {
        console.log(`query success : ${lib.name}@${lib.version}`)
      } else {
        console.log(`query failed : ${lib.name}@${lib.version}`)
      }
    },
    downloadFn(error, lib) {
      if (error) {
        console.log(`download success : ${lib.name}@${lib.version}`)
      } else {
        console.log(`download failed : ${lib.name}@${lib.version}`)
      }
    }
  }
).exec().then(data => {
  console.log('success ... ')
}).catch(error => {
  console.log('error ... ')
})

// 或者
new CDN('vue', {
  destination: './dist'
}).exec()

方式二

import { query, download, manifest, upload } from "js-cdn"

const dest = './dist' // 下载文件目录

async function getLib(lib) {
  // 1. 查询库文件
  const { files } = await query(lib, (error, lib) => {})
  // 2. 下载库文件
  await download(files, dest, (error, lib) => {})
  // 3. 生成 manifest.json
  await manifest(dest)
  // 4. 上传至 OSS 服务器
  await upload({
    source: "./dist",
    dest: "uploads/libs",
    bucket: "",
    accessKeyId: "",
    secretAccessKey: "",
    endpoint: ""
  })
}

// 同步 jquery最新版本
getLib('jquery')

// 同步 vue [2.6.12, 2.6.13, 2.6.14]
getLib({
  name: 'vue',
  version: '>= 2.6.12 < 2.6.15'
})

API

const cdnJS = new CDN(lib, options)
cdnJS.exec()
  • lib: string | object | array js库
    • name: string js库名
    • version: string | array | function | RegExp 指定js库版本,支持 semver
  • options: object
    • source: string 数据源
    • destination: string 文件目录
    • upload: object OSS上传配置
      • source: string 同步到 OSS 上的目录
      • dest: string OSS bucket 上的目标位置
      • accessKeyId: string OSS accessKeyId
      • secretAccessKey: string OSS secretAccessKey
      • endpoint: string OSS 实例
      • bucket: string bucket 名
      • incrementalMode: boolean 是否使用增量模式,在增量模式的情况下 oss-sync 将只会上传那些新增和修改过的文件
      • headers: object 可配置上传文件的 HTTP 头设置,具体请参考OSS文档
    • queryFn(error, lib) 查询js库回调
    • downloadFn(error, lib) 下载js库文件回调
    • uploadFn(error) 上传回调

methods :

import { query, download, manifest, upload } from "js-cdn"

// 查询 js库文件
query(lib, callback)

// 下载 js库文件
download(lib, dest, callback)

// 生成 manifest.json
manifest(dest)

// 上传至OSS服务器
upload(config, callback)

Package Sidebar

Install

npm i js-cdn

Weekly Downloads

4

Version

0.3.0

License

MIT

Unpacked Size

19.8 kB

Total Files

8

Last publish

Collaborators

  • mengqing723