npm-npmscript-gulp-webpack

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

npm install -g <module-name>

2. 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)境伺糠。

npm install -y //快速創(chuàng)建
{
  "name": "test",  //名稱
  "version": "0.0.1",  //版本
  "description": "This is my first node.js program.",  //描述
  "main": "index.js",  //入口
  "keywords": [  //關(guān)鍵字
                       "node.js",
                       "javascript"
  ],
  "scripts": {  //執(zhí)行命令行
      "start": "node index.js"
  },
  "author": "Mike",  //作者
  "license":"MIT",  //認(rèn)證
  "dependencies": {  //生產(chǎn)環(huán)境依賴
                  "express": "latest"
  },
  "devDependencies": {  //開發(fā)環(huán)境依賴
           "bower": "~1.2.8",
           "grunt": "~0.4.1"
  }
}

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

--save 將產(chǎn)品運(yùn)行時(shí)(或生產(chǎn)環(huán)境)需要的依賴模塊添加到 package.json 的 dependencies 中馅扣,
在發(fā)布后還需要繼續(xù)使用小作,否則就運(yùn)行不了开呐。
--save-dev 將產(chǎn)品的開發(fā)環(huán)境需要的依賴模塊添加到 package.json 的 devDependencies 中县忌,
只在開發(fā)時(shí)才用到擎析,發(fā)布后用不到它苗桂。

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

從當(dāng)前文件目錄開始查找node_modules目錄防楷;然后依次進(jìn)入父目錄校赤,查找父目錄下的node_modules目錄躁锡;依次迭代午绳,直到根目錄下的node_modules目錄。比如某個(gè)模塊的絕對(duì)路徑是/home/user/foo.js映之,在該模塊中使用require('bar')方式加載模塊時(shí)拦焚,node將在下面的位置進(jìn)行搜索:

/home/user/node_modules/bar

/home/node_modules/bar

/node_modules/bar

5. npm3與 npm2相比有什么改進(jìn)?

npm2
下圖是npm2的包依賴的目錄構(gòu)成形式杠输,很容易發(fā)現(xiàn)一個(gè)問題赎败,如果一個(gè)鏈?zhǔn)揭蕾嚪浅I睿夸浵鄳?yīng)也會(huì)越來越深蠢甲,查找會(huì)越來越慢僵刮。而且當(dāng)我們的不同modules對(duì)相同的包進(jìn)行依賴時(shí),會(huì)出現(xiàn)重復(fù),而且很有可能它們的版本不一樣(二次開發(fā))但他們的層級(jí)是一樣的搞糕。

npm3

再看看npm3的扁平式目錄結(jié)構(gòu)策略:將所有的依賴優(yōu)先放置第一級(jí)目錄(即/node-modules/下)勇吊。


APP依賴Module A
Module A 依賴 Module B —————– ./node-modules
Module A 依賴 Module C —————– ./node-modules
Module B 依賴 Module D version 1.0 —– ./node-modules
Module C 依賴 Module D version 2.0 —– ./node-modules/ModuleC/

當(dāng)遇到版本不同時(shí),npm3會(huì)將更高版本者放入依賴它的Module之下窍仰,層級(jí)關(guān)系映射版本關(guān)系萧福,有種漸進(jìn)增強(qiáng)的感覺,低版本作為基礎(chǔ)依賴辈赋,版本遞進(jìn)則深入一層目錄鲫忍。而其他的不存在版本遞進(jìn)的Module一律放入第一層目錄,大大減少了查找時(shí)間钥屈,提高效率悟民。

yarn和 npm 相比有什么優(yōu)勢(shì)?

yarn是facebook為自己的sandbox形式的開發(fā)環(huán)境創(chuàng)造的包管理器。
相比npm優(yōu)勢(shì)如下:
既然是sandbox篷就,摒棄外部環(huán)境時(shí)射亏,對(duì)于離線形式的包安裝的支持就很重要,這也是它的最大特點(diǎn):對(duì)所有已經(jīng)安裝過的包進(jìn)行cache緩存竭业,下次安裝這些包時(shí)直接從緩存里拉取智润,對(duì)比與npm對(duì)網(wǎng)絡(luò)環(huán)境的依賴,yarn解決了這個(gè)痛點(diǎn)未辆。

相對(duì)于npm的隊(duì)列式安裝(當(dāng)一個(gè)包安裝完畢后才會(huì)執(zhí)行下一個(gè))窟绷,yarn支持Parallel Installation,速度更快咐柜。

clean:yarn支持清理命令兼蜈,可以清理node-modules目錄下的包文件,比如一些捆綁進(jìn)入的廣告以及不必要的文件拙友。

網(wǎng)絡(luò)恢復(fù):一個(gè)單獨(dú)的請(qǐng)求并不會(huì)導(dǎo)致整個(gè)安裝失敗为狸,這些請(qǐng)求可以重試直到請(qǐng)求恢復(fù)正常。

yarn.lock: 這是一個(gè)版本鎖遗契,它記錄了所有包的版本信息辐棒,也就是說,它保證了在任何一臺(tái)設(shè)備上牍蜂,你對(duì)于包的拉取安裝都是嚴(yán)格遵循這個(gè)版本信息漾根,從而保證不出現(xiàn):But it works on my computer這樣煩人的問題。

6. webpack是什么捷兰?和其他同類型工具比有什么優(yōu)勢(shì)立叛?

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

webpack 是以 commonJS 的形式來書寫腳本秘蛇,但對(duì) AMD/CMD 的支持也很全面其做,方便舊項(xiàng)目進(jìn)行代碼遷移。
webpack可以將代碼拆分成多個(gè)區(qū)塊赁还,每個(gè)區(qū)塊包含一個(gè)或多個(gè)模塊妖泄,它們可以按需異步加載,極大地減少了頁面初次加載時(shí)間艘策。
webpack 本身只能處理原生的 JS 模塊蹈胡,但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JS 模塊。這樣朋蔫,任何資源都可以成為 webpack 可以處理的模塊罚渐。
webpack 有一個(gè)智能解析器,幾乎可以處理任何第三方庫驯妄,無論它們的模塊形式是 CommonJS荷并、 AMD 還是普通的 JS 文件。
webpack 還有一個(gè)功能豐富的插件系統(tǒng)青扔。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的源织,還可以開發(fā)和使用開源的 webpack 插件,來滿足各式各樣的需求微猖。
webpack使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率谈息,使得它能夠快速增量編譯。

7. npm script是什么凛剥?如何使用侠仇?

package.json 文件有一個(gè) scripts 字段,可以用于指定腳本命令当悔,供 npm 直接調(diào)用傅瞻。npm 內(nèi)置了兩個(gè)簡(jiǎn)寫的命令:npm test 和 npm start踢代,其它命令要寫成 npm run xxx 形式盲憎。

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

預(yù)覽

9. gulp是什么?使用 gulp 實(shí)現(xiàn)圖片壓縮胳挎、CSS 壓縮合并饼疙、JS 壓縮合并

gulp.js是一種基于流的,代碼優(yōu)于配置的新一代構(gòu)建工具慕爬。
Gulp和Grunt類似窑眯。但相比于Grunt的頻繁的IO操作,Gulp的流操作医窿,能更快地完成構(gòu)建磅甩。

//安裝插件
npm install gulp-imagemin --save-dev //圖片壓縮
npm install gulp-cssnano --save-dev //css壓縮
npm install uglify --save-dev //js壓縮
npm install gulp-jshint --save-dev //js規(guī)范檢查
npm install gulp-concat --save-dev //文件合并
npm install gulp-rename --save-dev //重命名

//gulpfile.js
//引入插件
var gulp = require('gulp'),
    cssnano = require('gulp-cssnano'),
    concat = require('gulp-concat'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
 
  //css合并壓縮
  gulp.task('build:css', function() {
      gulp.src('./src/css/*.css')
        .pipe(concat('merge.css'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css/'));
  })
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市姥卢,隨后出現(xiàn)的幾起案子卷要,更是在濱河造成了極大的恐慌渣聚,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件僧叉,死亡現(xiàn)場(chǎng)離奇詭異奕枝,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)瓶堕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門隘道,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人郎笆,你說我怎么就攤上這事谭梗。” “怎么了宛蚓?”我有些...
    開封第一講書人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵默辨,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我苍息,道長(zhǎng)缩幸,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任竞思,我火速辦了婚禮表谊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘盖喷。我一直安慰自己爆办,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開白布课梳。 她就那樣靜靜地躺著距辆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪暮刃。 梳的紋絲不亂的頭發(fā)上跨算,一...
    開封第一講書人閱讀 49,166評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音椭懊,去河邊找鬼诸蚕。 笑死,一個(gè)胖子當(dāng)著我的面吹牛氧猬,可吹牛的內(nèi)容都是我干的背犯。 我是一名探鬼主播,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼盅抚,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼漠魏!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起妄均,我...
    開封第一講書人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤柱锹,失蹤者是張志新(化名)和其女友劉穎破讨,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體奕纫,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡提陶,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了匹层。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片隙笆。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖升筏,靈堂內(nèi)的尸體忽然破棺而出撑柔,到底是詐尸還是另有隱情,我是刑警寧澤您访,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布铅忿,位于F島的核電站,受9級(jí)特大地震影響灵汪,放射性物質(zhì)發(fā)生泄漏檀训。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一享言、第九天 我趴在偏房一處隱蔽的房頂上張望峻凫。 院中可真熱鬧,春花似錦览露、人聲如沸荧琼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽命锄。三九已至,卻和暖如春偏化,著一層夾襖步出監(jiān)牢的瞬間脐恩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來泰國打工夹孔, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留被盈,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓搭伤,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親袜瞬。 傳聞我的和親對(duì)象是個(gè)殘疾皇子怜俐,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

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

  • 1.如何全局安裝一個(gè) node 應(yīng)用? 打開你的命令行工具輸入npm install 'packages name...
    Rising_suns閱讀 339評(píng)論 0 0
  • 1: 如何全局安裝一個(gè) node 應(yīng)用? npm install -g app 2: package.json 有...
    高進(jìn)哥哥閱讀 406評(píng)論 0 0
  • 1. 如何全局安裝一個(gè) node 應(yīng)用? 2. package.json 有什么作用? 執(zhí)行npm init -y...
    hui_mamba閱讀 323評(píng)論 0 0
  • 題目1: 如何全局安裝一個(gè) node 應(yīng)用? “全局安裝”指的是將一個(gè)模塊安裝到系統(tǒng)目錄中邓尤,各個(gè)項(xiàng)目都可以調(diào)用拍鲤。一...
    saintkl閱讀 286評(píng)論 0 0
  • 題目1: 如何全局安裝一個(gè) node 應(yīng)用? npm install -g xx 題目2: package.jso...
    GaoYangTongXue丶閱讀 567評(píng)論 0 0