How to create a new NPM package and publish it to the NPM community

Big dream 2021-02-23 16:05:11
create new npm package publish

1、 First you need to install node and npm

2、 Create a new one npm package

Carry out orders :

npm init
 Copy code 

Then follow the program , It will generate a package.json

Last login: Tue Sep 17 20:37:27 on ttys007
fushuangyudeMacBook-Pro:test-package dm$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (test-package)
version: (1.0.0)
entry point: (index.js)
test command:
git repository:
license: (ISC)
About to write to /Users/dm/npm plug-in unit /test-package/package.json:
"name": "test-package",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"author": "",
"license": "ISC"
Is this OK? (yes)
 Copy code 

When the input is complete , The system will ask you to confirm whether the content of the file is wrong , If there is no problem, input it directly yes Or press enter, such package.json And we're done . "main": “index.js”, It's the entrance to this bag , That is to export components in this file . This entry is custom , If you want to index.js Put it in src Under the folder , Namely “src/xxx”.

Package.json Attribute specification

name - Package name . version - Version number of the package . description - Package description . homepage - Bao's official website url . author - The name of the author of the bag . contributors - Name of other contributors to the package . dependencies - Dependency package list . If the dependency package is not installed ,npm Will automatically install the dependency package in node_module Under the table of contents . repository - The type of place where the package code is stored , It can be git or svn,git Can be found in Github On . main - main Field specifies the main entry file of the program ,require('moduleName') It will load the file . The default value of this field is... Under the module root directory index.js. keywords - stay npm Community search keywords

3、 Release package package

registry =

Why change registry Well ? because It's just a mirror image of Taobao , We're going to release the code abroad npm Server , Or you're doing npm publish When it is released, it will report an error as shown in the figure below :

Tips: Sign in npm account number , Use npm adduser perhaps npm login —registry; see .npmrc Configuration of files : perform npm config get Print on the command line perhaps open .npmrc Open file ; change .npmrc File configuration method : Method 1: npm config set registry modify .npmrc In the document registry =; Method 2: npm config edit; Method 3: Execute the command in the user directory : open .npmrc, Open the file directly and modify it ( limit mac The computer );

  • In order to maintain the package ,npm A warehouse account must be used to allow packages to be published to the warehouse ; add to npm account number , perform npm adduser, Then follow the program to input the account password and other information . This information will be written .npmrc In file ;

In the process, I encountered a problem , Here's the picture : It's because I changed npm Password of account , Need to re add npm account number , When I perform npm adduser when , Report errors : npm ERR! 409 Conflict - PUT - [conflict] User dm123 already exists The Error statement is very clear , Conflict , There's already a local dm123 This account number has changed , This is the use of adduser No way . Solution : Log back in npm login —registry, Then follow the program , And adduser The performance is the same .

  • Publish the package to npm Community , Execute the command in the package directory :npm publish;

Release success status :

4、 Use

In need of using project Enter the command in the root directory npm install packageName You can take what you need npm The package was downloaded and used . In the folder that needs to be introduced import Just pour it in !

5、 common problem

  • If you update the package , You can't publish directly after modifying the code , Here we need to modify package Of version Number , Let's talk about it before we revise it npm maintain package The rules of the version x.y.z

x: The major version number , There are usually major changes or milestones to change ; y: Minor version number , Or secondary version number , Under the condition that the main function is basically unchanged , If new functions are added appropriately, this version number can be updated ; z: Final version number or patch number , Some small-scale patching can update the patch number .

$ npm version patch <=> z++ $ npm version minor <=> y++ && z=0 $ npm version major <=> x+= && y=0 && z=0

And then execute npm publish You can update to npm 了

  • If something like ' Please confirm if you have permission to update xxx package ' In English , This means that your package name has been used , It should be a different name .
  • Delete the published module

$ npm unpublish package@version perhaps $ npm unpublish --force package

本文为[Big dream]所创,转载请带上原文链接,感谢

  1. Are airpods still the strongest? Horizontal evaluation of 4 true wireless headphones
  2. Seamless connection with tableau, how can this large bank with 5000 + active users realize self-service analysis?
  3. react-native版文字跑马灯
  4. React native text running lantern
  5. Java、JavaScript、C、C++、PHP、Python都是用来开发什么?
  6. What are Java, JavaScript, C, C + +, PHP and python used to develop?
  7. this.byId(SupplierForm).bindElement in SAP UI5
  8. SAP UI5 JavaScript文件的lazy load - 懒加载
  9. this.byId (SupplierForm).bindElement in SAP UI5
  10. Lazy load lazy load of SAP ui5 JavaScript files
  11. "Gnome 3" - interface elements, desktop components, part names (learning notes) @ 20210223
  12. How to connect the ground gas to the micro front end?
  13. How to transform single / micro service application into serverless application
  14. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  15. Seven array methods for JavaScript you need to master in 2021
  16. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  17. Seven array methods for JavaScript you need to master in 2021
  18. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  19. Seven array methods for JavaScript you need to master in 2021
  20. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  21. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  22. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  23. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  24. 前端面试常考题:JS垃圾回收机制
  25. Frequently asked questions in front end interview: JS garbage collection mechanism
  26. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  27. Java之HTTP网络编程(一):TCP/SSL网页下载
  28. HTTP network programming in Java (1): TCP / SSL web page download
  29. Java之HTTP网络编程(一):TCP/SSL网页下载
  30. HTTP network programming in Java (1): TCP / SSL web page download
  31. 使用vite搭建vue项目
  32. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  33. 在 vue 中通过 express 连接数据库
  34. Using vite to build Vue project
  35. Display PDF file in component: Vue pdf
  36. Connecting database through express in Vue
  37. 2021届秋招哈啰出行前端面经(一面)
  38. vue使用sdk进行七牛云上传
  39. Javascript性能优化【内联缓存】 V8引擎特性
  40. Small true wireless smart headset evaluation: put intelligence into the ear
  41. The front end experience of the 2021 autumn recruitment
  42. Vue uses SDK to upload Qi Niu cloud
  43. 深入理解 Web 协议 (三):HTTP 2
  44. dhtmlxGantt如何重新排序任务
  45. JavaScript performance optimization [inline cache] V8 engine features
  46. 深入理解 Web 协议 (三):HTTP 2
  47. Deep understanding of Web protocol (3): http 2
  48. 深入理解 Web 协议 (三):HTTP 2
  49. How dhtmlxgantt reorders tasks
  50. 深入理解 Web 协议 (三):HTTP 2
  51. JavaScriptBOM操作
  52. JavaScriptBOM操作
  53. Deep understanding of Web protocol (3): http 2
  54. Deep understanding of Web protocol (3): http 2
  55. dhtmlxGantt甘特图重新排序任视频教程
  56. vue实现七牛云上传图片功能
  57. vue.js环境配置步骤及npm run dev报错解决方案
  58. Deep understanding of Web protocol (3): http 2
  59. JavaScript BOM operation
  60. JavaScript BOM operation