文件夾 模塊 .com png keyword tor 速度慢 index bsp

我們已經實現了路由的自動化構建，但是我們可以看到，一大串代碼懟在裏面。當然你也可以說，把它封裝在一個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

2、自己電腦不是adminstrator權限，請切換到administrator用戶。這個不需要告訴你怎麽切換用戶吧

3、註冊一個npm賬號

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

二、初始化要封裝的包 1、擇一個文件夾，然後用命令行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裏進行編輯這個表單。

2、然後，在目錄下新建一個index.js文件，或者你剛才修改了那個entry point的值，那麽你這個文件名也跟著改為那個值。

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

3、然後，最重要的，寫好README.md，一個給大家描述你的包的markdown文件，如果大家都不知道你的代碼是做什麽的，會有人去下載你的代碼嗎？哦，對了，最好寫英文。我這裏寫了一套英文版的使用文檔和一套中文版的使用文檔。 三、npm命令登錄 接下來就是：用npm命令登陸一下：

npm login

登錄的是自己註冊的用戶名和密碼。

PS：或者使用添加npm用戶

npm adduser

四、npm發布到官方網上

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

npm publish

PS :每一次發布新的一版，version版本要改變，不然npm會給我報錯。一般情況下，一旦你要修改你已經發布後的代碼，然後又要執行發布操作，務必到package.json裏面，把version改一下，比如從1.0.0改為1.0.1，然後在執行npm publish，這樣就可以成功發布了。

五、看一下發布的包 登錄自己的npm官方，就可以看到自己發布的包

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

npm包引入

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

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

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

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

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