An overview of the

Screen shot from CDNJS official website

This article mainly introduces: how to submit their own library to CDNJS, submission requirements, detailed submission steps and encountered problems and solutions.

The popular science

To explain what CDN is:

CDN is a content distribution network built on the network. Relying on the edge servers deployed in various places and through the function modules of load balancing, content distribution and scheduling of the central platform, users can obtain the content they need nearby, reduce network congestion and improve user access response speed and hit ratio. The key technologies of CDN mainly include content storage and distribution. — Baidu Baike

In plain English, to speed things up!

Common free CDN such as UNPkg and CDNJS. Unpkg will pull everything in NPMJS, which means it will do the CDN for everything you submit to NPMJS. In the words of the official website:

unpkg is a fast, global content delivery network for everything on npm.

But at home sometimes the speed is touching. At this time we have to mention CDNJS, what are the advantages of this product? Is the commonly used CDN in China, such as:

  • BootCDN
  • Baidu CDN
  • Strange dance CDN
  • … Almost all of them will go to CNDJS to synchronize data. Yes, as long as you publish to CDNJS, you have a lot of domestic CDNS, you deserve it.

One of his minor drawbacks is that submitting advantages is troublesome.

Let’s read CONTRIBUTING. Md first. (Of course, you don’t have to read it, because I’ve covered the necessary steps in this article.)

A necessary condition for

If you want to submit your own library to CDNJS, the following conditions must be met.

  • Make sure it’s not a personal project.
  • There are over 200 stars on Github or at least 800 downloads per month in NPM Registry.
  • There must be at least one official publicly accessible repository and open source license

usepackage.jsonAdd a new filelibrary

The Fork warehouse

  • Fork Fork warehouse

First fork into your own account on CDN’s Github homepage. If you have multiple accounts or organizations, there will be a popup where you can select the target of the form. The official CDNJS tutorial lets you clone locally, and he specifically recommends using sparse checkout because of the size of the repository (around 65 GB), but that’s still 2GB. It’s a little too big, so I’ll just do it on the web.

  • To Create a Branch named after your library, click the Branch: Master drop down box, enter the name of the library you want to add, and click the “Create Branch from master” button.

    Create a branch

  • Go to the Ajax /libs folder

Local preparation

Then prepare a resource file locally named after your library (rsuite as an example).

  • inrsuiteDirectory created in the root directorypackage.jsonFile, as follows
{" name ":" rsuite ", "filename" : "rsuite. Min. Js", "version" : "3.0.0 - alpha", "description" : "A suite of react components", "homepage": "http://rsuitejs.com/", "keywords": [ "react", "rsuite", "component", "react-component" ], "author": "Simon Guo <[email protected]>", "license": "MIT", "repository": { "type": "git", "url": "[email protected]:rsuite/rsuite.git" }, "npmName": "rsuite", "npmFileMap": [ { "basePath": "dist", "files": [ "**/*" ] } ] }Copy the code
  • Place other files that need to be synchronized to the CDN in this directory

Field Description:

"Files" : "* * /! (*. + (flow | SCSS))" / / *. Ruled out flow and *. SCSS document]Copy the code

Pay attention to:

It is best to use this piece directly from your ownpackage.jsonDocuments, but don’t give them awayfiles,dependencies,peerDependenciesThis type of field submission.

Failed the test

The above Settings are automatically updated from NPM, but if you want to update from Git, refer to the instructions

  • Then put in the files you need to uploadrsuiteFolder.

    My resource display

Do not include version numbers in resource files. Multiple versions are separated by folders

# Bad name rsuite.3.0.0.min.js # Good name rsuite.min.jsCopy the code

In addition, UglifyJs is recommended for compression of JS files. Or you can use web-minify-Helper (which I haven’t).

Uploading resources

Go directly to your warehouse pageajax/libsPath, just drag your folder into it. (The documentation says clickUpload FileButton, but not found.

File Uploading Interface



Add LibrayName@version w/ npm auto-update



                                                    
Add [email protected] w/ npm auto-update


                                                Copy the code

Submit Issues

After submitting Issues, add the [Request] field in the title because it is a Request, or add the [Author] field if you are the Author (or major contributor). Such as:


                                                    
[Request] [Author] Add rsuite.js


                                                Copy the code

As follows:


                                                        
**Library name:** rsuite
**Git repository url:** [rsuite/rsuite][git-repository-url]
**npm package name or url** (if there is one): [npmjs.com/package/rsuite][npm]
**License (List them all if it's multiple):** [MIT][license]
**Official homepage:** [http://rsuitejs.com/][homepage]
**Wanna say something? Leave message here:** N/A


[license]:https://github.com/rsuite/rsuite/blob/master/LICENSE
[git-repository-url]: https://github.com/rsuite/rsuite
[homepage]:http://rsuitejs.com/
[npm]:https://www.npmjs.com/package/rsuite


                                                    Copy the code

translation

** [rsuite/rsuite][git-repository-url] ** NPM ** (if there is one): [npmjs.com/package/rsuite][NPM] ** License :** [MIT][License] ** Official homepage :** [http://rsuitejs.com/][homepage] * * want to say what the other, leave A message here: * * N/A (license) : https://github.com/rsuite/rsuite/blob/master/LICENSE/git repository - the url: https://github.com/rsuite/rsuite [homepage]:http://rsuitejs.com/ [npm]:https://www.npmjs.com/package/rsuiteCopy the code

Free interface

Submit a Pr

Be sure to use pull_request_template.md!! Please be sure to fill in carefully!! Translation:

Issue #12712: Note that if you are using a repository or package for distribution purposes, please also provide the URL and other relevant information, such as the source repository or popularity of the package. Git repository url (mandatory) : * official site address (optional) : * NPM repository address (optional) : * Authorization: * GitHub/Bitbucket popular (mandatory) : - Tracker number: NPM Download Statistics (optional) : - Yesterday download times: - last week download times: - last month download times: # Necessary check item * [] I am the author of this library * [] I would like to add CDNJS related links to my website or repository * [] This lib does not appear in CDNJS * [] There are no duplicate problems/merge requests * [] this lib There is notable awareness * [] more than 200 [stars/followers/spinoffs] on GitHub/Bitbucket * [] more than 800 downloads per month on NPM * [] The project has been published on a well-known platform (or on The git auto-update checklist * [] indicates that the git auto-update checklist * [] indicates that the git auto-update checklist * [] indicates that the git auto-update checklist * [] indicates that the git auto-update checklist * [] indicates that the git auto-update checklist * [] indicates the git auto-update checklist The first line of the commit checklist is less than 50 words long and is clear and understandable. * [] Replicated CDNJS repositories are not older than 3 days * [] Merge requests are from a non-master and meaningful branch * [] There are unrelated changes to separate * [] There are redundant changes to merge through rebase into a * [] there are at commit "Message" refers to the corresponding problem to make it automatically shut down * [] refers to the corresponding problem in the commit messageCopy the code

After that, there are two audits, the first robot audit, and then a human audit. This is my Pull Request

Correct mistakes

When there are mistakes, you have a bit of a tragedy. Because CONTRIBUTING. Md agreed:

  1. Don’t submit irrelevantcommit log.
  2. If you want to modify the submission, usegit commit --amend / git rebaseCommand to update your submission.

    However,githubThere’s no way to do this online,Changing a commit message.

    That’s when you need to pull the warehouse locally. At this point, please usegit-sparse-checkoutThe pull. The steps are as follows:
    Git config core. SparseCheckout true # Set what you want to check out Git /info/sparse-checkout # echo '/ libs/rsuite/*' >>. Don't know if individual phenomenon) git remote add origin https://github.com/rsuite/cdnjs.git # branch switch to rsuite branch git checkout - b # rsuite pull git Pull Origin rSuite --depth 10 # As a result of the network speed touching, the suggestion sleeps in the evening hang up to pull, or pull to the server to pull back again first. (I played for more than 3 hours, just for your reference)Copy the code

The last thing that comes down is du minus d minus 1 minus h

6.4g./.git 3.6m./ Ajax 40K./.idea 6.4g.

6.4g is fine.

Then it is time to revise the content and submit it again for manual review.

After a lengthy review, the RSuite was finally submitted to the CDNJS address. Welcome to use rSuite, I believe that in a short time, you can use the major domestic CDN to introduce rSuite.

React Suite is an open source UI component library from the HYPERS front-end team and UX team that helps you quickly build an enterprise application.

Visit our website at rsuitejs.com