npm是 Node.js 的包管理工具。下面本篇文章就來帶大家深入了解一下Node包管理工具–npm,希望對大家有所幫助!
一、npm概述
npm (Node Package Manager)是 Node.js 的包管理工具。
什么是包?包就是一坨代碼,就是 Node.js 的第三方模塊。
例如:JQuery模塊,Bootstrap模塊
npm 是一個(gè)命令,跟隨 Node.js 一起安裝。也就是說我們安裝了Node.js會連帶一個(gè)npm包管理工具一起安裝下來。
二、測試npm是否安裝成功
1.快捷鍵win+r,打開命令提示符,或者再VScode終端當(dāng)中打開黑窗口。
2.輸入npm –version命令 或者輸入簡寫命令 npm -v都可以,當(dāng)出現(xiàn)如下圖npm的版本號說明安裝成功。
三、包的依賴
npm 可以下載(安裝)包和包的依賴。 例如如下圖:Bootstrap包是依賴于JQuery的,所以下載BootStrap包會把JQuery包一起下載下來。就相當(dāng)于我們平時(shí)說的俗語:是先有的雞,還是先有的蛋的觀點(diǎn)一樣。所以我們的包也是,先有了JQuery,才有的Bootstrap,要想安裝Bootstrap,它會將依賴包JQuery一起安裝。
四、包的安裝方式
1.傳統(tǒng)方式的手動下載:比如我們要下載Bootstrap,那么我們首先要找到這個(gè)框架的官網(wǎng),然后進(jìn)入,找到合適的版本資源,進(jìn)行下載??赡苡行┤苏揖W(wǎng)站的時(shí)間,下載的時(shí)間花費(fèi)的時(shí)間會很長,因?yàn)橛行┤丝赡懿挥浀霉俜骄W(wǎng)站是哪個(gè),還需要查找,找到以后還要找到合適的資源下載,這樣繁瑣的操作是我們傳統(tǒng)方式下載的。
2.通過npm包管理工具安裝,該包下包含了很多的前端所用到的包,再http://npmjs.com這個(gè)網(wǎng)站可以搜索任何的包,供我們下載安裝使用。我們學(xué)習(xí)了npm包,就可以通過一條命令進(jìn)行安裝這些包,再也不需要找到該包的官網(wǎng)進(jìn)行下載了。通過npm install 包的名稱即可實(shí)現(xiàn)安裝。
五、npm鏡像源
npm鏡像源就是npm 管理的 Node.js 包的資源地址。
http://npmjs.com
六、npm從鏡像源下載包
npm從鏡像源下載包就是當(dāng)我們輸入npm install 包名,這個(gè)命令后,他會去http://npmjs.com這個(gè)官網(wǎng)進(jìn)行查找下載安裝,供我們開發(fā)人員使用該包。
比如說我們要下載JQuery包,那么我們只需要再黑窗口敲寫一條命令 npm install JQuery即可。
npm下載類比之應(yīng)用商店
七、修改 npm 鏡像源
我們的npm鏡像源呢是國外的網(wǎng)站,我們要安裝一個(gè)包,要跑到國外去安裝,很浪費(fèi)我們的時(shí)間,所以我們要將npm鏡像源呢,通過命令改變成我們國內(nèi)的鏡像源,這樣我們安裝起來就很快了,提高了我們的效率。
修改npm鏡像源的命令:npm config set registry https://registry.npm.taobao.org
查看是否修改成功命令:npm config get registry
示例:
八、使用npm安裝包
使用安裝命令:npm install <package-name包名>
九、npm包的安裝方式
9.1全局安裝
所謂全局安裝就是把包當(dāng)成全局命令來使用。
安裝命令:npm install <package-name> –global
安裝命令簡寫:npm i <package-name> -g
全局安裝安裝步驟
1. 明確你的需求; 2. 找到合適的包; 3. 通過 npm 安裝包; 4. 使用包;
示例:minify壓縮包的安裝
安裝命令:npm install minify -global
安裝命令簡寫:npm i minify -g
壓縮文件的命令:minify 要壓縮的文件路徑 > 壓縮后要存放的文件的路徑
例如:如下案例:minify ./style.css > ./style.min.css
解釋:將當(dāng)前目錄下的style.css文件壓縮,然后壓縮到當(dāng)前目錄下,并把文件名改為style.min.css
解決:無法加載文件 C:UsersuserAppDataRoamingnpmnpx.ps1,因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本 。
1、點(diǎn)擊windows鍵,或者點(diǎn)擊屏幕左下角的按鈕,以管理員身份打開 powerShell
2、輸入 命令:set-ExecutionPolicy RemoteSigned ,回車;
然后再輸入 Y
,回車;
然后我們在輸入命令就好啦。
-
卸載包的命令:
npm uninstall minify -global
-
卸載包的簡寫命令:
npm uni minify -g
示例:測試將包卸載后,再執(zhí)行壓縮命令,會發(fā)現(xiàn)報(bào)錯。
9.2項(xiàng)目(局部)安裝
所謂項(xiàng)目(局部)安裝就是包只在當(dāng)前項(xiàng)目中使用。
項(xiàng)目安裝步驟
1. 創(chuàng)建項(xiàng)目目錄(mkdir project);
2. 進(jìn)入項(xiàng)目目錄(cd project);
—————————-注:如上2個(gè)步驟可以自己創(chuàng)建,不用命令————————————–
3. 初始化項(xiàng)目(npm init);
4. 在項(xiàng)目中安裝包;
示例:執(zhí)行初始化命令結(jié)果
會發(fā)現(xiàn)我們的目錄中多了一個(gè)package.json文件
-
再項(xiàng)目中按照包的命令:
npm install <package-name包名> --save
-
再項(xiàng)目中按照包的命令簡寫:
npm i <package-name包名> -S
我們通過命令安裝好之后,再來通過剛剛的全局方式進(jìn)行壓縮,會提示報(bào)錯。當(dāng)然這里要注意下:
必須是我們把剛才測試的全局的方式安裝的包uninstalll卸載掉,才能出現(xiàn)如下報(bào)錯。
那么出現(xiàn)報(bào)錯的原因是:因?yàn)槲覀儼讶指某闪水?dāng)前項(xiàng)目下(局部安裝),所以我們要想使用該壓縮命令,需要找到minify這個(gè)包。
在我們輸入命令npm i <package-name包名> -S 后,會多出一個(gè)node_modules這個(gè)目錄,再它下面,我們里面有個(gè).bin目錄,.bin目錄下有一個(gè)minify的包,此時(shí)我們找到啦。
那么我們找到了這個(gè)包了,該怎么書寫壓縮命令呢?
使用項(xiàng)目安裝包的命令:
./node_modules/.bin/minify 文件路徑 > 壓縮后的文件路徑
例如:
./node_modules/.bin/minify .style.css > .style.min.css
通過看到如下圖測試,我們壓縮文件啦。
--save-dev
命令
命令:npm install <package-name> --save-dev
命令簡寫: npm i <package-name> -D
npm安裝命令的參數(shù)
--save
和--save-dev
的區(qū)別
–save:安裝的包,開發(fā)和上線的時(shí)候都需要攜帶安裝的包,例如JQuery,Vue,Bootstrap包,因?yàn)檫@些包都是樣式布局的包,需要我們上線的時(shí)候攜帶。
–save-dev:安裝的包,只在開發(fā)環(huán)境中會使用到,上線后不用,那就使用該命令,例如minify壓縮文件包
如何查看是–save安裝的還是–save-dev安裝的呢?
我們安裝后的包,會在package.json中生成一個(gè)dependencies依賴,如果是 -S安裝的那么會在dependencies下,如果是-D安裝的那么會在devDependencies下。將來當(dāng)我們卸載包的時(shí)候,這里的依賴會消失。所以我們可以通過查看package.json來看自己依賴的包。
總結(jié)npm安裝包的方式
補(bǔ)充:
再當(dāng)前進(jìn)入的目錄下,打開vscode編輯器命令:code .(點(diǎn))