最近在研究自己的博客的时候,发现自己大部分的资源使用的都是Tianli提供的cdn,一直使用他人的东西总感觉有点不好,所以查了下,发现可以自己发包到npm,这样子就可以使用自己的资源啦,不过有时候不稳定,不过反正是白嫖的,要求就不要那么高啦。

注册

注册这种东西,说实话只要玩过电脑,注册过一些网站应该都会,这里就不做介绍了吧(其实就是我比较懒!)。

注意:jsDelivr+npm 有 100MB 包大小限制

发包流程

当你注册好了之后就是直接使用啦,还是比较简单的。

  1. 新建一个文件夹,里面放你需要上传的所有资源文件,新建的文件夹名字随意,这个与后续的发包名字没有任何的关系,只要自己了解就可以了。

  2. 在新建的文件夹里面使用git bash打开。

  3. 初始化一个npm仓库

    1
    npm init
  4. 使用如下命令发布。

    1
    npm publish
  5. 接下来就会让你配置各种信息了,基本信息如下。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    #npm包名称
    package name:sarakale-assets
    #版本号
    version:1.0.0
    #描述,可以不写
    description:我的个人仓库
    #入口点,默认即可
    entry point:
    #测试命令,默认即可
    test command:
    #关联的github仓库,也可以不写
    git repository:
    #关键词,也可以不写
    keywords:
    #作者名
    author:sarakale
    #许可证,默认即可
    license:
  6. 最后就是静待发布成功了,在发布成功后,会通过你一开始注册绑定的邮箱通知你成功了。

    如果发现发布失败了,就需要再次发布了,一般太大了可能就会失败。

  7. npm更新每次要输入npm publish很麻烦的话,可以在package.json修改version版本号,然后输入以下命令即可。

    1
    npm version patch

资源使用

基本使用如下

https://npm.elemecdn.com/npm包名@版本号/source/css/waterfall.min.js

npm包名就是你前面自己输入的包名,如果忘记了可以去自己的仓库查看或者查看本地的package.json文件里面的name后面的名字。

包名版本号后面的路径就是你本地新建的文件的里面每个资源对应的路径。

1
2
3
https://npm.elemecdn.com/npm包名@版本号/source/css/waterfall.min.js
例如:
https://npm.elemecdn.com/jayhrn-hexosource@1.2.0/source/js/waterfall.min.js

npm的节点有很多,可以任意挑一个使用。目前的节点如下:

1
2
3
4
5
6
#百度节点
https://code.bdstatic.com/npm/:package@:version/filelocation
#饿了么节点,回源是Unpkg
https://npm.elemecdn.com:package@:version/filelocation
#饿了么节点,回源是jsdelivr
https://shadow.elemecdn.com/npm/:package@:version/filelocation

也可以利用unpkg自建。使用如下:

1
https://unpkg.com/:package@:version/filelocation