從零開始寫一個npm包及上傳


  最近剛好自己需要寫公有npm包及上傳,雖然百度上資料都能找到,但是都是比較零零碎碎的,個人就來整理下,如何從零開始寫一個npm包及上傳。

  該篇文件只記錄一個大概的流程,一些細節沒有記錄。

  tips: 這篇文章基於Vue.js 和 github

 

預備工作

  1、首先你需要npm賬號和github賬號(個人用的是github)。

    注冊賬號都比較簡單,個人就不再描述。

  2、將npm賬號和github賬號關聯,這樣才能找到你的代碼。

    在npm里面找到你的個人設置(Profile Settings),在Profile中找到GitHub Username,填入你的github賬號即可

  3、在npm中驗證你的郵箱

    如果你沒有驗證郵箱,npm官網中會提示你去驗證郵箱。

    如果沒有驗證郵箱,后期在npm publish 發布的時候會一直報: error you must verify your email before publishing a new package: xxx

  

 准備工作做完之后,既然要上傳,就需要npm包,下面我們先來寫一個npm包

 

寫一個npm包

  1、在 gtihub 上 建立一個項目vue-test,然后clone到本地。

    這里無關本文,暫不詳細說明

  2、在clone下來的項目vue-test中采用vue-cli快速構建一個項目。

    一般npm包都是存放在lib文件夾下。我們為了在本地測試。所以我們先整體的構建一個vue項目,后期再整理上傳目錄。

    vue-cli構建方法暫不詳細說明。

  3、開始寫代碼。

    不管你這個npm包是一個功能還是一整個模塊,都需要將相關的文件單獨存放,方便后期整理上傳目錄。

    在index.vue中引入將要上傳的組件或者js,然后npm run dev在本地測試。

    tips: 

      1、如何寫一個模塊包或者功能,不詳細描述,跟平常寫代碼一樣,你想用啥語言就用啥,本文用Vue.js 只是示例。

      2、只是要注意將要上傳的文件進行單獨存放。

  4、添加 LICENCE 文件,說明對應的開源協議。

    新增一個文件名為 LICENCE. 的文件

 
         
Copyright (c) <year> <copyright holders>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

修改Copyright (c) <year> <copyright holders>中的 year 和copyright holders 即可。

  5、添加README.md文件

    描述npm包的使用方法

  6、添加 .gitignore 文件

    上傳代碼到倉庫的時候,會忽略這個文件中寫入的文件,文件中怎么寫,暫不詳細描述。

  7、整理上傳目錄

    以上文件都存在之后,功能也寫完了,現在就要開始整理代碼目錄了。

    整理之前,我們先上傳代碼到github上備份下,然后再整理上傳。

    刪除vue項目中一些不必要的,只剩下功能組件或者文件。注意,如果功能文件或者組件中有引入其他文件,記得要修改文件路徑。

    整理完成后,上傳代碼到github倉庫。

  

 npm包寫完了,那就上傳吧。

 

上傳

  在命令窗口中,cd 進入你的項目文件夾。

  1、npm login

  輸入你的 npm 用戶名、密碼 和郵箱后,會提示: 

Logged in as bala001 on https://registry.npmjs.org/.

  登錄成功。

  2、npm publish

  發布npm包。如果報錯的話,各位就是百度對應的錯誤解決辦法吧。后期再來列出幾個常見的錯誤。

 

  發布成功之后,自然要更新了。

 

更新

  npm version <update_type>

  update_type有三個參數:

    patch:補丁。比如更新前的版本是1.0.0,npm version path 回車更新后的版本為: 1.0.1

    minor:小修改。比如更新前的版本是1.0.0,npm version minor 回車更新后的版本為: 1.1.0

    major:大改。比如更新前的版本是1.0.0,npm version major 回車更新后的版本為: 2.0.0

  版本更新之后,npm publish發布。

 

npm包發布成功,你就可以在你的npm package中找到你發布的包了,如你需要在其他項目中引用,直接npm install 包名,引入即可。

 

常見錯誤及解決辦法

  1、未驗證郵箱

error code E403
error you must verify your email before publishing a new package:

  該錯誤是因為沒有驗證郵箱。

  解決辦法:

  在npm官網:https://www.npmjs.com/ 綁定郵箱之后,需要進行綁定驗證,只有驗證通過了,npm賬號才有效。

  2、private 設置問題

error Remove the 'private' field from the package.json to publish it.

  解決辦法:

  在package.json文件中,有這樣一行代碼: "private": true, 改為false即可

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM