当前位置:网站首页>Publish your own toolkit notes using NPM
Publish your own toolkit notes using NPM
2022-07-06 01:45:00 【Celestial programmer】
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 apackage.json
Package management profile for
npm init
// or
npm init -y
- 3、 Get into
genius-storage
File root , You can seepackage.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 ongenius-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 tonpm
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 directory3、 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
边栏推荐
- Leetcode skimming questions_ Sum of squares
- Redis如何实现多可用区?
- Redis daemon cannot stop the solution
- How does Huawei enable debug and how to make an image port
- 安装Redis
- NLP fourth paradigm: overview of prompt [pre train, prompt, predict] [Liu Pengfei]
- 3D vision - 4 Getting started with gesture recognition - using mediapipe includes single frame and real time video
- Redis string type
- dried food! Accelerating sparse neural network through hardware and software co design
- 晶振是如何起振的?
猜你喜欢
Leetcode3. Implement strstr()
Docker compose配置MySQL并实现远程连接
NumPy 数组索引 切片
Basic operations of databases and tables ----- default constraints
Docker compose configures MySQL and realizes remote connection
[flask] official tutorial -part1: project layout, application settings, definition and database access
leetcode3、實現 strStr()
500 lines of code to understand the principle of mecached cache client driver
Tensorflow customize the whole training process
Folio. Ink is a free, fast and easy-to-use image sharing tool
随机推荐
Maya hollowed out modeling
2 power view
ClickOnce does not support request execution level 'requireAdministrator'
Open source | Ctrip ticket BDD UI testing framework flybirds
Code Review关注点
[技术发展-28]:信息通信网大全、新的技术形态、信息通信行业高质量发展概览
A glimpse of spir-v
Huawei converged VLAN principle and configuration
【网络攻防实训习题】
【全网最全】 |MySQL EXPLAIN 完全解读
leetcode-2.回文判断
Basic process and testing idea of interface automation
Redis-列表
竞赛题 2022-6-26
[technology development -28]: overview of information and communication network, new technology forms, high-quality development of information and communication industry
02. Go language development environment configuration
selenium 等待方式
Redis-字符串类型
Leetcode3. Implement strstr()
Unreal browser plug-in