構建自己的npm包簡單實現(xiàn)

frontoldman 發(fā)布于2019-08-20 18:22 / 3336人閱讀

摘要：使用介紹是隨同一起安裝的包管理工具，能解決代碼部署上的很多問題，常見的使用場景有以下幾種允許用戶從服務器下載別人編寫的第三方包到本地使用。允許用戶將自己編寫的包或命令行程序上傳到服務器供別人使用。

NPM 使用介紹

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

允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。

允許用戶從NPM服務器下載并安裝別人編寫的命令行程序到本地使用。

允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。

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

index.js文件示例：

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

2.在項目中引導創(chuàng)建一個package.json文件

npm init

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

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

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

2. 在cmd中登錄賬號

注冊成功后，打開cmd進入到demo目錄，登錄賬號：

npm login

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

npm whoami

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

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

上傳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官網(wǎng)看到：

npm包管理 1. 管理npm包權限

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

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

npm unpublish --force

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

版本更新少于24小時的包允許下架；

超過24小時的包的下架需要聯(lián)系npm維護者；

如果有npm維護者參與，npm將檢查是否有其他包依賴該包，如果有則不允下架；

如果某個包的所有版本都被移除，npm會上傳一個空的占位包，以防后來的使用者不小心引用懷有惡意的替代者。

3. npm的版本控制

npm version patch
npm version minor
npm version major

例如：我原本的項目是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. 在項目目錄中cmd輸入

node index.js

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

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

擴展 Browserify 1. 簡介

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

2.Browserify是如何工作的

Browserify從你給你的入口文件開始,尋找所有調(diào)用require()方法的地方, 然后沿著抽象語法樹,通過?detective?模塊來找到所有請求的模塊.

每一個require()調(diào)用里都傳入一個字符串作為參數(shù),browserify把這個字符串解析成文件的路徑然后遞歸的查找文件直到整個依賴樹都被找到.

每個被require()的文件,它的名字都會被映射到內(nèi)部的id,最后被整合到一個javascript文件中.

3. 運用到項目

全局安裝browserify

npm install -g browserify

使用browserify

browserify index.js > bundle.js

在test目錄新建index.html:

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

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

GPU云服務器云服務器構建自己的云服務器怎么構建自己的云服務器怎樣構建自己的云服務器 NPM包管理器

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84428.html

[譯]Yarn：一個新的JavaScript包管理器

摘要：第一個主要的包管理器在被引用后不久就搭建起來了，并且迅速成為世界上最受歡迎的包管理器之一。簡介是一款新的包管理器，在取代客戶端和其他包管理器現(xiàn)有工作流的同時，又保留了對代理的兼容性。在JavaScript社區(qū)，工程師們分享了成百上千的代碼段，我們不用自己從頭編寫基礎組件、類庫或者框架。反過來，每段代碼又或許依賴于其它的代碼段，而這些依賴就是通過 package managers(包管...

Steve_Wang_ 2019-08-20 11:37 評論0 收藏0
前端構建工具整理

摘要：常見前端構建工具的分類和對比是附帶的包管理器，是內(nèi)置的一個功能，允許在文件里面使用字段定義任務在這里，一個屬性對應一段腳本，原理是通過調(diào)用去運行腳本命令。前文端技術范圍不斷發(fā)展，前端開發(fā)不僅限于直接編寫html，css和javascript，Web應用日益龐大，代碼也更加龐大，因此許多新的思想（例如模塊化和工程化等）和框架（React和Vue等），以及新的語言（Es6 TypeSc...

leo108 2019-08-23 10:53 評論0 收藏0
JavaScript 編程精解中文第三版十、模塊

摘要：來源編程精解中文第三版翻譯項目原文譯者飛龍協(xié)議自豪地采用谷歌翻譯編寫易于刪除，而不是易于擴展的代碼。模塊之間的關系稱為依賴關系。用于連接模塊的最廣泛的方法稱為模塊。模塊的主要概念是稱為的函數(shù)。來源：ApacheCN『JavaScript 編程精解中文第三版』翻譯項目原文：Modules 譯者：飛龍協(xié)議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯編寫易于刪除，而不是易于擴...

justjavac 2019-08-23 18:18 評論0 收藏0
使用 NodeJS 構建現(xiàn)代化的命令行工具

摘要：前言這是一篇關于如何使用構建高性能高可讀性的現(xiàn)代化命令行工具的博客。對于命令行工具來說，運行時的權限是巨大的，但不要因此弄臟用戶的系統(tǒng)。前言這是一篇關于如何使用 NodeJS 構建高性能、高可讀性的現(xiàn)代化命令行工具的博客。每當我們想要創(chuàng)建一個基于 NodeJS 的命令行工具時，就會衍生出一堆問題需要解決，比如如何準備開發(fā)環(huán)境，如何打包轉(zhuǎn)譯代碼，如何使代碼在轉(zhuǎn)譯后保持可調(diào)用的狀態(tài)同...

QLQ 2019-08-23 18:15 評論0 收藏0
【譯】一個小時搭建一個全棧Web應用框架（上）

摘要：初始項目設置我們將使用包管理器來處理依賴項。使用包管理器可以使您的項目依賴項保持最新狀態(tài)，并能夠獲取和安裝最新的包。是小型應用的最佳選擇之一。翻譯：瘋狂的技術宅英文標題：Creating a full-stack web application with Python, NPM, Webpack and React英文原文：https://codeburst.io/creating....

wizChen 2019-08-21 11:59 評論0 收藏0