當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

构建自己的npm包简单实现

發(fā)布時(shí)間：2023/12/20 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了构建自己的npm包简单实现小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

NPM 使用介紹

NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：

允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用。
允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。
允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用。

NPM 包構(gòu)建

1. 創(chuàng)建demo目錄，新建index.js文件

index.js文件示例：

module.exports.sayHello = function(){return "Hello World!"; }

2.在項(xiàng)目中引導(dǎo)創(chuàng)建一個(gè)package.json文件

npm init

快速創(chuàng)建可以使用npm init -y命令

注冊npm賬號

1.要發(fā)布npm包當(dāng)然需要在npm官網(wǎng)注冊一個(gè)屬于自己的賬號

npm官網(wǎng)地址： https://www.npmjs.com

2. 在cmd中登錄賬號

注冊成功后，打開cmd進(jìn)入到demo目錄，登錄賬號：

npm login

輸入用戶密碼以及郵箱，登錄成功后可以輸入查詢命令：

npm whoami

就能看到你酷酷的賬號名了~~

附：剛注冊完有段時(shí)間可以發(fā)布npm包，過段時(shí)間需要郵箱驗(yàn)證通過才能發(fā)布包，不然會報(bào)錯(cuò)（無傷大雅~~）

上傳npm包

1. cmd進(jìn)到demo目錄，輸入如下命令：

npm publish

這時(shí)候npm報(bào)錯(cuò)大軍要來了

npm ERR! publish Failed PUT 403 npm ERR! code E403 npm ERR! you do not have permission to publish "demo". Are you logged in as the correct user? : demo

這是什么原因？？就是與npm倉庫的包名重復(fù)了

改改改~~
拿出package.json文件，把name字段值改成下面：

"name": "testfun"

注意你的name字段值不要跟我一樣，不然還會包上述錯(cuò)誤，避免相同包名就可以啦

還有一點(diǎn)要注意的是npm對包名的限制：不能有大寫字母/空格/下滑線

上傳成功后你就可以在npm官網(wǎng)看到：

npm包管理

1. 管理npm包權(quán)限

查看模塊擁有者 $ npm owner ls <package_name> 添加發(fā)布者 $ npm owner add <user> <package_name> 刪除發(fā)布者 $ npm owner rm <user> <package_name>

2. 撤銷發(fā)布包( 在項(xiàng)目目錄下執(zhí)行 )

npm unpublish --force

主要是處于安全性考慮，在Azer NPM 撤包事件后，npm公布了一版新的規(guī)則，如下：

版本更新少于24小時(shí)的包允許下架；
超過24小時(shí)的包的下架需要聯(lián)系npm維護(hù)者；
如果有npm維護(hù)者參與，npm將檢查是否有其他包依賴該包，如果有則不允下架；
如果某個(gè)包的所有版本都被移除，npm會上傳一個(gè)空的占位包，以防后來的使用者不小心引用懷有惡意的替代者。

3. npm的版本控制

npm version patch npm version minor npm version major

例如：我原本的項(xiàng)目是1.0.0版本的話
若是1中情況，變?yōu)?.0.1
若是2中情況，變?yōu)?.1.0
若是3中情況，變?yōu)?.0.0

不過也可以在package.json中的version更改~~

使用npm包

1. 創(chuàng)建test目錄，在目錄中新建index.js及package.json文件

index.js文件代碼:

var testfun = require("testfun"); console.log(testfun.sayHello());

2. 安裝testfun包

npm install --save-dev testfun

3. 在項(xiàng)目目錄中cmd輸入

node index.js

就可以看到下面的效果啦~

這是運(yùn)行在node環(huán)境，那么像運(yùn)行在瀏覽器該怎么弄呢~~
這時(shí)候就要用到browserify了

擴(kuò)展

Browserify

1. 簡介

Browserify 可以讓你使用類似于 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼，通過預(yù)編譯讓前端 Javascript 可以直接使用 Node NPM 安裝的一些庫。

2.Browserify是如何工作的

Browserify從你給你的入口文件開始,尋找所有調(diào)用require()方法的地方, 然后沿著抽象語法樹,通過?detective?模塊來找到所有請求的模塊.
每一個(gè)require()調(diào)用里都傳入一個(gè)字符串作為參數(shù),browserify把這個(gè)字符串解析成文件的路徑然后遞歸的查找文件直到整個(gè)依賴樹都被找到.
每個(gè)被require()的文件,它的名字都會被映射到內(nèi)部的id,最后被整合到一個(gè)javascript文件中.

3. 運(yùn)用到項(xiàng)目

全局安裝browserify

npm install -g browserify

使用browserify

browserify index.js > bundle.js

在test目錄新建index.html:

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><script src="bundle.js"></script> </head> <body></body> </html>

打開index.html就可以看到控制器中的效果：

這樣就用有自己的npm包了(＾ω＾)~~~

總結(jié)

以上是生活随笔為你收集整理的构建自己的npm包简单实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。