ライブラリをcdnjs（バージョン2022）に送信します

プロデューサーの考え方を持っています。ただ消費者になるのではなく、それを教義として使用し、それを見つけることができないときは世界が完璧ではないことに憤慨します。

バックグラウンド

cdnjsは優れたオープンソースソフトウェアCDNサービスであり、有名なbootCDNはその国内ミラーです。したがって、cdnjsに送信した後、bootCDNを介してアクセスできます。

2か月以上前にwangEditor5 （オープンソースのリッチテキストエディター）をリリースしました。最初はjsDelivrをCDNサービスとして使用していましたが、しばらく前に亡くなりました。今unpkgを使用して、1〜2年前に不安定だった時期を漠然と覚えています。

そこで、wangEditor5をcdnjsに同期させたいと思います。しかし、情報を探しているときに中国語版が見つからなかったか、数年前に古くなっていたため、githubから英語の情報を見つけて、他の人が参照できるように翻訳しました。

2020年以前の方法は適用されなくなりました

cdnjsは2年前にコミットメソッドの更新を行ったため、古いものをたくさん持つことはできません。

それはおそらく意味します：

cdnjs / cdnjsウェアハウスは現在、ロボット操作（一部の自動操作）に制限されており、プルリクエストを受け付けなくなりました。それでもcdnjsにリポジトリを送信したい場合は、cdnjs/packagesまたは他のオープンソースリポジトリに移動できます。

実際、cdnjs / packagesには、この記事で翻訳されるコンテンツである最新の送信ルールがあります。

翻訳を開始

元のリンクgithub.com/cdnjs/packa…

ドキュメントディレクトリ

• 概要
• ポリシー、ルール、ガイダンス
• 配置 lib 自动更新
  • 自动更新概述
  • 自动更新配置
• 配置文件优化
• 在 cdnjs 创建新 lib
  • fork cdnjs 仓库
  • 修改你的 fork
  • 遵循已有 lib 的规则
  • 使用浏览器修改
  • 创建 pull request
  • 修复 CI 报错
  • 审查与合并

概述

cdnjs/packages 是一个 github 仓库，其中包含了很多 JSON 文件，它们控制着各个 lib 在 cdnjs.cloudflare.com 的可访问性。

cdnjs 依赖于用户提交 pull request 和自动更新的方式，来收集和更新 lib 。它包含很多贡献者和提交记录，所以通过正确的程序来提交 lib 是至关重要的。

以下两种形式的 lib 可被配置为自动更新（如何配置下文再说）

• 日常在 npm 上维护的
• github 仓库，且有 tag 和 release 的

那些无法自动更新的 lib 将不再被 cdnjs 支持。

政策、规则和引导

cdnjs 可以托管任何生产版本的 JS 和 CSS lib，只要有合适的 license 。

cdnjs 支持常见的文件格式，如 JS, TS, CSS, SCSS, JSON, WASM, SWF, images, audio ，所有的文件格式参考这个 API api.cdnjs.com/whitelist 。

【注意】cdnjs 对新提交的 lib 有如下要求，符合一个即可：

• npm 下载量 800+ 每月
• github 仓库有 200+ star

配置 lib 自动更新

自动更新概述

日常在 npm 维护的包，以及在 github 有 tag release 的仓库，可以被配置为自动更新。一个 cdnjs 的脚本会定期运行（每小时一次），检查相应的 npm 包或 github release 是否有新的版本发布，并更新到 cdnjs 中。

每一个 cdnjs 都有一个 JSON 文件，其中包含了该 lib 的一些信息。自动更新就配置在这个 JSON 文件里，和其他配置信息在一起。

自动更新配置

• autoupdate 一级属性，包含了所有自动更新的配置
  • source 如果是 npm 包则为 npm ，如果是 git 仓库则为 git
  • target npm 的名称，后者 git 仓库的 url
  • fileMap 数组或者对象，告诉 cdnjs 应该拷贝哪些文件
    • basePath 要拷贝文件的根目录
    • files 要拷贝的文件名，可以直接写名字（如 lodash.min.js）也可以用 *.js 形式

PS：如果在 files 中使用通配符，请一定严格填写，不要把一些无用的文件也包含进来，避免造成浪费。

npm 包 自动更新 配置示例

  "autoupdate": {
    "source": "npm",
    "target": "function-plot",
    "fileMap": [
      {
        "basePath": "dist",
        "files": [
          "*.js",
          "utils/*.js"
        ]
      }
    ]
  }

示例中 function-plot 包的目录结构如下

|__dist
| |__function-plot.js
| |__utils
| | |__plotter.js
|__bower.json
|__index.js
|__site.js
|__package.json
|__README.md
|__lib
| |__...
|__node_modules
| |__...
|__sandbox
| |__...

根据配置规则，自定更新程序将定位到 dist 目录（你在 basePath 配置了），然后拷贝其中的 *.js 和 utils/*.js（你在 files 中配置了）到 cdnjs 中。再去掉 dist 目录，最终的 cdnjs 的文件目录如下

|__ajax
  |__libs
    |__function-plot
      |__x.y.z
        |__function-plot.js
        |__utils
          |__plotter.js

其中 x.y.z 是版本号，和包的 package.json 文件中版本一致。

git 仓库 自动更新 配置示例

  "autoupdate": {
    "source": "git",
    "target": "git://github.com/mikehostetler/amplify.git",
    "fileMap": [
      {
        "basePath": "lib",
        "files": [
          "*.js"
        ]
      }
    ]
  }

配置中的这个 git 仓库有代码结构如下

|__demo
| |__...
|__docs
| |__...
|__external
| |__...
|__lib
| |__amplify-vsdoc.js
| |__amplify.core.js
| |__amplify.core.min.js
| |__amplify.js
| |__amplify.min.js
| |__amplify.request.js
| |__amplify.request.min.js
| |__amplify.store.js
| |__amplify.store.min.js
|__src
| |__...
|__test
| |__...
|__.gitignore
|__.jshintrc
|__GPL-LICENSE.txt
|__MIT-LICENSE.txt
|__bower.json
|__build.json
|__header.js
|__package.json
|__readme.md
|__test-jquery-versions.js
|__test-server.js
|__testswarm.json

根据配置规则，自定更新程序将定位到 lib 目录（你在 basePath 配置了），然后拷贝其中的 *.js （你在 files 中配置了）到 cdnjs 中。再去掉 lib 目录，最终的 cdnjs 的文件目录如下

|__ajax
  |__libs
    |__amplify
      |__x.y.z
        |__amplify-vsdoc.js
        |__amplify.core.js
        |__amplify.core.min.js
        |__amplify.js
        |__amplify.min.js
        |__amplify.request.js
        |__amplify.request.min.js
        |__amplify.store.js
        |__amplify.store.min.js

其中 x.y.z 是版本号。

配置文件优化

默认情况下，当有新文件被自动更新进来时，cdnjs 会对特定文件进行压缩。对于 JS CSS 文件，cdnjs 会压缩代码生成 filename.min.js 和 filename.min.css 文件。对于图片文件，cdnjs 也会进行压缩处理，以节省 CDN 的带宽。

如果你想禁用这个功能，你可以通过在 JSON 文件中配置 optimization 来控制。这个配置是可选的。示例如下：

"optimization": {
    "js": false,
    "css": false,
    "png": false,
    "jpg": false
  }

在 cdnjs 创建新 lib

流程概述

• Fork cdnjs/packages 仓库到你自己的 github 账户
• 对这个仓库进行必要的修改
• 提交一个 pull request 并附加合适的信息
• 带 PR 合并之后，删除掉你 fork 的仓库

Fork cdnjs/packages 仓库

通过 github.com/cdnjs/packa… 来 fork 仓库到你自己的 github 账号，然后你就有如下仓库了 github.com/your-github… 。

PS：请注意你 fork 的是 cdnjs/packages 而不是 cdnjs/cdnjs ，后者现在不再受理 pull reqeust

修改信息

在你 fork 的仓库中修改信息，这些信息将被提交 pull request ，最后会被 cdnjs 维护人员审查、合并。

修改信息可以通过浏览器，也可以使用 git 下载到本地…… （译者：最基本的 git 操作，这里就不说了）

译者注：
这里所说的“修改信息”，应该就是在 packages 这个仓库中，选择一个合适的文件夹（根据 lib 首字母），增加自己包的 JSON 文件，文件格式参考现有的即可，例如这个 jQuery.x18n.json 。

遵守已有 lib 的规则

新しいlibを送信するときは、既存のlibの名前と形式、できれば新しく追加されたlibのJSON形式を参照してください。

ブラウザを使用して変更する

Githubは、Webページ上のファイルを追加および変更するのに便利であり、このシナリオに非常に適しています。

フォークリポジトリのこのディレクトリgithub.com/your-github…に移動し、適切なフォルダに移動して（libイニシャルに従って）、新しいJSONファイルを作成します。ファイル形式は既存のものを参照します。

プルリクエストを作成する

ファイルを追加した後、コミットを送信してプルリクエストを作成できます。

コミット情報は、cdnjsの担当者が確認するのに便利な次の標準形式に従う必要があります:(
Add <lib 的名字> w/ npm/git auto-update自分で1つ選択してnpm/gitください）

コミットの説明は必要ありません。

ブランチにコミットする代わりにmaster、適切なブランチ名で新しいブランチを作成することを選択することに注意してください。add-my-lib-name

最後に、プルリクエストを作成するだけで、cdnjsスタッフができるだけ早くレビューします。

CIエラーを修正

送信されたJSONファイル形式の正確性と正しい自動更新構成を保証するために、PR中にCI（githubアクション）が自動的にトリガーされます。

CIがJSONファイルをチェックするか、誤って構成されている場合、失敗としてマークされます。この時点で、JSONファイルを再編集して再送信する必要があります。

レビューとマージ

CIチェックが成功した場合、cdnjsの担当者は引き続きPRコンテンツを手動で確認して、問題がないことを確認します。

手動レビューに問題がない場合は、PRがマージされ、以前にフォークされたリポジトリを削除できます。

cdnjsにご協力いただきありがとうございます。

翻訳は終了します

最後に、wangEditor5オープンソースのリッチテキストエディタを使用することを歓迎します。