npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

js-cdn

v0.3.0

Published

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

Downloads

23

Readme

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)