1恩急、如何全局安裝一個(gè) node 應(yīng)用?
npm install -g appName
2盛垦、package.json 有什么作用棕诵？
相當(dāng)于你本地項(xiàng)目的一個(gè)文檔說(shuō)明裁良。
允許你指定你項(xiàng)目中所使用的node包的版本。
構(gòu)建你的項(xiàng)目更加容易校套，便于給其他人共享价脾。
一個(gè)典型的package.json文件如下所示。
{
"name": "my_package",
//你的項(xiàng)目名稱(chēng)笛匙，全部小寫(xiě)侨把，不能有空格犀变，一個(gè)單詞，允許-和_. 如果是要發(fā)布自己的node插件座硕，一般用github上面項(xiàng)目名稱(chēng)弛作。 下次有機(jī)會(huì)說(shuō)明 npm 上面的發(fā)布流程涕蜂。
"version": "1.0.0",
//你的項(xiàng)目版本號(hào)华匾，最好遵守 GNU 版本號(hào)管理。
"main": "index.js",
//目錄中啟動(dòng)文件名稱(chēng)机隙≈├或者稱(chēng)之為入口文件，一般都是 index.js
"scripts": {
//使用 scripts 字段定義腳本命令
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
//項(xiàng)目的關(guān)鍵詞有鹿。 一般用不到旭旭，發(fā)布npm才用得到。
"author": "ag_dubs", //作者名稱(chēng)
"license": "ISC", //協(xié)議
"repository": {
// 用來(lái)存放到 版本管理遠(yuǎn)程服務(wù)葱跋。 發(fā)布npm才有用
"type": "git",
"url": "https://github.com/ashleygwilliams/my_package.git"
},
"dependencies": {
// 正式使用時(shí)持寄，依賴(lài)的包
"my_dep": "^1.0.0"
},
"devDependencies" : {
//開(kāi)發(fā)或者測(cè)試時(shí)，依賴(lài)的包娱俺。
"my_test_framework": "^3.1.0"
}
"bugs": {
//同repository
"url": "https://github.com/ashleygwilliams/my_package/issues"
},
"homepage": "https://github.com/ashleygwilliams/my_package"
//項(xiàng)目主頁(yè)稍味、 發(fā)布才有用
}
一般不會(huì)吧node_modules上傳到git或者npm上面，需要package來(lái)管理自己打包所需的插件荠卷，以便于項(xiàng)目中其他人員共享模庐，這個(gè)文件的好處就是一個(gè)人添加某個(gè)插件后，更改了這個(gè)文件油宜，其他人員只需要同步此文件掂碱，然后執(zhí)行如下命令，即可安裝同樣的包慎冤。
npm install
3疼燥、npm install --save app 與 npm install --save-dev app有什么區(qū)別?
都是為了省區(qū)修改 package文件
--save將依賴(lài)添加到字段dependencies中，是產(chǎn)品依賴(lài)模塊蚁堤。
npm install --save moduleName
- --save-dev將依賴(lài)添加到字段devDependencies中悴了，是開(kāi)發(fā)依賴(lài)模塊。（可簡(jiǎn)寫(xiě)為-d）
npm install -d moduleName
4违寿、node_modules的查找路徑是怎樣的?
當(dāng)require('xxx'),這個(gè)模塊的xxx不是nodejs的內(nèi)建模塊(比如http湃交、path、fs等)藤巢，并且模塊標(biāo)識(shí)不以路徑開(kāi)始('../ , ./')搞莺。
則nodejs會(huì)不斷的上一級(jí)目錄遞歸查找node_modules目錄，若一直未找到模塊的xxx掂咒，則會(huì)拋錯(cuò)才沧。
5迈喉、 npm3與 npm2相比有什么改進(jìn)？yarn和 npm 相比有什么優(yōu)勢(shì)? (選做題目)
- npm3相比npm2主要改進(jìn)了依賴(lài)管理方案
- npm2安裝依賴(lài)的時(shí)候比較簡(jiǎn)單直接温圆，直接按照包的依賴(lài)的樹(shù)形結(jié)構(gòu)下載填充至本地目錄挨摸，缺陷在于太深的目錄樹(shù)結(jié)構(gòu)會(huì)嚴(yán)重影響效率，甚至在window下可能會(huì)超出系統(tǒng)路徑限制的長(zhǎng)度岁歉，另外有刪node_modules目錄都可能經(jīng)歷漫長(zhǎng)的等待得运。
- 針對(duì) npm2 的問(wèn)題，npm3 加了點(diǎn)算法锅移，直白的解釋就是：npm install
時(shí)會(huì)按照 package.json 里依賴(lài)的順序依次解析熔掺，遇到新的包就把它放在第一級(jí)目錄，后面如果遇到一級(jí)目錄已經(jīng)存在的包非剃，會(huì)先判斷版本置逻，如果版本一樣則忽略，否則會(huì)按照 npm2 的方式依次掛在依賴(lài)包目錄下备绽。 - 在包版本差異化不太嚴(yán)重的情況下券坞，這種構(gòu)建方式會(huì)幾乎把所有包放在一級(jí)目錄下，很大程度下提升了效率以及節(jié)省了部分磁盤(pán)空間肺素。
- 但是npm3又遇到了新問(wèn)題恨锚，有可能開(kāi)發(fā)環(huán)境和測(cè)試環(huán)境的node_modules的目錄結(jié)構(gòu)不一樣，以及其他因素压怠，faceboook開(kāi)發(fā)了yarn來(lái)替代npm眠冈。
- yarn優(yōu)點(diǎn)在于只要通過(guò)Yarn安裝過(guò)的套件都會(huì)在本地目錄產(chǎn)生Cache，也就是說(shuō)只要安裝過(guò)依次菌瘫，下次重新安裝都會(huì)從Cache重新讀取蜗顽， 安裝速度會(huì)提升很多。
6雨让、webpack是什么雇盖？和其他同類(lèi)型工具比有什么優(yōu)勢(shì)？
webpack是一種模塊加載器兼打包工具栖忠，可以將各種資源崔挖；例如JS（含JSX）、coffee庵寞、樣式（含less/sass）狸相、圖片等都作為模塊來(lái)使用和處理。
- 對(duì) CommonJS捐川、AMD脓鹃、ES6 的語(yǔ)法兼容。
- 對(duì)CSS古沥、JS瘸右、圖片等資源文件都支持打包娇跟。
- 串聯(lián)式的模塊加載器以及插件機(jī)制，讓其具有更好地靈活性和擴(kuò)展性太颤，**
- 例如提供對(duì) CoffeeScript苞俘、ES6 的支持。
- 有獨(dú)立的配置文件 webpack.config.js
- 可以將代碼切分成不同的 chunk龄章，實(shí)現(xiàn)按需加載吃谣，降低初始化時(shí)間
- 支持 SourceUrls 和 SourceMaps，易于調(diào)試
- 具有強(qiáng)大的 Plugin 接口瓦堵，大多是內(nèi)部插件基协，使用起來(lái)比較靈活
- webpack 使用異步 IO 并具有多級(jí)緩存歌亲，這使得 webpack 很快菇用。
7、npm script是什么陷揪？如何使用惋鸥？
npm script 是package.json的一個(gè)屬性，可以在scripts里面定義一些腳本命令悍缠。內(nèi)置的命令名如start卦绣、test等可直接使用run xxx執(zhí)行，自定義的命令名使用 npm run xxx 執(zhí)行飞蚓。如：
"script" : {
"new": "mkdir test" //新建一個(gè)test文件夾
}
執(zhí)行命令：npm run new
8滤港、 webpack 應(yīng)用
- 使用npm scripts
{
"name": "lebronii",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack ./src/app.js app.bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
}
}
- 或者配置webpack.config.js
var path = require('path')
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, './bin'),
filename: 'bundle.js'
}
}
代碼地址：https://github.com/zh-yang/resume/tree/master/LebronII
預(yù)覽地址：https://zh-yang.github.io/resume/LebronII
9、gulp是什么趴拧？使用 gulp 實(shí)現(xiàn)圖片壓縮溅漾、CSS 壓縮合并、JS 壓縮合并
- gulp是自動(dòng)化的前端構(gòu)建工具著榴，開(kāi)發(fā)過(guò)程中可能需要對(duì)圖片和代碼進(jìn)行壓縮合并添履，less/sass/pug代碼的轉(zhuǎn)換，代碼規(guī)范性的檢查脑又、測(cè)試等暮胧，gulp可以將這些工作整合在一起，方便高效地完成任務(wù)问麸。
- 安裝gulp
npm install -g gulp
npm install --save-dev gulp
- gulp常見(jiàn)用法
var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var uglify = require('gulp-uglify');
var imgmin = require('gulp-imagemin');
var concat = require('gulp-concat');
//當(dāng)我們需要使用一個(gè)功能時(shí)往衷，需要先在bash安裝這個(gè)模塊，
//然后在使用前require它严卖，最后在gulp.task中定義這個(gè)功能席舍。
//圖片壓縮
gulp.task('imagemin',function(){
return gulp.src('圖片地址')
.pipe(imagemin())
.pipe(gulp.dest('輸出目錄')
})
//css壓縮合并
gulp.task('cssnano',function(){
return gulp.src([css1地址,css2地址...])
.pipe(cssnano()) //壓縮
.pipie(concat(新文件名)) //合并
.pipe(gulp.dest(輸出目錄))
})
//js壓縮合并
gulp.task('uglify',function(){
return gulp.src([js1地址,js2地址,....])
.pipe(uglify()) //壓縮
.pipie(concat(新文件名)) //合并
.pipe(gulp.dest(輸出目錄))
})
- gulp其他用法
var gulp = require('gulp')
//添加版本號(hào)
var rev = require('gulp-rev')
//版本號(hào)替換
var revReplace = require('gulp-rev-replace')
//解析html資源定位
var useref = require('gulp-useref')
//less轉(zhuǎn)css(css預(yù)編譯)
var less = require('gulp-less')
//css后編譯(前綴等、兼容)
var autoprefixer = require('gulp-autoprefixer')
//css壓縮
var cssnano = require('gulp-cssnano')
//或 var minifycss = require('gulp-minify-cdd')
//或 var csso = require('gulp-csso')
//js壓縮
//或 var gulpif = require('gulp-if')
//或 var filter = require('gulp-filter')
var uglify = require('gulp-uglify')
//合并文件
var concat = require('gulp-concat')
//重命名
var rename = require('gulp-rename')
//清空文件夾
var clean = require('gulp-clean')
//html壓縮
var minhtml = require('gulp-htmlmin')
//js代碼規(guī)范性檢查
var jshint = require('gulp-jshint')
//圖片壓縮
var imagemin = require('gulp-imagemin')
