如何發佈一個npm包

如何發佈一個npm包

演示：https://stardew516.github.io/...

1、準備工做

1.已經寫好的小組件

vueui: https://github.com/stardew516...

2. npm包存放倉庫

tinny-vue-ui: https://github.com/stardew516...

2、實現步驟

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 能夠看到本身發佈的包

3、使用

1. 使用npm install tinny-vue-ui --save 引入包文件

2. 頁面中使用 import 組件 from 'tinny-vue-ui/src/組件' 引入

3. 使用發佈的npm包作個小demo

tinnyVueUiDemo: https://github.com/stardew516...

4、可能遇到的問題

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