1.如何全局安裝一個(gè) node 應(yīng)用?
在終端輸入以下命令，即在全局安裝應(yīng)用纽甘，可在終端輸入fanyi雇庙、webpack來(lái)執(zhí)行命令
$ npm install -g fanyi
$ npm install -g webpack
2.package.json 有什么作用？
package.json一般放置在項(xiàng)目的根目錄下拟烫，定義這個(gè)項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息迄本。npm install命令根據(jù)這個(gè)配置文件硕淑，自動(dòng)下載所需的模塊，也就是配置項(xiàng)目所需的運(yùn)行和開(kāi)發(fā)環(huán)境嘉赎。
信息
- name：項(xiàng)目名稱
- version：項(xiàng)目版本
- description：描述內(nèi)容
- main：主程序入口
- scripts：命令行工具置媳，打造前端自動(dòng)化流程
- dependencies：指定了項(xiàng)目運(yùn)行所依賴的模塊
- devDependencies：項(xiàng)目開(kāi)發(fā)所需要的模塊
3.npm install --save app 與 npm install --save-dev app有什么區(qū)別?
-
npm install --save app在package.json中創(chuàng)建
"dependencies ": {
"app": "xxx",
}
發(fā)布之后，項(xiàng)目運(yùn)行仍依賴這個(gè)模塊公条，會(huì)被用戶下載拇囊。
-
npm install --save-dev app在package.json中創(chuàng)建
"devDependencies": {
"app": "xxx",
}
開(kāi)發(fā)時(shí)依賴于這個(gè)模塊，項(xiàng)目正常運(yùn)行時(shí)不需要這個(gè)模塊靶橱，不會(huì)被用戶所下載
4.node_modules的查找路徑是怎樣的?
require模塊時(shí)寥袭，先在當(dāng)前目錄查找node_modules下的模塊，如果沒(méi)有关霸，再往上一級(jí)目錄中查詢node_modules下的模塊传黄，層層遞進(jìn)，直到系統(tǒng)根目錄队寇。
5.npm3與 npm2相比有什么改進(jìn)膘掰？
npm2 安裝依賴的時(shí)候比較簡(jiǎn)單直接，直接按照包依賴的樹(shù)形結(jié)構(gòu)下載填充本地目錄結(jié)構(gòu)佳遣。
因?yàn)?npm 設(shè)計(jì)的初衷就是考慮到了包依賴的版本錯(cuò)綜復(fù)雜的關(guān)系识埋，同一個(gè)包因?yàn)楸灰蕾嚨年P(guān)系原因會(huì)出現(xiàn)多個(gè)版本，簡(jiǎn)單地填充結(jié)構(gòu)保證了無(wú)論是安裝還是刪除都會(huì)有統(tǒng)一的行為和結(jié)構(gòu)零渐。
比如一個(gè) App 里模塊 A 和 C 都依賴 B窒舟，無(wú)論被依賴的 B 是否是同一個(gè)版本，都會(huì)生成對(duì)應(yīng)結(jié)構(gòu)：
npm2缺點(diǎn)：太深的目錄樹(shù)結(jié)構(gòu)會(huì)嚴(yán)重影響效率相恃，甚至在 Windows 下可能會(huì)超出系統(tǒng)路徑限制的長(zhǎng)度辜纲。
npm3加了點(diǎn)算法，直白的解釋就是：npm install 時(shí)會(huì)按照 package.json 里依賴的順序依次解析拦耐，遇到新的包就把它放在第一級(jí)目錄耕腾，后面如果遇到一級(jí)目錄已經(jīng)存在的包，會(huì)先判斷版本杀糯，如果版本一樣則忽略扫俺，否則會(huì)按照 npm2 的方式依次掛在依賴包目錄下。
npm3優(yōu)點(diǎn)：這種構(gòu)建方式會(huì)幾乎把所有包放在一級(jí)目錄下固翰，很大程度上提升了效率以及節(jié)省了部分磁盤(pán)空間狼纬。
npm2 和 npm3 生成的結(jié)構(gòu)對(duì)比：
6.webpack是什么？和其他同類型工具比有什么優(yōu)勢(shì)骂际？
webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)疗琉。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)歉铝，其中包含應(yīng)用程序需要的每個(gè)模塊盈简，然后將所有這些模塊打包成少量的 bundle - 通常只有一個(gè)，由瀏覽器加載太示。
它是高度可配置的柠贤，四個(gè)核心概念：入口(entry)、輸出(output)类缤、loader臼勉、插件(plugins)。
優(yōu)點(diǎn):
- 快速運(yùn)行餐弱，Webpack 使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率
- 功能豐富的插件系統(tǒng)宴霸。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的
- Webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫(kù)膏蚓，無(wú)論它們的模塊形式是 CommonJS猖败、 AMD 還是普通的 JS 文件
- Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊降允。這樣恩闻，任何資源都可以成為 Webpack 可以處理的模塊。
7.npm script是什么剧董？如何使用幢尚？
npm scripts容許你在package.json文件的scripts字段定義腳本命令，通過(guò)終端使用翅楼。
"scripts": {
"first": "node first.js", //npm run first = node firsr.js
}
8.使用 webpack 替換 入門(mén)-任務(wù)15中模塊化使用的 requriejs
9.gulp是什么尉剩？使用 gulp 實(shí)現(xiàn)圖片壓縮、CSS 壓縮合并毅臊、JS 壓縮合并
它是前端自動(dòng)化構(gòu)建工作流的利器理茎，可以使用多個(gè)插件實(shí)現(xiàn)代碼打包、壓縮、合并皂林、檢測(cè)朗鸠、瀏覽器自動(dòng)刷新等功能。
var gulp = require('gulp')
var cssnano = require('gulp-cssnano') //壓縮css
var uglify = require('gulp-uglify') //壓縮js
var concat = require('gulp-concat') //文件合并
var imagemin = require('gulp-imagemin') //圖片壓縮
gulp.task('css', function(){ //task定義一個(gè)任務(wù)础倍，執(zhí)行：gulp css
gulp.src('./src/css/*.css') //獲取該路徑下的所有css文件
.pipe(concat('index-merge.css')) //3個(gè)文件合并成一份
.pipe(cssnano()) //壓縮數(shù)據(jù)流
.pipe(gulp.dest('./dist/css/')) //放置文件
})
gulp.task('js', function(){
gulp.src('./src/js/*.js')
.pipe(concat('index-merge.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'))
})
gulp.task('imgs', function(){
gulp.src('./src/imgs/*.jpg')
.pipe(imagemin())
.pipe(gulp.dest('./dist/imgs/'))
})
gulp.task('default', ['css','js','imgs'])
