如何发布一个npm包
演示:https://stardew516.github.io/...
一、准备工作
1.已经写好的小组件
vueui: https://github.com/stardew516...
2. npm包存放仓库
tinny-vue-ui: https://github.com/stardew516...
二、实现步骤
1. 准备一个写好的组件(vueui)
2. 新建一个github仓库(tinny-vue-ui),供npm使用。
新建时需要添加license:MIT,如下图所示
3. git clone到本地,新建文件夹src,把写好的组件copy到src中,且src中添加index.es6,package.json放到根目录下,
配置.babelrc,.editorconfig,.eslintrc.js和.gitignore
4. 配置package.json
"scripts": {
"build": "babel src -d lib"
},
5. npm run build 打包
6. 注册npm(https://www.npmjs.com/signup)
7. 进入tinny-vue-ui终端,输入npm adduser,依次输入注册信息,然后npm publish
8. https://www.npmjs.com/settings/username/packages 可以看到自己发布的包
三、使用
1. 使用npm install tinny-vue-ui --save 引入包文件
2. 页面中使用 import 组件 from 'tinny-vue-ui/src/组件' 引入
3. 使用发布的npm包做个小demo
tinnyVueUiDemo: https://github.com/stardew516...
四、可能遇到的问题
1.This package has been marked as private
解决:去掉package.json里的private: true
2. no_perms Private mode enable, only admin can publish this module:
解决:npm config set registry http://registry.npmjs.org
3. need auth auth required for publishing
npm ERR! need auth You need to authorize this machine using npm adduser
解决:
npm adduser
输入npm中注册的用户名 密码 邮箱
Username:
Password:
Email: (this IS public)
Logged in as ** on http://registry.npmjs.org/.
4. You do not have permission to publish "vueui". Are you logged in as the correct user? : vueui
解决:包名被占用,package.json改一个。
"name": “tinny-vue-ui”,重新build,发布。
npm notice name: tinny-vue-ui
npm notice version: 1.0.0
npm notice package size: 464.4 kB
npm notice unpacked size: 1.9 MB
npm notice shasum: 8495d12bd427fee1d4aa2f7b901a1dec8e71913e
npm notice integrity: sha512-JXBSxAEqr1Tk4[...]9q+H1iQUoHqNw==
npm notice total files: 181
npm notice
+ tinny-vue-ui@1.0.0
成功
5. publish Failed PUT 403
npm ERR! code E403
npm ERR! You cannot publish over the previously published #### versions: 1.0.8. : tinny-vue-ui
解决:版本号已经存在,package.json中换一个版本号。versions: 1.0.9
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。