1. 程式人生 > >vue學習之npm

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
2
3
- 會把包安裝到node_modules目錄中
- 不會修改package.json
- 執行npm install不會自動安裝該包
本地安裝–save
1
npm install [email protected]
--save

本地–save方式安裝的npm包,只在當前目錄下可用,該方式安裝的包:

1
2
3
- 會把包安裝到node_modules目錄中
- 會在package.json的dependencies屬性下新增包
- 執行npm install命令時,會自動安裝包到node_modules目錄中
解除安裝全域性包
1
npm uninstall <package> -g
解除安裝本地
1
2
npm uninstall <package> -S, --save: Package will be removed from your dependencies.
npm uninstall <package> -D, --save-dev: Package will be removed from your devDependencies.

通過npm安裝JavaScript第三方庫時,訪問的是國外的站點,訪問速度會比較慢,此時我們可以使用國內的映象站,cnpm,詳細的使用方式請參考http://npm.taobao.org/

使用方式如下:

1
cnpm install vue

以上就是npm包的安裝和解除安裝介紹。

但是,當我們需要維護多個獨立的專案環境時, 比如專案一需要Vue2.5.10支援,而專案二需要最新的Vue2.5.17,我們應該分別為專案一和專案二建立獨立的、與外界隔離的第三方庫環境。而不是在當前目錄下使用本地或者全域性方式安裝npm包。

我們應該建立一個資料夾,並將該資料夾初始化為npm包環境,使用方式如下:

1
2
3
mkdir myproject
cd myproject
npm init

使用npm init初始化專案環境的時候,會出現如下提示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Press ^C at any time to quit.
package name: (myproject)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/pizza/Downloads/myproject/package.json:

{
"name": "myproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}


Is this OK? (yes)

按需填入上述資訊,最後輸入yes,專案環境初始化完畢。如果使用預設資訊,可以直接使用npm init -y進行初始化。

上面的資訊依次是:

1
2
3
4
5
6
7
8
9
name 專案名稱
version 專案的版本號
description 專案的描述資訊
entry point 專案的入口檔案
test command 專案啟動時指令碼命令
git repository 如果你有 Git 地址,可以將這個專案放到你的 Git 倉庫裡
keywords 關鍵詞
author 作者
license 專案要發行的時候需要的證書
檢視特定package的資訊
1
npm ls <package>
更新package
1
npm update <package>
搜尋package
1
npm search <package>
package.json詳解

隨著專案的不斷豐富,package.json檔案也會跟隨著不斷的複雜,接下來,介紹幾個在上述沒有的條目:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"private": true,
"dependencies": {
"antd": "^2.11.1",
"classnames": "^2.2.5"
},
"devDependencies": {
"axios": "^0.15.3",
"babel-eslint": "^6.1.2"
},
"bin": {
"dk-cli": "./bin/dk-cli.js"
},
"scripts": {
"start": "node index.js"
},
"engines": {
"node": ">=6.9.0",
"npm": ">=3.10.10"
}
"publishConfig": {
"registry": "http://gongsineibu/nexus/repository/npm-hosted/"
}
  • private可選欄位,布林值。如果 private 為 true,npm 會拒絕釋出。這可以防止私有 repositories 不小心被髮布出去;

  • dependenciesdevDependencies

    在開發階段,我們需要對開發的模組進行單元測試,這時在開發環境 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的介紹到這裡就結束了。