手把手教你用npm發佈一個包，詳細教程

咱們已經實現了路由的自動化構建，可是咱們能夠看到，一大串代碼懟在裏面。固然你也能夠說，把它封裝在一個JS文件裏面，而後使用 require('./autoRoute.js')給引入進來，那也行。可是，爲何不把心放大一點呢？好比說，咱們把它作成一個npm包！

 

最初本身作的時候就是這種直接引入封裝的JS文件裏，能夠參考： https://github.com/saucxs/watermark

 

1、準備工做

一、將npm包的鏡像換成   https://www.npmjs.com/

npm config set registry https://www.npmjs.com/

由於這個官方npm加載速度慢，以後再切換回來

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

二、本身電腦不是adminstrator權限，請切換到administrator用戶。這個不須要告訴你怎麼切換用戶吧

三、註冊一個npm帳號

註冊地址：https://www.npmjs.com/

 

2、初始化要封裝的包

一、擇一個文件夾，而後用命令行 cd進去

npm init

接下來就是一長串表單：

• name：填寫你這個包的名字，默認是你這個文件夾的名字。不過這裏要着重說一下，最好先去npm上找一下有沒有同名的包。最好的測試方式就是，在命令行裏面輸入npm install 你要取的名字，若是報錯，那麼很好，npm上沒有跟你同名的包，你能夠放心大膽地把包發佈出去。若是成功下載下來了。。。那麼很不幸，更名字吧。。。
• version：你這個包的版本，默認是1.0.0
• description：這個用一句話描述你的包是幹嗎用的，好比我就直接：‘watermark for dom’
• entry point：入口文件，默認是Index.js，你也能夠本身填寫你本身的文件名
• test command：測試命令，這個直接回車就行了，由於目前還不須要這個。
• git repository：這個是git倉庫地址，若是你的包是先放到github上或者其餘git倉庫裏，這時候你的文件夾裏面會存在一個隱藏的.git目錄，npm會讀到這個目錄做爲這一項的默認值。若是沒有的話，直接回車繼續。
• keyword：這個是一個重點，這個關係到有多少人會搜到你的npm包。儘可能使用貼切的關鍵字做爲這個包的索引。我這個包嘛，第一是在express下工做的，而後又是一個插件plugin，而後又是一個註冊路由route用的，而這個路由又是基於文件目錄dir，因此很好就得出個人包的索引關鍵字。
• author：寫你的帳號或者你的github帳號吧
• license：這個直接回車，開源文件來着。。。

PS：你能夠一直回車，以後再packjson裏進行編輯這個表單。

 

二、而後，在目錄下新建一個index.js文件，或者你剛纔修改了那個entry point的值，那麼你這個文件名也跟着改成那個值。

這個index.js裏面我放了一個壓縮的index.min.js。

 

 三、而後，最重要的，寫好README.md，一個給你們描述你的包的markdown文件，若是你們都不知道你的代碼是作什麼的，會有人去下載你的代碼嗎？哦，對了，最好寫英文。我這裏寫了一套英文版的使用文檔和一套中文版的使用文檔。

 

 

3、npm命令登陸

 接下來就是：用npm命令登錄一下：

npm login

登陸的是本身註冊的用戶名和密碼。

PS：或者使用添加npm用戶

npm adduser

 

4、npm發佈到官方網上

而後，在你的目錄下使用 npm publish

npm publish

PS :每一次發佈新的一版，version版本要改變，否則npm會給我報錯。通常狀況下，一旦你要修改你已經發布後的代碼，而後又要執行發佈操做，務必到package.json裏面，把version改一下，好比從1.0.0改成1.0.1，而後在執行npm publish，這樣就能夠成功發佈了。

 

5、看一下發布的包

登陸本身的npm官方，就能夠看到本身發佈的包

 

6、如何使用watermark-dom包（最後邊是最重要的）

npm包引入

        第一步：獲取水印組件包： npm install  watermark-dom

        第二步：引入水印模塊：import watermark from 'watermark-dom'

        第三步：在須要使用水印的頁面js中調用水印初始化方法

                      watermark.init({ watermark_txt: "測試水印"});