Publish your own toolkit notes using NPM

1、 Register login NPM account number

• Sign up for a npm account number , Address ：npm Registered address
• If you already have npm Log in with your account , Address ：npm The login address
• You also need to enter npm One time password sent to your email

• Entering the main interface will give you a 2FA Tips for two factor validation , You can ignore

2、 establish NPM engineering

• 1、 Create a new folder (genius-storage)
• 2、 initialization npm engineering , Generate a package.json Package management profile for

npm init  
// or
npm init -y

• 3、 Get into genius-storage File root , You can see package.json Package management file , Here you can according to your situation , Make corresponding modifications .

{
    
  "name": "genius-storage", //  Package name , Must be unique 
  "version": "1.0.0", //  Version number 
  "author": "geniusman", //  author 
  "description": "A user-friendly browser cache tool", //  Description information 
  "keywords": ["localStorage",
    "sessionStorage",
    "cookie",
    "utils"], //  key word , promote SEO
  "repository": {
    
    //  Code hosting location 
    "type": "git",
    "url": "https://github.com/geniusmanyxh/genius-storage"
  },
  "license": "ISC", //  license 
  "homepage": "https://www.geniusman.top/#/browseBlog?id=70", //  Package home page or document home page 
  "bugs": "https://github.com/geniusmanyxh/genius-storage/issues", //  User question feedback address 
  "main": "index.js", //  Entrance file 
  "scripts": {
    
    //  Store executable scripts 
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    
    //  Operational dependency 
  },
  "devDependencies": {
    
    //  Development depends on 
  }
}

• 4、 Start writing your tools

// GStorage.js  Specific implementation code file 
/** * @description  According to the storage type passed in by the user and the corresponding configuration , Return the instance and method of the corresponding storage type  * @param {String} storageType  Select the storage type ：local | session | cookie * @param {Object} storageOptions  Optional configuration parameters  * @returns  Return an operable (LocalStorage | SessionStorage | Cookie) Instance object  */
 export const GStorage = (storageType, storageOptions) => {
    
   Your code logic , I have too many here , Just use the ellipsis ...
 }

// index.js  Entrance file 
import {
     GStorage } from './GStorage.js'

export {
     GStorage }

3、 take NPM Upload the engineering code GitHub

• 1、 stay GitHub Create a code warehouse on genius-storage
• 2、 Use git Upload your local code

git init
git add .
git commit -m "first commit"
git branch -M master
git remote add origin https://github.com/geniusmanyxh/genius-storage.git
git push -u origin master

4、 Publish your NPM Project to NPM Official website

• 1、 Check npm Mirror address , If it is Taobao image address , You need to change back to npm Mirror address

//  see npm Mirror address 
npm config get registry

//  If it is ：https://registry.npm.taobao.org/
//  Switch npm Mirror source , by npm Official mirror address 
npm config set registry https://registry.npmjs.org/

• 2、 Switch to the project directory in the terminal , Run the login command , Then enter the user name according to the terminal prompt 、 Password and other information

//  land 
npm login

//  The console will prompt for relevant information 
Log in on https://registry.npmjs.org/
Username:  //  user name 
Password: //  password 
Email: (this IS public) //  mailbox 
Enter one-time password: //  If you've done it before   Two factor authentication  (2FA), Need to generate a one-time key 
Logged in as xxx on https://registry.npmjs.org/.

• 3、 function npm command

//  command 
npm publish

• 4、 After publishing successfully , You can log in npm Website , Check the release package
  

5、 The test uses the NPM package

• 1、 Install the toolkit you released

npm i genius-storage

• 2、 After installation, it can be installed in your node-modules The following files are found in the directory
  

• 3、 Examples of project use ：

import {
     GStorage } from "genius-storage";

const gLocal = GStorage('local')

gLocal.setFun('key',{
    value:1})
gLocal.getFun('key')

6、 Update your post NPM engineering

• 1、 If you update your project , It needs to be reissued , Remember to commit Your code , Otherwise, it will report a mistake

//  Automatically change the version number , also commit
// npm version xxx

//  The console will return the next minor version number   Such as v1.0.0 ===> v1.0.1
npm version patch

//  Re release 
npm publish

• 2、 According to the function and version gap you modified , To change your version number

// patch： Patch number , Repair bug, Small change , Such as  v1.0.0->v1.0.1
npm version patch

// minor： Sub version number , Add new features , Such as  v1.0.0->v1.1.0
npm version minor

// major： The major version number , Incompatible modifications , Such as  v1.0.0->v2.0.0
npm version major