構建本身的npm包簡單實現

時間 2019-11-10

標籤構建本身 npm 簡單實現简体版

原文原文鏈接

NPM 使用介紹

NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：javascript

容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

NPM 包構建

1. 建立demo目錄，新建index.js文件

index.js文件示例：html

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

2.在項目中引導建立一個package.json文件

npm init

快速建立可使用npm init -y命令前端

註冊npm帳號

1.要發佈npm包固然須要在npm官網註冊一個屬於本身的帳號

npm官網地址： https://www.npmjs.comjava

2. 在cmd中登陸帳號

註冊成功後，打開cmd進入到demo目錄，登陸帳號：node

npm login

輸入用戶密碼以及郵箱，登陸成功後能夠輸入查詢命令：npm

npm whoami

就能看到你酷酷的帳號名了~~json

附：剛註冊完有段時間能夠發佈npm包，過段時間須要郵箱驗證經過才能發佈包，否則會報錯（無傷大雅~~）瀏覽器

上傳npm包

1. cmd進到demo目錄，輸入以下命令：

npm publish

這時候npm報錯大軍要來了安全

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倉庫的包名重複了服務器

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

"name": "testfun"

注意你的name字段值不要跟我同樣，否則還會包上述錯誤，避免相同包名就能夠啦

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

上傳成功後你就能夠在npm官網看到：

npm包管理

1. 管理npm包權限

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

2. 撤銷發佈包( 在項目目錄下執行 )

npm unpublish --force

主要是處於安全性考慮，在Azer NPM 撤包事件後，npm公佈了一版新的規則，以下：

版本更新少於24小時的包容許下架；
超過24小時的包的下架須要聯繫npm維護者；
若是有npm維護者參與，npm將檢查是否有其餘包依賴該包，若是有則不允下架；
若是某個包的全部版本都被移除，npm會上傳一個空的佔位包，以防後來的使用者不當心引用懷有惡意的替代者。

3. npm的版本控制

npm version patch
npm version minor
npm version major

例如：我本來的項目是1.0.0版本的話
如果1中狀況，變爲1.0.1
如果2中狀況，變爲1.1.0
如果3中狀況，變爲2.0.0

不過也能夠在package.json中的version更改~~

使用npm包

1. 建立test目錄，在目錄中新建index.js及package.json文件

index.js文件代碼:

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

2. 安裝testfun包

npm install --save-dev testfun

3. 在項目目錄中cmd輸入

node index.js

就能夠看到下面的效果啦~

這是運行在node環境，那麼像運行在瀏覽器該怎麼弄呢~~
這時候就要用到browserify了

擴展

Browserify

1. 簡介

Browserify 可讓你使用相似於 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼，經過預編譯讓前端 Javascript 能夠直接使用 Node NPM 安裝的一些庫。

2.Browserify是如何工做的

Browserify從你給你的入口文件開始,尋找全部調用require()方法的地方, 而後沿着抽象語法樹,經過 detective 模塊來找到全部請求的模塊.
每個require()調用裏都傳入一個字符串做爲參數,browserify把這個字符串解析成文件的路徑而後遞歸的查找文件直到整個依賴樹都被找到.
每一個被require()的文件,它的名字都會被映射到內部的id,最後被整合到一個javascript文件中.

3. 運用到項目

全局安裝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包了(＾ω＾)~~~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

構建本身的npm包 簡單實現