題目1： 如何全局安裝一個(gè) node 應(yīng)用?
- npm install -g xx
題目2： package.json 有什么作用对途？package.json是什么？package.json如何創(chuàng)建啸蜜？
- package.json文件描述了一個(gè)NPM包坑雅，包括作者、簡介衬横、包的依賴裹粤、構(gòu)建等所有信息。
- 通常在創(chuàng)建NPM包時(shí)冕香，可以在命令行輸入nmp init命令自動(dòng)生成一個(gè)package.json文件蛹尝，里面包含了一些常用的字段。還可以根據(jù)實(shí)際需求來自行完善或創(chuàng)建package.json文件悉尾。
- package.json
文件包含的常用配置字段： - name
name和version是package.json中最重要的兩個(gè)字段，也是發(fā)布到NPM平臺(tái)上的唯一標(biāo)識挫酿，如果沒有正確設(shè)置這兩個(gè)字段构眯，包就不能發(fā)布和被下載。 - version
這個(gè)字段的取值需要符合node-semver的規(guī)則早龟，詳細(xì)可以見其文檔惫霸。 - description
包的描述信息，將會(huì)在npm search的返回結(jié)果中顯示葱弟，以幫助用戶了解包的用途壹店。 - author
包的作者，可以是字符串或?qū)ο蟆?/li> - files
包所包含的所有文件芝加，可以取值為文件夾硅卢。還可以用.npmignore來去除不想包含到包里的文件。 - main
包的入口文件藏杖，如index.js - repository
包的github倉庫地址将塑。 - scripts
通過設(shè)置這個(gè)可以使NPM調(diào)用一些命令腳本，封裝一些功能蝌麸。 - config
添加一些設(shè)置点寥，可以供scripts讀取用，同時(shí)這里的值也會(huì)被添加到系統(tǒng)的環(huán)境變量中来吩。 - dependencies
指定依賴的其它包敢辩，這些依賴是指包發(fā)布后正常執(zhí)行時(shí)所需要的，如果是開發(fā)中依賴的包弟疆，可以在devDependencies設(shè)置戚长。
{
"name": "my_package", //項(xiàng)目名稱
"version": "1.0.0", //項(xiàng)目版本號
"main": "index.js", //入口文件
// bin參數(shù)是{ 命令名：文件名 }的格式，指定了各個(gè)內(nèi)部命令對應(yīng)的可執(zhí)行文件的位置兽间，相當(dāng)于在user.local/bin下創(chuàng)建一個(gè)快捷方式
// 執(zhí)行`server`,`mock`或`server-mock`命令時(shí)历葛，將運(yùn)行對應(yīng)文件（./bin/server）
// ./bin/server文件頭部需添加 #!/usr/bin/env node, 表示將以node運(yùn)行這個(gè)文件
"bin":{
"server":"./bin/server",
"mock":"./bin/mock",
"server-mock":"./bin/server-mock"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"， //一般默認(rèn)一個(gè)test的空文件夾、用作寫測試代碼恤溶，`npm test`即可運(yùn)行乓诽。
"make":"echo 'hello world!' " //自定義的命令名需加run才能與運(yùn)行，`npm run make`
},
"keywords": [], //項(xiàng)目的關(guān)鍵詞咒程。 一般用不到鸠天，發(fā)布npm才用得到。
"author": "candy", //作者名稱
"license": "ISC", //協(xié)議
"repository": { // 用來存放到 版本管理遠(yuǎn)程服務(wù)帐姻。 發(fā)布npm才有用
"type": "git",
"url": "https://github.com/ashleygwilliams/my_package.git"
},
"dependencies": { // 正式使用時(shí)依賴的包, npm install --save xxx 生成
"my_dep": "^1.0.0"
},
"devDependencies" : {//開發(fā)或者測試時(shí)稠集，依賴的包。npm install --save-dev xxx生成
"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)目主頁饥瓷、 發(fā)布才有用
}
題目3： npm install --save app 與 npm install --save-dev app有什么區(qū)別?
- npm install --save app
指項(xiàng)目正常運(yùn)行所依賴的包剥纷，沒有這個(gè)依賴，項(xiàng)目會(huì)出錯(cuò)呢铆。 - npm install --save-dev app
指項(xiàng)目開發(fā)測試過程中所用的工具晦鞋。
題目4： nodule_modules的查找路徑是怎樣的?
比如需要查找的依賴包叫“easytpl”,它會(huì)先在當(dāng)前目錄下查找node_module, 看有沒有easytpl文件夾（即easytpl包），如果有的話棺克，會(huì)讀取easytpl文件夾下的package.json,找到里面的main參數(shù),加載main里對應(yīng)的路徑的文件悠垛。如果當(dāng)前目錄下沒有node_module娜谊，或當(dāng)前目錄下的node_module沒找到easytpl确买，便向上級目錄中查詢，直到系統(tǒng)根目錄纱皆。
題目5：npm3與 npm2相比有什么改進(jìn)？yarn和 npm 相比有什么優(yōu)勢? (選做題目)
npm3相比npm2主要改進(jìn)了依賴管理方案
npm2安裝依賴的時(shí)候比較簡單直接衷敌，直接按照包的依賴的樹形結(jié)構(gòu)下載填充至本地目錄拓瞪，缺陷在于太深的目錄樹結(jié)構(gòu)會(huì)嚴(yán)重影響效率缴罗，甚至在window下可能會(huì)超出系統(tǒng)路徑限制的長度，另外有刪node_modules目錄經(jīng)歷的可能都漫長的等待祭埂。
針對 npm2 的問題面氓，npm3 加了點(diǎn)算法兵钮，直白的解釋就是：npm install 時(shí)會(huì)按照 package.json 里依賴的順序依次解析，遇到新的包就把它放在第一級目錄舌界，后面如果遇到一級目錄已經(jīng)存在的包掘譬，會(huì)先判斷版本，如果版本一樣則忽略呻拌，否則會(huì)按照 npm2 的方式依次掛在依賴包目錄下
在包版本差異化不太嚴(yán)重的情況下葱轩，這種構(gòu)建方式會(huì)幾乎把所有包放在一級目錄下，很大程度下提升了效率以及節(jié)省了部分磁盤空間藐握。但是npm3又遇到了新問題靴拱，有可能開發(fā)環(huán)境和測試環(huán)境的node_modules的目錄結(jié)構(gòu)不一樣，以及其他因素猾普，faceboook開發(fā)了yarn來替代npm袜炕。
yarn優(yōu)點(diǎn)在于只要通過Yarn安裝過的套件都會(huì)在本地目錄產(chǎn)生Cache，也就是說只要安裝過依次抬闷，下次重新安裝都會(huì)從Cache重新讀取妇蛀， 安裝速度會(huì)提升很多。
題目6： webpack是什么笤成？和其他同類型工具比有什么優(yōu)勢？
webpack是一個(gè)module bundler（模塊打包工具）眷茁，所謂的模塊就是在平時(shí)的前端開發(fā)中炕泳，用到一些靜態(tài)資源，如JavaScript上祈、CSS培遵、圖片等文件，webpack就將這些靜態(tài)資源文件稱之為模塊登刺。webpack支持AMD和CommonJS籽腕，以及其他的一些模塊系統(tǒng)，并且兼容多種JS書寫規(guī)范纸俭，可以處理模塊間的以來關(guān)系皇耗，所以具有更強(qiáng)大的JS模塊化的功能， 它能對靜態(tài)資源進(jìn)行統(tǒng)一的管理以及打包發(fā)布 揍很。
優(yōu)勢：
- 對 CommonJS 郎楼、AMD 、ES6的語法做了兼容窒悔；
- 對js呜袁、css、圖片等資源文件都支持打包简珠；
- 串聯(lián)式 模塊加載器 以及 插件機(jī)制 阶界，讓其具有更好的靈活性和擴(kuò)展性，例如提供對CoffeeScript、ES6的支持膘融；
- 有獨(dú)立的配置文件webpack.config.js芙粱；
- 可以將代碼切割成不同的chunk，實(shí)現(xiàn)按需加載托启，降低了初始化時(shí)間宅倒；
- 支持 SourceUrls 和 SourceMaps，易于調(diào)試屯耸；
- 具有強(qiáng)大的Plugin接口拐迁，大多是內(nèi)部插件，使用起來比較靈活疗绣；
- webpack 使用異步 IO 并具有多級緩存线召。這使得 webpack 很快且在增量編譯上更加快；
題目7：npm script是什么多矮？如何使用缓淹？
scripts屬性是一個(gè)對象，里邊指定了項(xiàng)目的生命周期個(gè)各個(gè)環(huán)節(jié)需要執(zhí)行的命令塔逃。key是生命周期中的事件讯壶，value是要執(zhí)行的命令。
{ // ... "scripts": { "build": "node build.js" }}
上述代碼是package.json
文件的一個(gè)小片段湾盗，里面的script
字段是一個(gè)對象伏蚊。每個(gè)屬性對應(yīng)一段腳本，比如格粪，build
命令對應(yīng)的腳本是node build.js躏吊。在命令行里
$ npm run build/* 等同于執(zhí)行:*/$ node build.js
題目8： 使用 webpack 替換 入門-任務(wù)15中模塊化使用的 requriejs
題目9：gulp是什么？使用 gulp 實(shí)現(xiàn)圖片壓縮帐萎、CSS 壓縮合并比伏、JS 壓縮合并
gulp是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器疆导；不僅能對網(wǎng)站資源進(jìn)行優(yōu)化赁项，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成；使用它不僅可以很愉快的編寫代碼是鬼，而且大大提高工作效率肤舞。
var gulp = require('gulp')
//js壓縮插件
var jsmin = require('gulp-uglify')
//css壓縮插件
var cssnano = require('gulp-cssnano')
//img壓縮插件
var imgmin = require('gulp-imagemin')
//文件合并插件
var concat = require('gulp-concat')
//html 壓縮插件
var minhtml = require('gulp-htmlmin')
gulp.task('cssmin',function(){
gulp.src('src/css/*.css')
.pipe(concat(min.css))
.pipe(cssnano())
.pipe(gulp.dest(dist/css));
});
gulp.tast('jsmin',function(){
gulp.src('src/js/*.js')
.pipe(jsmin())
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/js'));
});
gulp.task('imgmin', function(){
gulp.src('src/img/*')
.pipe(imgmin())
.pipe(gulp.dest('dist/img'));
});
gulp.task('default', ['cssmin','jsmin','imgmin']);
