本文用于记录使用 npm 做静态资源库的方法。包括直接使用命令行创建上传以及利用 GitHub 上传（本站主要使用方案）。如只同步部分资源，可以直接查看同步部分文件。

npm 资源目前直接访问较慢，使用CDN访问会好很多。本站目前用的是 cdn.cbd.int ，根据自己的需要选择不同的 CDN节点

前言

  1. 本文是默认已完成注册 npm 账号； GitHub 已建好仓库。
  2. 不同地区、网络访问CDN节点速度都不一样，且部分CDN节点并不同步全部的仓库，可能无法访问。建完后可以逐一尝试合适的CDN节点。
  3. npm的包名必须全小写。

命令行上传

  1. 初始化npm设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # 移动到需要上传npm的目录
    cd $NPM_PATH

    # 切换回npm原生源
    npm config set registry https://registry.npmjs.org

    # 仅第一次使用需要添加用户，之后会提示你输入你的npm账号密码以及注册邮箱
    npm adduser
    # 非第一次使用直接登录即可，之后会提示你输入你的npm账号密码以及注册邮箱
    npm login

    # npm初始化
    npm init

    执行上述代码后会出现以下图片，填写相关内容后确认会生成文件 package.json
    npm初始化

  2. 上传

    1
    npm publish

    执行上述代码后无错误信息记成功上传到npm库

  3. 使用 npm CDN节点 检查是否能正常访问

GitHub上传

本文主要使用GitHub的手动触发执行action，执行时填写对应的版本号即可。如需要其他触发方式，可以自行修改代码中的 on: 部分

  1. 在GitHub仓库中的 .github/workflows/npm-publish.yml 填入以下代码

    .github/workflows/npm-publish.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    name: Node.js Package

    on:
      workflow_dispatch:
        inputs:
          version:
            required: true
            type: string

    jobs:
      publish-npm:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
            with:
              token: ${{ secrets.GITHUB_TOKEN }}
              # If your repository depends on submodule, please see: https://github.com/actions/checkout
              submodules: recursive
          
          - uses: actions/setup-node@v3
            with:
              node-version: 16
              registry-url: https://registry.npmjs.org/

          - name: Cache NPM dependencies
            uses: actions/cache@v4
            with:
              path: node_modules
              key: ${{ runner.OS }}-npm-cache
              restore-keys: |
                ${{ runner.OS }}-npm-cache

          - name: Install Dependencies
            run: npm install

          - name: Build
            run: npm run build

          # 按需填写json内容
          - name: Create package json
            run: |
              mkdir npm_workdir
              cat <<EOF > npm_workdir/package.json
              {
                "name": "tidnotes-blog",
                "version": "${{ inputs.version }}",
                "description": "Blog static file from @小TiD笔记",
                "author": "Tidra(@小TiD笔记)",
                "license": "MIT"
              }
              EOF
              cat npm_workdir/package.json
          
          # 移动需要的文件到npm_workdir
          - name: Move Files
            run: |
              mkdir npm_workdir/img
              mkdir npm_workdir/css
              mkdir npm_workdir/js
              mkdir npm_workdir/json
              mkdir npm_workdir/code
              cp -a public/img/* npm_workdir/img/
              cp -a public/css/* npm_workdir/css/
              cp -a public/js/* npm_workdir/js/
              cp -a public/json/* npm_workdir/json/
              cp -a public/code/* npm_workdir/code/

          - run: npm ci
          - run: npm publish
            env:
              NODE_AUTH_TOKEN: ${{secrets.npm_token}}
            working-directory: ./npm_workdir

  2. 选择仓库中的 action → Node.js Package → Run workflow，选择分支，填写版本号运行即可。
    具体的手动触发方式可以参考 GitHub说明

npm-github-action

CDN节点

目前常用的CDN节点如下，按需要测试取用，后续会持续更新。

CDN节点 说明 地区 速度 备注
https://unpkg.com/:package@:version/:file unpkg自建 国际 一般
https://cdn.cbd.int/:package@:version/:file unpkg自建 国际 较快
https://gcore.jsdelivr.net/npm/:package@:version/:file jsd出品 国际 一般
https://fastly.jsdelivr.net/npm/:package@:version/:file jsd出品 国际 较慢
https://cdn.jsdelivr.us/npm/:package@:version/:file 泽瑶CDN 国际 一般
https://www.jsdelivr.ren/npm/:package@:version/:file 泽瑶CDN 国内 一般
https://jsd.onmicrosoft.cn/npm/:package@:version/:file 渺软CDN 国内 较快 回源jsd
https://npm.onmicrosoft.cn/:package@:version/:file 渺软CDN 国内 较快 回源unpkg
https://npm.elemecdn.com/:package@:version/:file 饿了么 国内 未知 非所有库同步
https://code.bdstatic.com/npm/:package@:version/:file 百度出品 国内 未知 非所有库同步
https://unpkg.zhimg.com/:package@:version/:file 知乎出品 国内 未知 非所有库同步
https://registry.npmmirror.com/:package/:version/files/:file 淘宝镜像源 国内 未知 需要手动同步模块，cnpm sync 包名
https://jsd.cdn.zzko.cn/npm/:package@:version/:file 泽瑶CDN 国内 较快

关于如何同步部分文件

同步部分文件可以设置 .npmignore 、.gitignore 和 package.json 中的 files 字段。

优先级关系：package.json > .npmignore > .gitignore

  1. .npmignore 和 .gitignore：

    • 在静态资源目录添加.npmignore 和 .gitignore 文件，并添加需要忽略的文件。
    • 默认会忽略以下文件：
      • .*.swp
      • ._*
      • .DS_Store
      • .git
      • .hg
      • .npmrc
      • .lock-wscript
      • .svn
      • .wafpickle-*
      • config.gypi
      • CVS
      • npm-debug.log
    • 无法忽略以下文件：
      • package.json
      • README(and its variants)
      • CHANGELOG(and its variants)
      • LICENSE/LICENCE

  2. package.json 中的 files 字段：

    • files 字段可以指定需要发布的文件。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      {
        ...,
        "files": [
          "img/",
          "css/",
          "js/",
          "json/"
        ],
      }