vue學習之npm
任何一門計算機語言都包含了豐富的第三方庫,npm就是JavaScript這門語言的第三方庫管理工具,本文詳細介紹了JavaScript的包管理工具,npm。
在計算機中安裝好Node.js之後,預設已經安裝好了npm包管理工具,我們可以輸入npm
命令進行測試:
安裝npm包
安裝好npm包管理工具之後,我們來介紹兩種安裝npm包的方式:全域性安裝和區域性安裝
全域性安裝
如果你想將其作為一個命令列工具,那麼你應該將其安裝到全域性。這種安裝方式後可以讓你在任何目錄下使用這個包,安裝全域性包的方式如下:
1 |
npm install -g <package> |
全域性方式安裝的npm包,全域性可用。
本地安裝
1 |
npm install [email protected] |
本地方式安裝的npm包,只在當前目錄下可用,該方式安裝的包:
1 |
- 會把包安裝到node_modules目錄中 |
本地安裝–save
1 |
npm install [email protected] |
本地–save方式安裝的npm包,只在當前目錄下可用,該方式安裝的包:
1 |
- 會把包安裝到node_modules目錄中 |
解除安裝全域性包
1 |
npm uninstall <package> -g |
解除安裝本地
1 |
npm uninstall <package> -S, --save: Package will be removed from your dependencies. |
通過npm安裝JavaScript第三方庫時,訪問的是國外的站點,訪問速度會比較慢,此時我們可以使用國內的映象站,cnpm,詳細的使用方式請參考http://npm.taobao.org/
。
使用方式如下:
1 |
cnpm install vue |
以上就是npm包的安裝和解除安裝介紹。
但是,當我們需要維護多個獨立的專案環境時, 比如專案一需要Vue2.5.10支援,而專案二需要最新的Vue2.5.17,我們應該分別為專案一和專案二建立獨立的、與外界隔離的第三方庫環境。而不是在當前目錄下使用本地或者全域性方式安裝npm包。
我們應該建立一個資料夾,並將該資料夾初始化為npm包環境,使用方式如下:
1 |
mkdir myproject |
使用npm init
初始化專案環境的時候,會出現如下提示:
1 |
Press ^C at any time to quit. |
按需填入上述資訊,最後輸入yes
,專案環境初始化完畢。如果使用預設資訊,可以直接使用npm init -y
進行初始化。
上面的資訊依次是:
1 |
name 專案名稱 |
檢視特定package的資訊
1 |
npm ls <package> |
更新package
1 |
npm update <package> |
搜尋package
1 |
npm search <package> |
package.json詳解
隨著專案的不斷豐富,package.json檔案也會跟隨著不斷的複雜,接下來,介紹幾個在上述沒有的條目:
1 |
"private": true, |
-
private
可選欄位,布林值。如果 private 為 true,npm 會拒絕釋出。這可以防止私有 repositories 不小心被髮布出去; -
dependencies
與devDependencies
在開發階段,我們需要對開發的模組進行單元測試,這時在開發環境 devDependencies 下就要安裝單元測試模組 Mocha。
在生產環境 dependencies,使用者直接使用專案,此時專案的開發已全部完成。這時就不需要單元測試模組了,再加上只會影響效能。
- dependencies 指定了專案生產環境時所依賴的模組,
- devDependencies 制定了專案開發環境時所依賴的模組。
-
scripts
該欄位指定了執行指令碼命令的npm命令列縮寫,比如start指定了執行npm run start時,所要執行的命令。下面的設定指定了npm run dev、npm run bulid、npm run unit、npm run test、npm run lint時,所要執行的命令;
1
2
3
4
5
6
7"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit/specs"
} -
engines
欄位指定依賴的node版本 -
publishConfig
當我們開發完自己的專案想要將它釋出到 Npm 倉庫就需要使用這個屬性。預設情況下我們是往 Npm 公共倉庫中釋出包,預設地址是:
https://www.npmjs.com/
,此時在package.json
檔案中可以不加這個屬性。但是如果公司內部搭建了 Npm 私有倉庫,此時釋出包就不是往
https://www.npmjs.com/
這個地址上釋出了,而是公司內部提供的地址,如:http://gongsineibu/nexus/repository/npm-hosted/
。此時配置如下:1
2
3"publishConfig": {
"registry": "http://gongsineibu/nexus/repository/npm-hosted/"
}publicConfig
欄位決定了我們的包釋出到哪裡。
關於npm的介紹到這裡就結束了。