npm_npmscript_webpack_node應(yīng)用

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

每個(gè)模塊可以“全局安裝”专执,也可以“本地安裝”奈偏。
“全局安裝”指的是將一個(gè)模塊安裝到系統(tǒng)目錄中坞嘀,各個(gè)項(xiàng)目都可以調(diào)用。一般來(lái)說(shuō)惊来,全局安裝只適用于工具模塊丽涩,比如eslint和gulp。例如:/user/local/bin/目錄下裁蚁。
“本地安裝”指的是將一個(gè)模塊下載到當(dāng)前項(xiàng)目的node_modules子目錄矢渊,然后只有在項(xiàng)目目錄之中检眯,才能調(diào)用這個(gè)模塊。例如:./node-modules/

本地安裝
npm install <package name>
卸載:npm uninstall -g XXX

全局安裝
npm install -g <package name

2.package.json 有什么作用昆淡?

npm init命令生成package.json文件,這個(gè)文件定義了項(xiàng)目所需的各種模板及相關(guān)配置信息(比如名稱(chēng)刽严、版本昂灵、許可證等元數(shù)據(jù))。npm install命令根據(jù)這個(gè)配置文件舞萄,自動(dòng)下載所需的模塊眨补,也就是配置項(xiàng)目所需的運(yùn)行和開(kāi)發(fā)環(huán)境。

{
  "name": "cover_md",  //項(xiàng)目名稱(chēng)
  "version": "1.0.6",  //項(xiàng)目版本號(hào)
  "description": "一個(gè) markdown 轉(zhuǎn) html 的小工具",  //入口文件
  "main": "index.js",  //指定了加載的入口文件倒脓,require('moduleName')就會(huì)加載這個(gè)文件撑螺。這個(gè)字段的默認(rèn)值是模塊根目錄下面的index.js
  "bin": { 
// bin參數(shù)是{ 命令名:文件名 }的格式,指定了各個(gè)內(nèi)部命令對(duì)應(yīng)的可執(zhí)行文件的位置崎弃,相當(dāng)于在user/local/bin下創(chuàng)建一個(gè)快捷方式,映射到對(duì)應(yīng)的文件甘晤,執(zhí)行所映射的文件
// 執(zhí)行`convert`命令時(shí),將運(yùn)行對(duì)應(yīng)文件(./bin/server)
// ./bin/convert文件頭部需添加 #!/usr/bin/env node, 表示將以node運(yùn)行這個(gè)文件

    "convert": "./bin/convert"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1" 
    "start" : "node app.js" //執(zhí)行當(dāng)前目錄下app.js
      //一般默認(rèn)一個(gè)test的空文件夾饲做、用作寫(xiě)測(cè)試代碼线婚,`npm test`即可運(yùn)行。
      //自定義的命令名需加run才能與運(yùn)行盆均,`npm run make`
  },
  "keywords": [  //關(guān)鍵字塞弊,是一個(gè)字符串的數(shù)組,也有助于人們?cè)趎pm搜索你的包
    "markdown",
    "html",
    "convert"
  ],
  "author": "wcon",  //作者名稱(chēng)
  "license": "ISC", //協(xié)議
  "repository": {
    "type": "git",   //該包在github上的代碼托管倉(cāng)庫(kù)地址
    "url": "git+https://github.com/wcongratulation/markdow.git"
  },
  "dependencies": {   // 正式使用時(shí)依賴(lài)的包, npm install --save xxx 生成
        "my_dep": "^1.0.0"
    },
  "devDependencies" : {  //開(kāi)發(fā)或者測(cè)試時(shí)泪姨,依賴(lài)的包游沿。npm install --save-dev xxx生成
        "my_test_framework": "^3.1.0"
    }
  "bugs": {
    "url": "https://github.com/wcongratulation/markdow/issues" //一個(gè)對(duì)象,包含url網(wǎng)址和郵箱肮砾,當(dāng)使用者發(fā)現(xiàn)問(wèn)題時(shí)诀黍,可以通過(guò)這兩種方式提交問(wèn)題
  },
  "homepage": "https://github.com/wcongratulation/markdow#readme"  //主頁(yè),項(xiàng)目主頁(yè)的地址
}

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

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

這兩條命令都會(huì)下載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)境中需要的依賴(lài)旷档,devDependencies只用于開(kāi)發(fā)階段完成集成測(cè)試等功能模塊依賴(lài)模叙。因此,執(zhí)行npm install server-mock時(shí)鞋屈,只會(huì)下載它依賴(lài)層級(jí)dependencies下的模塊范咨,而不會(huì)下載devDependencies的模塊故觅,需要手動(dòng)下載。

4.node_modules的查找路徑是怎樣的?

1.如果require的內(nèi)容以./或者../開(kāi)頭的按照正常的查找路徑渠啊。
2.require內(nèi)容不加./或者../查找的js文件输吏。比如需要查找的依賴(lài)包叫“easytpl”,它會(huì)先在當(dāng)前目錄下查找node_module, 看有沒(méi)有easytpl文件夾(即easytpl包),如果有的話(huà)替蛉,會(huì)讀取easytpl文件夾下的package.json,找到里面的main參數(shù),加載main里對(duì)應(yīng)的路徑的文件贯溅。如果當(dāng)前目錄下沒(méi)有node_module,或當(dāng)前目錄下的node_module沒(méi)找到easytpl躲查,便向上級(jí)目錄中查詢(xún)它浅,直到系統(tǒng)根目錄。
3.node全局安裝在系統(tǒng)根目錄下镣煮,所以全局安裝后可在所有目錄下使用姐霍。

 如果當(dāng)前文件是'/home/ry/projects/foo.js' 然后require('bar.js'), 那么node將會(huì)按照以下路徑查找
/home/ry/projects/node_modules/bar.js
/home/ry/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js

nodejs路徑repuire的路徑規(guī)則

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

npm2和npm3有一個(gè)很大的區(qū)別, 就是組織包的結(jié)構(gòu). npm2組織依賴(lài)的包是按照樹(shù)形組織的. npm3將其改進(jìn)為扁平結(jié)構(gòu)典唇。
npm2會(huì)將所依賴(lài)的包存放到當(dāng)前目錄的./node_modules/目錄下. 而被安裝的包又會(huì)依賴(lài)其他的包的話(huà), 則會(huì)存放到該包的./node_modules下. 所以, 當(dāng)依賴(lài)結(jié)構(gòu)很復(fù)雜的時(shí)候, 目錄結(jié)構(gòu)會(huì)非常深. 不管是性能還是操作上, 體驗(yàn)都不怎么好镊折。
而在npm3中, 采用扁平的目錄結(jié)構(gòu), 二級(jí)依賴(lài)會(huì)放到當(dāng)前目錄的node_modules的里, 與一級(jí)包在同一目錄。
例如:
比如蚓聘,有一個(gè)模塊A腌乡,依賴(lài) B。npm3會(huì)將模塊B放置到與A同級(jí)目錄下夜牡,而npm2會(huì)將B放置到A的依賴(lài)模塊目錄下

Paste_Image.png

npm2与纽,一個(gè) App 里模塊 A 和 C 都依賴(lài)B,無(wú)論被依賴(lài)的 B 是否是同一個(gè)版本塘装,都會(huì)生成對(duì)應(yīng)結(jié)構(gòu)急迂。
npm3,npm install 時(shí)會(huì)按照 package.json 里依賴(lài)的順序依次解析蹦肴,遇到新的包就把它放在第一級(jí)目錄僚碎,后面如果遇到一級(jí)目錄已經(jīng)存在的包,會(huì)先判斷版本阴幌,如果版本一樣則忽略勺阐,否則會(huì)按照 npm2 的方式依次掛在依賴(lài)包目錄下


Paste_Image.png

npm3也存在開(kāi)發(fā)環(huán)境和測(cè)試環(huán)境的 node_modules 目錄結(jié)構(gòu)不一樣以及其他的問(wèn)題,因此FaceBook搞了 yarn 用來(lái)替代 npm

  • 快速—會(huì)緩存已經(jīng)下載過(guò)的包矛双,避免重復(fù)下載
  • 安全 — 下載前會(huì)檢查簽名及包的完整性

yarn 構(gòu)建步驟如下:

  • Resolution: 向倉(cāng)庫(kù)請(qǐng)求依賴(lài)關(guān)系
  • Fetching: 看看本地緩存了沒(méi)有渊抽,否則把包拉到緩存里
  • Linking: 直接全部從緩存里構(gòu)建好目錄樹(shù)放到 node_modules 里
    參考 npm2 npm3 yarn 的故事

6.webpack是什么?和其他同類(lèi)型工具比有什么優(yōu)勢(shì)议忽?

WebPack是一個(gè)模塊化加載器兼打包工具懒闷,它同時(shí)支持AMD、CMD等加載規(guī)范。
它能夠打包WebHTML愤估、js帮辟、CSS以及各種靜態(tài)文件(圖片、字體等)玩焰。
對(duì)于不同類(lèi)型的資源由驹,webpack有對(duì)應(yīng)的模塊加載器。
webpack模塊打包器會(huì)分析模塊間的依賴(lài)關(guān)系昔园,最后 生成了優(yōu)化且合并后的靜態(tài)資源荔棉。
優(yōu)勢(shì):
1.代碼分割:按需加載模塊
2.Loaders:通過(guò)加載器我們可以將其他類(lèi)型的資源轉(zhuǎn)換為JS輸出
3.webpack提供了強(qiáng)大的插件系統(tǒng),當(dāng)webpack內(nèi)置的功能不能滿(mǎn)足我們的構(gòu)建需求時(shí)蒿赢,我們可以通過(guò)使用插件來(lái)提高工作效率。因?yàn)樗梢约虞d幾乎所有的第三方庫(kù)

7.npm scripts 是什么渣触?如何使用羡棵?

npm script 是 package.json 中的一個(gè)屬性
可以在這個(gè)屬性中自定義 npm 命令,輸入這個(gè)命令就會(huì)執(zhí)行指定的操作
如:

// 在 package.json 中
{
  ...
  'script': {
    'create': 'mkdir app'
  }
  ...
}

// 在命令行中輸入:
$ npm run create
// 就會(huì)運(yùn)行指令 mkdir app, 表示創(chuàng)建一個(gè)文件app

使用 webpack 替換 入門(mén)-任務(wù)15中模塊化使用的 requriejs

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末嗅钻,一起剝皮案震驚了整個(gè)濱河市皂冰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌养篓,老刑警劉巖秃流,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異柳弄,居然都是意外死亡舶胀,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)碧注,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)嚣伐,“玉大人,你說(shuō)我怎么就攤上這事萍丐⌒耍” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵逝变,是天一觀的道長(zhǎng)基茵。 經(jīng)常有香客問(wèn)我,道長(zhǎng)壳影,這世上最難降的妖魔是什么拱层? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮态贤,結(jié)果婚禮上舱呻,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好箱吕,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布芥驳。 她就那樣靜靜地躺著,像睡著了一般茬高。 火紅的嫁衣襯著肌膚如雪兆旬。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,262評(píng)論 1 308
  • 那天怎栽,我揣著相機(jī)與錄音丽猬,去河邊找鬼。 笑死熏瞄,一個(gè)胖子當(dāng)著我的面吹牛脚祟,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播强饮,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼由桌,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了邮丰?” 一聲冷哼從身側(cè)響起行您,我...
    開(kāi)封第一講書(shū)人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎剪廉,沒(méi)想到半個(gè)月后娃循,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡斗蒋,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年捌斧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泉沾。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡骤星,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出爆哑,到底是詐尸還是另有隱情洞难,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布揭朝,位于F島的核電站队贱,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏潭袱。R本人自食惡果不足惜柱嫌,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望屯换。 院中可真熱鬧编丘,春花似錦与学、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至抑片,卻和暖如春卵佛,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背敞斋。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工截汪, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人植捎。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓衙解,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親焰枢。 傳聞我的和親對(duì)象是個(gè)殘疾皇子丢郊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容