Creating and publishing a small and beautiful NPM package is not as hard as you think!

Today, I came up with the idea of releasing my own NPM package. Then I searched for tutorials on the Internet, and finally found this article: Creating and publishing a small and beautiful NPM package is not as difficult as you think. “, then follow the tutorial and start hand in hand.

Git: gitee.com/wongest/ima…

NPM: www.npmjs.com/package/ima…

Create an NPM account

Click here to register

After creating the account, you need to confirm by clicking the email in the registered mailbox, otherwise 403 will be reported as not having permission after pushing the package.

After creating an account, log in to the cli

$ npm login
Copy the code

How do I check whether I am logged in?

$ npm whoami
Copy the code

The initial NPM package

Create a new file, give it a name you like: image-color-tool, and create package.json

package.json

{
  "name": "image-color-tool"."version": "1.0.0"."description": "Image color manipulation"."main": "index.js"."repository": "https://gitee.com/wongest/image-color-tool"."keywords": [
    "image"."color"]."author": "Jenny Wong"."license": "ISC"
}
Copy the code

Description:

  • Repository: typically git’s location
  • Main: Entry to commonJS module, introduced using require syntax
  • Keywords:

release

$ npm publish --access=public
Copy the code

Public indicates that this is a public NPM package

Realize the function

Create a new index.js file in the package.json directory

index.js

export const getImageColor = () = > {
  // ...
}
Copy the code

Make sure that main in package.json points to the index.js file

Then push the package again, change the version number before pushing the package, and then push the package again

$ npm publish
Copy the code

README.md

After completing the above operations, the basic functions of our NPM package are realized. We can also see the package we created in NPM, but the NPM website is empty, we need to make a documentation

Create the readme.md file in the root directory

This is a screenshot from my NPM

The two image-color-tool and minified tags are inwww.shields.io/The generated

When you’re done pushing the package again, the NPM website will show what’s on your readme.md

Turn es6 es5

loading…