簡(jiǎn)單學(xué)習(xí)npm

一、npm是什么？

在講npm是什么之前，我們來講一下什么是Node。
Node是JavaScript語言的服務(wù)器運(yùn)行環(huán)境(一般我都是用瀏覽器來調(diào)試JavaScript的)

  • Javascript語言通過Node在服務(wù)器運(yùn)行
  • Node提供大量工具庫，使得JavaScript語言與操作系統(tǒng)互動(dòng)(如讀寫文件)

好了，現(xiàn)在我們來講一下什么是npm
npm是Node默認(rèn)的模塊管理器，用來安裝和管理Node模塊，是一個(gè)使用Node.js編寫的包管理工具。(ps:包就是一段實(shí)現(xiàn)某個(gè)特定功能的JavaScript代碼)

二、npm的使用

  1. npm的安裝
    npm不需要單獨(dú)安裝，在安裝Node的時(shí)候，會(huì)連帶一起安裝npm。
    但是，Node附帶的npm可能不是最新版本，最好用下面的命令，更新到最新版本。不過以下方法會(huì)有些問題，具體可以參考下這篇文章windows系統(tǒng)下npm升級(jí)的正確姿勢(shì)以及原理 
npm install npm@latest -g
  1. npm init
    npm init用來初始化生成一個(gè)新的package.json文件。它會(huì)向用戶提問一系列問題，如果你覺得不用修改默認(rèn)配置，一路回車就可以了。
    如果使用了-f（代表force）、-y（代表yes），則跳過提問階段，直接生成一個(gè)新的package.json文件。
  • 轉(zhuǎn)到對(duì)應(yīng)的目錄下，輸入npm init命令，一路回車
    image.png
  • npm init -y會(huì)直接生成package.json文件
    image.png
  1. npm set
    npm set用來設(shè)置環(huán)境變量
npm set init-author-name 'Your name'
npm set init-author-email 'Your email'
npm set init-author-url 'http://yourdomain.com'
npm set init-license 'ISC'

上面命令等于為npm init設(shè)置了默認(rèn)值，以后執(zhí)行npm init的時(shí)候，package.json的作者姓名、郵件、主頁、許可證字段就會(huì)自動(dòng)寫入預(yù)設(shè)的值。這些信息會(huì)存放在用戶主目錄的~/.npmrc文件，使得用戶不用每個(gè)項(xiàng)目都輸入。

  1. npm install -g和npm install
    Node模塊(npm包)采用npm install命令來安裝
    每個(gè)模塊可以全局安裝，也可以本地安裝。
  • 全局安裝(npm install -g <package name>) 指的是將一個(gè)模塊安裝到系統(tǒng)目錄中，各個(gè)項(xiàng)目都可以調(diào)用。一般來說，全局安裝只適用于工具模塊，比如eslint和gulp。
  • 本地安裝(npm install <package name>) 指的是將一個(gè)模塊下載到當(dāng)前項(xiàng)目的node_modules子目錄，然后只有在項(xiàng)目目錄之中，才能調(diào)用這個(gè)模塊
  • 下面的命令執(zhí)行之后將會(huì)在當(dāng)前的目錄下創(chuàng)建一個(gè) node_modules的目錄（如果不存在的話），然后將下載的包保存到這個(gè)目錄下
// 本地安裝
npm install <package name>

// 全局安裝
npm install -global <package name>
npm install -g <package name>
  • 例如安裝一個(gè)http-server和一個(gè)lodash的包
npm install -g http-server

npm install lodash
image.png
  1. npm install --save和npm install --save-dev
    install命令可以使用不同參數(shù)，指定所安裝的模塊屬于哪一種性質(zhì)的依賴關(guān)系，即出現(xiàn)在packages.json文件的哪一項(xiàng)中
    即：把一個(gè)模塊安裝到node-modules下，且將文件寫入到packges.json文件中的對(duì)應(yīng)項(xiàng)中
  • --save：模塊名將被添加到dependencies，可以簡(jiǎn)化為參數(shù)-S。
  • --save-dev: 模塊名將被添加到devDependencies，可以簡(jiǎn)化為參數(shù)-D。

添加依賴進(jìn)入 package.json 文件的 dependencies：

npm install <package_name> --save
# 或者
npm install <package_name> -S

添加依賴進(jìn)入 package.json 文件的devDependencies：

npm install <package_name> --save-dev
# 或者
npm install <package_name> -D
  1. npm uninstallx卸載包
    npm uninstall命令，卸載已安裝的模塊。
npm uninstall <package_name>
# 卸載全局模塊
npm uninstall <package_name> -global
  1. npm run xxx
    npm不僅可以用于模塊管理，還可以用于執(zhí)行腳本。package.json文件有一個(gè)scripts字段，可以用于指定腳本命令，供npm直接調(diào)用。
{
  "name": "myproject",
  "devDependencies": {
    "jshint": "latest",
    "browserify": "latest",
    "mocha": "latest"
  },
  "scripts": {
    "lint": "jshint **.js",
    "test": "mocha test/"
  }
}

上面代碼中，scripts字段指定了兩項(xiàng)命令lint和test。命令行輸入npm run-script lint或者npm run lint，就會(huì)執(zhí)行jshint **.js，輸入npm run-script test或者npm run test，就會(huì)執(zhí)行mocha test/。npm run是npm run-script的縮寫，一般都使用前者，但是后者可以更好地反應(yīng)這個(gè)命令的本質(zhì)。

npm run命令會(huì)自動(dòng)在環(huán)境變量$PATH添加node_modules/.bin目錄，所以scripts字段里面調(diào)用命令時(shí)不用加上路徑，這就避免了全局安裝NPM模塊。

npm run如果不加任何參數(shù)，直接運(yùn)行，會(huì)列出package.json里面所有可以執(zhí)行的腳本命令。

npm內(nèi)置了兩個(gè)命令簡(jiǎn)寫，npm test等同于執(zhí)行npm run test，npm start等同于執(zhí)行npm run start。

npm run會(huì)創(chuàng)建一個(gè)Shell，執(zhí)行指定的命令，并臨時(shí)將node_modules/.bin加入PATH變量，這意味著本地模塊可以直接運(yùn)行。

三、package.json

每個(gè)項(xiàng)目的根目錄下面，一般都有一個(gè)package.json文件，定義了這個(gè)項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息（比如名稱、版本、許可證等元數(shù)據(jù)）。npm install命令根據(jù)這個(gè)配置文件，自動(dòng)下載所需的模塊，即配置項(xiàng)目所需的運(yùn)行和開發(fā)環(huán)境。

package.json文件可以手工編寫，也可以使用npm init命令自動(dòng)生成。

下面是一個(gè)package.json文件

{
    "name": "Hello World",
    "version": "1.0.0",
    "author": "",
    "description": "第一個(gè)node.js程序",
    "keywords":[],
    "repository": {
        "type": "git",
        "url": "https://path/to/url"
    },
    "license":"ISC",
    "bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
    "scripts": {
        "start": "node index.js"
    },
    "dependencies": {
        "express": "latest",
        "mongoose": "~3.8.3",
        "handlebars-runtime": "~1.0.12"
    },
    "devDependencies": {
        "bower": "~1.2.8",
        "grunt": "~0.4.1",
        "grunt-contrib-concat": "~0.3.0",
        "grunt-contrib-jshint": "~0.7.2",
        "grunt-contrib-uglify": "~0.2.7",
        "grunt-contrib-clean": "~0.5.0",
        "browserify": "2.36.1",
        "grunt-browserify": "~1.3.0",
    }
}

簡(jiǎn)單介紹默認(rèn)信息：

  • name: 當(dāng)前目錄名稱
  • version: 總會(huì)是 1.0.0
  • description: 來自readme文件，沒有就是空字符串 ""
  • main: 總會(huì)是 index.js
  • scripts: 默認(rèn)情況下會(huì)創(chuàng)建一個(gè)空的測(cè)試腳本
  • keywords: 為空
  • author: 為空
  • license:ISC
  • bugs: 來自當(dāng)前目錄的信息（如果存在）
  • homepage: 來自當(dāng)前目錄的信息（如果存在）
  1. scripts字段
    scripts指定了運(yùn)行腳本命令的npm命令行縮寫，比如start指定了運(yùn)行npm run start時(shí)，所要執(zhí)行的命令。
  2. dependencies字段，devDependencies字段
    它們都指向一個(gè)對(duì)象。該對(duì)象的各個(gè)成員，分別由模塊名和對(duì)應(yīng)的版本要求組成，表示依賴的模塊及其版本范圍。
    • dependencies字段指定了項(xiàng)目運(yùn)行所依賴的模塊，這個(gè)對(duì)象里面的內(nèi)容就是我們這個(gè)項(xiàng)目所依賴的 js模塊包
    • devDependencies指定項(xiàng)目開發(fā)所需要的模塊,在我們開發(fā)的時(shí)候會(huì)用到的一些包，只是在開發(fā)環(huán)境中需要用到，但是在別人引用我們包的時(shí)候，不會(huì)用到這些內(nèi)容，放在devDependencies 的包

當(dāng)擁有了一個(gè)完整的 package.json文件的時(shí)候，就可以讓人一眼看出來，這個(gè)模塊的基本信息，和這個(gè)模塊所需要依賴的包。我們可以通過 npm install 就可以很方便的下載好這個(gè)模塊所需要的包。

npm install默認(rèn)會(huì)安裝dependencies字段和 devDependencies字段中的所有模塊，如果使用--production 參數(shù)，可以只安裝 dependencies字段的模塊。

 npm install --production
  1. main字段
    main字段指定了加載的入口文件，require('moduleName')就會(huì)加載這個(gè)文件。這個(gè)字段的默認(rèn)值是模塊根目錄下面的index.js。

四、流程捋一遍

  1. 從Node.js官網(wǎng)下載并安裝Node，安裝Node的同時(shí)npm也會(huì)一并安裝,可使用npm -v查看npm是否成功安裝，若出現(xiàn)對(duì)應(yīng)版本號(hào)，則安裝成功

    npm版本查詢

  2. 創(chuàng)建一個(gè)文件夾，如npmdemo

  3. 打開終端，cd到npmdemo文件夾下，使用npm init -y來創(chuàng)建一個(gè)默認(rèn)的package.json文件

    默認(rèn)package文件創(chuàng)建

  4. 本地安裝一個(gè)依賴(包)，如axios,使用npm install axios

    包安裝

    會(huì)把axios模塊安裝到node-modules(若沒有node-modules，會(huì)自動(dòng)生成，（插一句node-modules目錄下的.bin目錄保存著Node模塊的可執(zhí)行腳本）)下，且將文件寫入到packges.json文件中的dependencies對(duì)象中
    image.png

  5. 至此，我們就完成了一個(gè)包的安裝，要使用他，就可在對(duì)應(yīng)文件中require即可

// index.js
const axios = require('axios');
  1. 更新包,cd到項(xiàng)目的根目錄中，運(yùn)行update命令
//更新所有的包
npm update
// 更新單獨(dú)的包
npm update axios

參考資料

http://javascript.ruanyifeng.com/nodejs/npm.html
http://www.itdecent.cn/p/dca65f9493ad

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容