高級任務(wù)5（npm_npmscript_webpack_node應(yīng)用）

題目1： 如何全局安裝一個(gè) node 應(yīng)用?

Node模塊采用npm install命令安裝。

每個(gè)模塊可以“全局安裝”，也可以“本地安裝”。“全局安裝”指的是將一個(gè)模塊安裝到系統(tǒng)目錄中，各個(gè)項(xiàng)目都可以調(diào)用。一般來說，全局安裝只適用于工具模塊，比如eslint和gulp?！氨镜匕惭b”指的是將一個(gè)模塊下載到當(dāng)前項(xiàng)目的node_modules子目錄，然后只有在項(xiàng)目目錄之中，才能調(diào)用這個(gè)模塊。

# 本地安裝
 npm install <package name>

# 全局安裝
 npm install -g <package name>

題目2： package.json 有什么作用？

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

{
    "name": "Hello World",
    "version": "0.0.1",
    "author": "張三",
    "description": "第一個(gè)node.js程序",
    "keywords":["node.js","javascript"],
    "repository": {
        "type": "git",
        "url": "https://path/to/url"
    },
    "license":"MIT",
    "engines": {"node": "0.10.x"},
    "bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
    "contributors":[{"name":"李四","email":"lisi@example.com"}],
    "scripts": {
        "start": "node index.js"
    },
    "dependencies": {
        "express": "latest",
        "mongoose": "~3.8.3",
        "handlebars-runtime": "~1.0.12",
        "express3-handlebars": "~0.5.0",
        "MD5": "~1.2.0"
    },
    "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",
    }
}

題目3： npm install --save app 與 npm install --save-dev app有什么區(qū)別?

這兩條命令都會下載app到node_modules文件夾下面，不同之處在于：
npm install --save app：模塊名app將被添加到package.json下的dependencies。
npm install --save-dev app：模塊名app將被添加到package.json下的devDependencies。

此外：dependencies下的模塊，是我們生產(chǎn)環(huán)境中需要的依賴，devDependencies只用于開發(fā)階段完成集成測試等功能模塊依賴。因此，執(zhí)行npm install server-mock時(shí)，只會下載它的dependencies下的模塊，而不會下載devDependencies的模塊。

如果將node_modules文件夾刪掉，則執(zhí)行npm install默認(rèn)會安裝dependencies字段和devDependencies字段中的所有模塊。

執(zhí)行如下兩條命令：
npm install --save easytpl
npm install --save-dev server-mock

通常我們自己寫一個(gè)模塊發(fā)布到npm上面時(shí)，不需要上傳node_modules文件夾下的依賴模塊，這是因?yàn)檫@個(gè)文件夾很大。用戶從npm下載我們的模塊時(shí)，執(zhí)行npm install會默認(rèn)會安裝dependencies字段和devDependencies字段中的所有模塊。這時(shí)我們可以新建一個(gè).gitignore文件，里面寫上node_modules，這樣當(dāng)我們把代碼上傳到github時(shí)，便不會上傳node_modules文件夾了。

題目4： nodule_modules的查找路徑是怎樣的?

參考：require() 源碼解讀
當(dāng) Node 遇到 require(X) 時(shí)，按下面的順序處理。
(1).如果 X是內(nèi)置模塊（比如 require('http'）)
a. 返回該模塊。
b. 不再繼續(xù)執(zhí)行。
(2).如果 X 以"./"或者 "/" 或者"../"開頭
a. 根據(jù) X所在的父模塊，確定 X 的絕對路徑。
b. 將 X 當(dāng)成文件，依次查找下面文件，只要其中有一個(gè)存在，就返回該文件，不再繼續(xù)執(zhí)行。

X
X.js
X.json
X.node

c. 將 X當(dāng)成目錄，依次查找下面文件，只要其中有一個(gè)存在，就返回該文件，不再繼續(xù)執(zhí)行。

X/package.json（main字段）
X/index.js
X/index.json
X/index.node

(3).如果 X 不帶路徑
　a. 根據(jù) X 所在的父模塊，確定 X 可能的安裝目錄。
　b. 依次在每個(gè)目錄中，將 X當(dāng)成文件名或目錄名加載。
(4).拋出 "not found"

舉例：
當(dāng)前腳本文件/home/ry/projects/foo.js執(zhí)行了 require('bar') ，這屬于上面的第三種情況。Node 內(nèi)部運(yùn)行過程如下。
首先，確定 x 的絕對路徑可能是下面這些位置，依次搜索每一個(gè)目錄。

/home/ry/projects/node_modules/bar
/home/ry/node_modules/bar
/home/node_modules/bar
/node_modules/bar

搜索時(shí)，Node 先將 bar 當(dāng)成文件名，依次嘗試加載下面這些文件，只要有一個(gè)成功就返回。

bar
bar.js
bar.json
bar.node

如果都不成功，說明 bar 可能是目錄名，于是依次嘗試加載下面這些文件。

bar/package.json（main字段）
bar/index.js
bar/index.json
bar/index.node

如果在所有目錄中，都無法找到 bar 對應(yīng)的文件或目錄，就拋出一個(gè)錯誤。

題目5： npm3與 npm2相比有什么改進(jìn)？yarn和 npm 相比有什么優(yōu)勢? (選做題目)

參考：npm2 npm3 yarn 的故事
npm2存在的問題:
比如一個(gè) App 里模塊 A 和 C 都依賴B，無論被依賴的 B 是否是同一個(gè)版本，都會生成對應(yīng)結(jié)構(gòu)：

  • 太深的目錄樹結(jié)構(gòu)會嚴(yán)重影響效率
  • 在 Windows 下可能會超出系統(tǒng)路徑限制的長度

npm3的改進(jìn)：
針對 npm2 的問題，npm3 加了點(diǎn)算法，直白的解釋就是：npm install 時(shí)會按照 package.json 里依賴的順序依次解析，遇到新的包就把它放在第一級目錄，后面如果遇到一級目錄已經(jīng)存在的包，會先判斷版本，如果版本一樣則忽略，否則會按照 npm2 的方式依次掛在依賴包目錄下。
比如上面的例子：


在包版本差異化不太嚴(yán)重的情況下，這種構(gòu)建方式會幾乎把所有包放在一級目錄下，很大程度上提升了效率以及節(jié)省了部分磁盤空間。

但npm3也存在開發(fā)環(huán)境和測試環(huán)境的 node_modules 目錄結(jié)構(gòu)不一樣以及其他的問題，因此FaceBook搞了 yarn 用來替代 npm了。
yarn 構(gòu)建步驟如下：
Resolution: 向倉庫請求依賴關(guān)系
Fetching: 看看本地緩存了沒有，否則把包拉到緩存里
Linking: 直接全部從緩存里構(gòu)建好目錄樹放到 node_modules 里

題目6： 使用 webpack 替換 入門-任務(wù)15中模塊化使用的 requriejs

預(yù)覽
代碼
本地開啟服務(wù)器：


webpack打包：

題目7： 開發(fā)一個(gè) node 命令行天氣應(yīng)用用于查詢用戶當(dāng)前所在城市的天氣，發(fā)布到 npm 上去?？梢酝ㄟ^如下方式安裝使用(可使用api.jirengu.com里提供的查詢天氣接口) (選做題目)

代碼

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

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

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