高級5:npm-npmscript-gulp-webpack

題目1: 如何全局安裝一個 node 應用?

npm install -g 應用名稱

題目2: package.json 有什么作用?

{
  "name": "test-demo0", //項目名稱,發(fā)布項目后拂封,可以通過該名稱在npm上搜索到該項目,必須全網(wǎng)唯一
  "version": "1.0.0",   //版本號嘿般,當項目做了改動時需要修改版本號再發(fā)布
  "description": "這是我的測試版本",  //工程描述酬滤。
  "main": "index.js",     //入口文件
  "scripts": {      //自定義的npm腳本,除test和start兩條命令可以用npm xxx在命令行執(zhí)行之外其他的命令必須用npm run xxx執(zhí)行,這個對象中的鍵值對鍵名代表npm腳本的命令,而值則代表實際執(zhí)行的命令雅采。
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [       //工程描述關鍵詞
    "demo0"
  ],
  "author": "yan",  //工程作者
  "license": "ISC", //工程遵循的開源協(xié)議
  "dependencies": { //工程所依賴的包,當在執(zhí)行npm install命令時慨亲,將會根據(jù)此對象中的屬性來安裝依賴婚瓜。
    "marked": "^0.3.6"
  },
  "devDependencies": {  //工程構建者構建工程所依賴的包,這個對象中的依賴僅僅在構建工程時安裝
    "easytpl": "^1.0.4"
  }
}

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

  • npm install --save app: 將產(chǎn)品運行時(或生產(chǎn)環(huán)境)需要的依賴模塊添加到 package.json 的 dependencies 中刑棵,在發(fā)布后還需要繼續(xù)使用巴刻,否則就運行不了


    image.png
  • npm install --save-dev app:將產(chǎn)品的開發(fā)環(huán)境需要的依賴模塊添加到 package.json 的 devDependencies 中,只在開發(fā)時才用到蛉签,發(fā)布后用不到它胡陪。


    image.png

區(qū)別在于:當你把項目發(fā)布上線后,別人使用 npm install使用你的項目時碍舍,
并不會下載devDependencies里的模塊柠座。

題目4: node_modules的查找路徑是怎樣的?

從當前文件目錄開始查找node_modules目錄;然后依次進入父目錄乒验,查找父目錄下的node_modules目錄愚隧;依次迭代蒂阱,直到根目錄下的node_modules目錄锻全。比如某個模塊的絕對路徑是/home/user/foo.js狂塘,在該模塊中使用require('bar')方式加載模塊時,node將在下面的位置進行搜索:

/home/user/node_modules/bar

/home/node_modules/bar

/node_modules/bar

題目6: webpack是什么鳄厌?和其他同類型工具比有什么優(yōu)勢荞胡?

webpack是一款模塊加載器兼打包工具,它能把各種資源JS/CSS/圖片等都作為模塊來使用和處理了嚎。優(yōu)勢如下:

  • webpack 是以 commonJS 的形式來書寫腳本泪漂,但對 AMD/CMD 的支持也很全面,方便舊項目進行代碼遷移歪泳。
  • webpack可以將代碼拆分成多個區(qū)塊萝勤,每個區(qū)塊包含一個或多個模塊,它們可以按需異步加載呐伞,極大地減少了頁面初次加載時間敌卓。
  • webpack 本身只能處理原生的 JS 模塊,但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JS 模塊伶氢。這樣趟径,任何資源都可以成為 webpack 可以處理的模塊。
  • webpack 有一個智能解析器癣防,幾乎可以處理任何第三方庫蜗巧,無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件蕾盯。
  • webpack 還有一個功能豐富的插件系統(tǒng)幕屹。大多數(shù)內(nèi)容功能都是基于這個插件系統(tǒng)運行的,還可以開發(fā)和使用開源的 webpack 插件级遭,來滿足各式各樣的需求香嗓。
  • webpack使用異步 I/O 和多級緩存提高運行效率,使得它能夠快速增量編譯装畅。

題目7:npm script是什么靠娱?如何使用?

package.json 文件有一個 scripts 字段掠兄,可以用于指定腳本命令像云,供 npm 直接調(diào)用。npm 內(nèi)置了兩個簡寫的命令:npm test 和 npm start蚂夕,其它命令要寫成 npm run xxx 形式

題目8: 使用 webpack 替換 入門-任務15中模塊化使用的 requriejs

代碼地址:https://github.com/a625689014/webpack
預覽地址:https://a625689014.github.io/webpack/page.html

題目9:gulp是什么迅诬?使用 gulp 實現(xiàn)圖片壓縮、CSS 壓縮合并婿牍、JS 壓縮合并

  • 它是一款nodejs應用侈贷。
  • 它是打造前端工作流的利器,打包等脂、壓縮俏蛮、合并撑蚌、git、遠程操作.....
  • 簡單易用
  • 高質(zhì)量的插件
    代碼地址:https://github.com/a625689014/gulp

題目10: 開發(fā)一個 node 命令行天氣應用用于查詢用戶當前所在城市的天氣搏屑,發(fā)布到 npm 上去争涌。可以通過如下方式安裝使用(可使用api.jirengu.com里提供的查詢天氣接口)

使用方式: npm i -g weather-demo5
終端輸入:weather可查看當前城市天氣;weather+城市名可忱绷担看對應城市天氣

image.png
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末亮垫,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子伟骨,更是在濱河造成了極大的恐慌饮潦,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件携狭,死亡現(xiàn)場離奇詭異害晦,居然都是意外死亡,警方通過查閱死者的電腦和手機暑中,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進店門壹瘟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鳄逾,你說我怎么就攤上這事稻轨。” “怎么了雕凹?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵殴俱,是天一觀的道長。 經(jīng)常有香客問我枚抵,道長线欲,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任汽摹,我火速辦了婚禮李丰,結果婚禮上,老公的妹妹穿的比我還像新娘逼泣。我一直安慰自己趴泌,他們只是感情好,可當我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布拉庶。 她就那樣靜靜地躺著嗜憔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪氏仗。 梳的紋絲不亂的頭發(fā)上吉捶,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天,我揣著相機與錄音,去河邊找鬼呐舔。 笑死币励,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的滋早。 我是一名探鬼主播,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼砌们,長吁一口氣:“原來是場噩夢啊……” “哼杆麸!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起浪感,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤昔头,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后影兽,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體揭斧,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年峻堰,在試婚紗的時候發(fā)現(xiàn)自己被綠了讹开。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡捐名,死狀恐怖旦万,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情镶蹋,我是刑警寧澤成艘,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站贺归,受9級特大地震影響淆两,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜拂酣,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一秋冰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧婶熬,春花似錦丹莲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至性含,卻和暖如春洲赵,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工叠萍, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留芝发,地道東北人。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓苛谷,卻偏偏與公主長得像辅鲸,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子腹殿,可洞房花燭夜當晚...
    茶點故事閱讀 44,864評論 2 354

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

  • 1: 如何全局安裝一個 node 應用? 如何全局安裝一個 node 應用 2: package.json 有什么...
    曉風殘月1994閱讀 291評論 0 0
  • 題目1: 如何全局安裝一個 node 應用? “全局安裝”指的是將一個模塊安裝到系統(tǒng)目錄中独悴,各個項目都可以調(diào)用。一...
    saintkl閱讀 294評論 0 0
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺锣尉,特此分享以備自己日后查看刻炒,也希望更多的人看到...
    小小字符閱讀 8,164評論 7 35
  • 題目1: 如何全局安裝一個 node 應用? Node模塊采用npm install命令安裝。 每個模塊可以“全局...
    饑人谷_小敏閱讀 479評論 0 1
  • 我不夠好自沧,所以在時間的光陰里急急忙忙的穿梭坟奥。 我不夠好,所以沒能將生活處理的井井有條拇厢。 我不夠好爱谁,所以遇到一些事情...
    千浮生閱讀 107評論 0 0