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
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/'));
})