1.如何全局安裝一個(gè) node 應(yīng)用?
npm install -g 應(yīng)用名
2. package.json 有什么作用碴犬?
- 相當(dāng)于你本地項(xiàng)目的一個(gè)文檔說(shuō)明。
- 允許你指定你項(xiàng)目中所使用的node包的版本梆暮。
- 構(gòu)建你的項(xiàng)目更加容易服协,便于給其他人共享。
如下:
{
"name": "my_package", //你的項(xiàng)目名稱惕蹄,全部小寫蚯涮,不能有空格,一個(gè)單詞卖陵,允許-和_. 如果是要發(fā)布自己的node插件遭顶,一般用github上面項(xiàng)目名稱。 下次有機(jī)會(huì)說(shuō)明 npm 上面的發(fā)布流程泪蔫。
"version": "1.0.0", //你的項(xiàng)目版本號(hào)棒旗,最好遵守 GNU 版本號(hào)管理。
"main": "index.js", //目錄中啟動(dòng)文件名稱撩荣∠橙啵或者稱之為入口文件,一般都是 index.js
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1" //一般默認(rèn)一個(gè)test的空文件夾餐曹、用作寫測(cè)試代碼逛拱。
},
"keywords": [], //項(xiàng)目的關(guān)鍵詞。 一般用不到台猴,發(fā)布npm才用得到朽合。
"author": "ag_dubs", //作者名稱
"license": "ISC", //協(xié)議
"repository": { // 用來(lái)存放到 版本管理遠(yuǎn)程服務(wù)俱两。 發(fā)布npm才有用
"type": "git",
"url": "https://github.com/ashleygwilliams/my_package.git"
},
"dependencies": { // 正式使用時(shí),依賴的包
"my_dep": "^1.0.0"
},
"devDependencies" : {//開(kāi)發(fā)或者測(cè)試時(shí)曹步,依賴的包宪彩。
"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ā)布才有用
}
3. npm install --save app
與 npm install --save-dev app
有什么區(qū)別?
-save-dev
是指將包信息添加到 package.json 里的 devDependencies節(jié)點(diǎn)讲婚,表示開(kāi)發(fā)時(shí)依賴的包尿孔。
-save
是指將包信息添加到 package.json 里的dependencies節(jié)點(diǎn),表示發(fā)布時(shí)依賴的包筹麸。
如:
gulp活合,gulp-less 等等編譯js或者css的包,運(yùn)行時(shí)是不需要的竹捉,所以建議安裝到 devDependencies 芜辕,
如jade尚骄,express等包块差,運(yùn)行時(shí)會(huì)用到,所以建議安裝到 dependencies
4.node_modules的查找路徑是怎樣的?
先從本地文件夾里找倔丈,找不到再一級(jí)級(jí)向上找憨闰,一直找到系統(tǒng)根目錄為止。
如:
/home/user/node_modules/foo/bar
/home/node_modules/foo/bar
/node_modules/foo/bar
5.npm3與 npm2相比有什么改進(jìn)需五?yarn和 npm 相比有什么優(yōu)勢(shì)? (選做題目)
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):
于是缺陷就凸顯出來(lái)了,太深的目錄樹(shù)結(jié)構(gòu)會(huì)嚴(yán)重影響效率飒炎,甚至在 Windows 下可能會(huì)超出系統(tǒng)路徑限制的長(zhǎng)度埋哟。另外,在 Windows 有刪 node_modules 目錄經(jīng)歷的可能都經(jīng)歷過(guò)漫長(zhǎng)的等待郎汪。
npm3
針對(duì) npm2 的問(wèn)題赤赊,npm3 加了點(diǎn)算法,直白的解釋就是:npm install 時(shí)會(huì)按照 package.json 里依賴的順序依次解析煞赢,遇到新的包就把它放在第一級(jí)目錄抛计,后面如果遇到一級(jí)目錄已經(jīng)存在的包,會(huì)先判斷版本照筑,如果版本一樣則忽略吹截,否則會(huì)按照 npm2 的方式依次掛在依賴包目錄下
可以看下 npm2 和 npm3 生成的結(jié)構(gòu)對(duì)比:
在包版本差異化不太嚴(yán)重的情況下录豺,這種構(gòu)建方式會(huì)幾乎把所有包放在一級(jí)目錄下,很大程度上提升了效率以及節(jié)省了部分磁盤空間饭弓。
但npm3也存在開(kāi)發(fā)環(huán)境和測(cè)試環(huán)境的 node_modules 目錄結(jié)構(gòu)不一樣以及其他的問(wèn)題双饥,因此FaceBook搞了 yarn 用來(lái)替代 npm了。
yarn 構(gòu)建步驟如下:
Resolution: 向倉(cāng)庫(kù)請(qǐng)求依賴關(guān)系
Fetching: 看看本地緩存了沒(méi)有弟断,否則把包拉到緩存里
Linking: 直接全部從緩存里構(gòu)建好目錄樹(shù)放到 node_modules 里
6.webpack是什么咏花?和其他同類型工具比有什么優(yōu)勢(shì)?
webpack是一個(gè)“模塊打包工具”阀趴,它可以編譯各種語(yǔ)言成為瀏覽器可以執(zhí)行的css昏翰,js,html刘急;也可以模塊化引入文件進(jìn)行壓縮合并等操作棚菊,還可以通過(guò)插件來(lái)實(shí)現(xiàn)一些其他的前端工作流操作例如將文件名加上hash以避免緩存等。
它具有以下優(yōu)勢(shì)
代碼拆分
Webpack 有兩種組織模塊依賴的方式叔汁,同步和異步统求。異步依賴作為分割點(diǎn),形成一個(gè)新的塊据块。在優(yōu)化了依賴樹(shù)后码邻,每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。
Loader
Webpack 本身只能處理原生的 JavaScript 模塊另假,但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊像屋。這樣,任何資源都可以成為 Webpack 可以處理的模塊边篮。
智能解析
Webpack 有一個(gè)智能解析器己莺,幾乎可以處理任何第三方庫(kù),無(wú)論它們的模塊形式是 CommonJS戈轿、 AMD 還是普通的 JS 文件凌受。甚至在加載依賴的時(shí)候,允許使用動(dòng)態(tài)表達(dá)式 require(“./templates/“ + name + “.jade”)凶杖。
插件系統(tǒng)
Webpack 還有一個(gè)功能豐富的插件系統(tǒng)胁艰。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的,還可以開(kāi)發(fā)和使用開(kāi)源的 Webpack 插件智蝠,來(lái)滿足各式各樣的需求腾么。
快速運(yùn)行
Webpack 使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率,這使得 Webpack 能夠以令人難以置信的速度快速增量編譯杈湾。
7. npm script是什么解虱?如何使用?
npm script 是package.json的一個(gè)屬性漆撞,可以在scripts里面定義一些腳本命令
除了npm可以直接執(zhí)行的以外(例如:npm start殴泰,npm test)于宙,其余的都要通過(guò)npm run xxx
8. 使用 webpack 替換 入門-任務(wù)15中模塊化使用的 requriejs
代碼地址:https://github.com/zhanghan0529/modular-page-1
預(yù)覽:https://zhanghan0529.github.io/modular-page-1/index.html
9.gulp是什么?使用 gulp 實(shí)現(xiàn)圖片壓縮悍汛、CSS 壓縮合并捞魁、JS 壓縮合并
var gulp = require("gulp");
var cssnano = require("gulp-cssnano"),//css壓縮
concat = require("gulp-concat"),//合并文件
uglify = require("gulp-uglify"),//壓縮js文件
// rename = require("gulp-rename"),//重命名
clean = require("gulp-clean"),//清空文件
imagemin = require("gulp-imagemin");//壓縮圖片
jshint = require("gulp-jshint");//js規(guī)范檢查
minhtml = require("gulp-minhtml");//壓縮html
gulp.task("bulid:css",function(){
gulp.src("*.css")//找到某路徑下的css文件
.pipe(concat("index-merge.css"))//合并需要合并的css文件
.pipe(cssnano())//壓縮合并后的css文件
.pipe(gulp.dest("dist/css/"));//輸出
});
gulp.task("bulid:js",function(){
gulp.src("src/js/*.js")
.pipe(jshint())//檢查格式
.pipe(concat("merge.js"))//合并js文件
// .pipe(rename({
// suffix: '.min'
// }))
.pipe(uglify())//壓縮
.pipe(gulp.dest("dist/js/"));
});
gulp.task("bulid:img",function(){
gulp.src("pic/*")
.pipe(imagemin())
.pipe(gulp.dest("dist/img/"));
});
// gulp.task("clear",function(){
// gulp.src("dist/*",{read: false})
// .pipe(clean());
// });
gulp.task("default",["bulid:css","bulid:img","bulid:js"])
10.開(kāi)發(fā)一個(gè) node 命令行天氣應(yīng)用用于查詢用戶當(dāng)前所在城市的天氣,發(fā)布到 npm 上去离咐∑准螅可以通過(guò)如下方式安裝使用(可使用api.jirengu.com里提供的查詢天氣接口) (選做題目)
包地址:https://www.npmjs.com/package/weatherdemo0529