怎么将自己写的库发布到npm上面?

简介: 怎么将自己写的库发布到npm上面?

准备一个库


如果你还没有写库的话,不妨看看我之前写的笔记,先模仿一个库先


webpack进阶篇(二十五):webpack打包组件和基础库



将库npm打包


在【webpack进阶篇(二十五):webpack打包组件和基础库】的基础上我们开始打包到npm

1、运行npm publish

aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS9jMTc3YjlhNDJkMWY2ZjNmZDRkYzhhODg3Y2Y1NTBjMC81QzYzMkFERDkyQ0E0QjFEOTgxRDBEMDY1NkIwRDM0Ng.png

我们打开自己的npm网站,可以看到自己的包kaimo-large-number

aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS9jMTc3YjlhNDJkMWY2ZjNmZDRkYzhhODg3Y2Y1NTBjMC8zNzJBQkQ5MzNCMjg0RDM1ODQ3MkU1RjQ0NUU4MzhCMw.png


点击进去就可以看到:

aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS9jMTc3YjlhNDJkMWY2ZjNmZDRkYzhhODg3Y2Y1NTBjMC85NTk2OEY1ODgyQzE0QTNCQTg2MzMxQjBGMkZERjFCRQ.png



运行这个命令时你很大可能会报错


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS9jMTc3YjlhNDJkMWY2ZjNmZDRkYzhhODg3Y2Y1NTBjMC9CQjRGMDI3OEYxNjk0MTY0OEI2RjE2N0I2ODMzMUJDNA.png



解决方案:

2、npm login,然后输入Username,Password,Email

如果填写完成出现下面情况:(估计你的账号密码填写错误了)

aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS9jMTc3YjlhNDJkMWY2ZjNmZDRkYzhhODg3Y2Y1NTBjMC9GRkI2OTVFQkM1RTI0OUIxQjBDOUYyQzU4QTJDOEUzOA.png

正确的应该如下

aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS9jMTc3YjlhNDJkMWY2ZjNmZDRkYzhhODg3Y2Y1NTBjMC82MkNERkUwOTgyRjc0QjkyOENCNDRERTU3NzM2MTA2RA.png



3、401的问题

如果你的出现的是Logged in as kaimo on https://registry.npm.taobao.org/.,那么你就会出现401的问题

aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS9jMTc3YjlhNDJkMWY2ZjNmZDRkYzhhODg3Y2Y1NTBjMC83QTAzMjRFNTU1QTE0NjdEQjMwNDNCNjNDM0NEODNEQw.png



解决过程:

1.检查仓库是否被设成了淘宝镜像库, 如果输出了下面淘宝镜像

npm config get registry,输出:https://registry.npm.taobao.org/


2.如果是淘宝镜像,则设回原仓库

npm config set registry=http://registry.npmjs.org


3.库发布成功了在设置回去

npm config set registry=https://registry.npm.taobao.org/


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS9jMTc3YjlhNDJkMWY2ZjNmZDRkYzhhODg3Y2Y1NTBjMC9CODQyQTQ4MTAzNTc0Mjc5ODE1Qzk3RTRCNzQwQTlDOA.png


4、403问题


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS9jMTc3YjlhNDJkMWY2ZjNmZDRkYzhhODg3Y2Y1NTBjMC83RjgwQjQ4RThGQzk0Mzc3OUYzMjRGMDU0NzNGODMyQg.png


解决:改一下包名:比如我的就改成了"kaimo-large-number"

{
  "name": "kaimo-large-number",
  "version": "1.0.0",
  "description": "大整数加法打包",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "prepublish": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "terser-webpack-plugin": "^1.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}



5、更新版本问题,先修改version,然后在publish

20200806221731588.png



以上就是我这边遇到的问题,希望对你有所帮助。




目录
相关文章
|
1月前
|
JavaScript 前端开发 Ruby
NPM 制作命令行工具 - 进阶辅助库
NPM 制作命令行工具 - 进阶辅助库
29 0
|
8月前
|
JavaScript 前端开发
npm 工具库 yenv 简介
npm 工具库 yenv 简介
|
前端开发 JavaScript
rollup从0到1将react组件库打包发布npm
rollup从0到1将react组件库打包发布npm记录全过程
467 1
rollup从0到1将react组件库打包发布npm
|
10月前
|
JavaScript 前端开发 Ruby
NPM 制作命令行工具 - 进阶辅助库
NPM 制作命令行工具 - 进阶辅助库
71 0
|
JavaScript CDN
JS:NPM发布一个Vue组件UI库并使用CDN引入使用
JS:NPM发布一个Vue组件UI库并使用CDN引入使用
461 0
|
12月前
|
JavaScript API 开发工具
如何从0开发一个Vue组件库并发布到npm(下)
如何从0开发一个Vue组件库并发布到npm(下)
92 0
|
12月前
|
JavaScript
如何从0开发一个Vue组件库并发布到npm(上)
如何从0开发一个Vue组件库并发布到npm(上)
131 0
|
JSON JavaScript 数据格式
js:使用npm库csvtojson将 CSV 转换为 JSON 字符串
js:使用npm库csvtojson将 CSV 转换为 JSON 字符串
142 0
|
JavaScript Shell API
|
JavaScript 前端开发 测试技术
为了深入学习JS我写了一个JS工具库 | 从零到一发布到npm上(2)
为了深入学习JS我写了一个JS工具库 | 从零到一发布到npm上(2)
143 0
为了深入学习JS我写了一个JS工具库 | 从零到一发布到npm上(2)

热门文章

最新文章

推荐镜像

更多