使用npm做静态资源库

本文用于记录使用 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
   

2. 上传

   1	npm publish

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

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

GitHub上传

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

1. 在GitHub仓库中的 .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 publ/cdn.tidnotes.top/npm/[email protected]/img/* npm_workd/cdn.tidnotes.top/npm/[email protected]/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说明

CDN节点

目前常用的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/" ], }