npm常見命令
npm install -g app-name
webpack命令
- 顯示npm下載包時(shí)，發(fā)的每一個請求：
npm config set loglevel http - 關(guān)閉npm顯示的進(jìn)度條：
npe config set process false
package.json 有什么作用怪蔑？
每個項(xiàng)目下面都有一個package.json文件里覆，定義了這個項(xiàng)目中所需要的模塊，以及項(xiàng)目的配置信息（比如名稱缆瓣、版本喧枷、許可證等元數(shù)據(jù)）。npm install命令會根據(jù)這個配置文件，自動下載所需要的模塊隧甚，也就是配置項(xiàng)目所需的運(yùn)行和開發(fā)環(huán)境车荔。
package.json可以手動編寫项贺，也可以通過npm init自動生成芽突，有了package.json，就可以通過npm install安裝其中指定的模塊
一個package.json的例子：
{
"name": "Hello World",
"version": "0.0.1",
"author": "張三",
"description": "第一個node.js程序",
"keywords":["node.js","javascript"],
"repository": {
"type": "git",
"url": "https://path/to/url"
},
"license":"MIT",
"engines": {"node": "0.10.x"},
"bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
"contributors":[{"name":"李四","email":"lisi@example.com"}],
"scripts": {
"start": "node index.js"
},
"dependencies": {
"express": "latest",
"mongoose": "~3.8.3",
"handlebars-runtime": "~1.0.12",
"express3-handlebars": "~0.5.0",
"MD5": "~1.2.0"
},
"devDependencies": {
"bower": "~1.2.8",
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-clean": "~0.5.0",
"browserify": "2.36.1",
"grunt-browserify": "~1.3.0",
}
}
- name: 項(xiàng)目名稱
- version：項(xiàng)目版本
-
scripts: 指定了運(yùn)行腳本命令的npm命令行縮寫络它，
"start": "node index.js"——當(dāng)執(zhí)行npm run start時(shí)咖城，會執(zhí)行node index.js命令 -
dependencies字段和devDependencies字段
dependencies字段指定了項(xiàng)目運(yùn)行所依賴的模塊茬腿，devDependencies字段指定了項(xiàng)目開發(fā)所需要的模塊。
他們都指向一個對象宜雀。該對象的各個成員切平，分別由“模塊名”和“對應(yīng)的版本要求組成”，表示依賴的模塊和版本范圍
{
"devDependencies": {
"browserify": "~13.0.0",
"karma-browserify": "~5.0.1"
}
}
對應(yīng)的版本加上各種限定辐董，主要有以下幾種：
- 指定版本：例如：
1.2.2悴品，遵循的是“大版本.次要版本.小版本”的格式，安裝時(shí)简烘，只安裝指定版本- 波浪號+指定版本：例如：
~1.2.2苔严，表示安裝1.2.x的最新版本，版本不小于1.2.2孤澎，同時(shí)不大于1.3.x届氢，也就是安裝時(shí)不改變大版本和次要版本。- 插入號+指定版本：例如：
^1.2.2覆旭，表示安裝1.x.x的最新版本（不低于1.2.2）退子，但是不安裝2.x.x的版本，也就是說不改變大版本號型将。需要注意的是寂祥，如果大版本號為0，則插入號的行為與波浪號相同七兜，這是因?yàn)榇藭r(shí)處于開發(fā)階段丸凭，即使是次要版本號變動，也可能帶來程序的不兼容腕铸。- latest：安裝最新版本
如果一個模塊不在package.json文件之中惜犀，可以通過
npm install module --save
npm install module --save-dev
這兩個命令安裝，
--save參數(shù)：表示將模塊寫入“dependencies”屬性中
--save-dev參數(shù)：表示將模塊寫入“devDependencies”屬性中
-
bin字段
該項(xiàng)用于定義執(zhí)行內(nèi)部命令時(shí)恬惯，指定的可執(zhí)行文件的位置向拆，可與script項(xiàng)配合使用
"bin": {
"someTool": "./bin/someTool.js"
}
上面代碼指定，someTool 命令對應(yīng)的可執(zhí)行文件為 bin 子目錄下的 someTool.js酪耳。Npm會尋找這個文件，在node_modules/.bin/目錄下建立符號鏈接。在上面的例子中碗暗，someTool.js會建立符號鏈接npm_modules/.bin/someTool颈将。由于node_modules/.bin/目錄會在運(yùn)行時(shí)加入系統(tǒng)的PATH變量，因此在運(yùn)行npm時(shí)言疗，就可以不帶路徑晴圾，直接通過命令來調(diào)用這些腳本。
因此噪奄，像下面這樣的寫法可以采用簡寫死姚。
scripts: {
start: './node_modules/someTool/someTool.js build'
}
// 簡寫為
scripts: {
start: 'someTool build'
}
所有node_modules/.bin/目錄下的命令，都可以用npm run [命令]的格式運(yùn)行勤篮。在命令行下都毒，鍵入npm run，然后按tab鍵碰缔，就會顯示所有可以使用的命令账劲。
main字段
該字段指定了加載的入口文件。這個字段的默認(rèn)值金抡，就是模塊根目錄下的index.js文件-
config字段
該字段用于添加命令行的環(huán)境變量下面是一個package.json文件瀑焦。
{
"name" : "foo",
"config" : { "port" : "8080" },
"scripts" : { "start" : "node server.js" }
}
---
## npm install --save app 與 npm install --save-dev app有什么區(qū)別?
`npm install --save app`： 在當(dāng)前目錄下安裝模塊，并將模塊添加到`package.json`中的`dependencies`屬性中
`npm install --save-dev app`：與`npm install --save app`命令類型梗肝，只不過是將模塊添加到`packag.json`中的`devDependencies`屬性中
---
## node_modules的查找路徑是怎樣的?
node_modules的模塊查找路徑榛瓮，說到底就是通過`require()`函數(shù)引入模塊時(shí)的查找路徑。
>當(dāng) Node 遇到 require(X) 時(shí)巫击，按下面的順序處理榆芦。
1. 如果X是內(nèi)置模塊，如: `require('http')`
a. 返回該模塊喘鸟，
b. 不再繼續(xù)執(zhí)行
2. 如果X是以 `"./"` 或 `"/"` 或 `"../"` 開頭
a. 根據(jù)X所在的父模塊匆绣，確定X的絕對地址
b. 將X當(dāng)成文件，依次查找下面的文件什黑，只要有一個存在崎淳，就返回該文件，不再繼續(xù)執(zhí)行
- X
- X.js
- X.json
- X.node
> c. 將X當(dāng)成目錄愕把，依次查找一下文件拣凹，只要有一個存在，就返回該文件恨豁，不再繼續(xù)執(zhí)行
- X/package.json（中的main字段）
- X/index.js
- X/index.json
- X/index.node
3. 如果X不帶路徑
a. 根據(jù)X所在的父模塊嚣镜，確定X可能的安裝目錄
b. 依次在每個目錄中，將X當(dāng)成文件或目錄名加載
4. 拋出 "not found"
一個例子：
當(dāng)前腳本文件`/home/ry/project/foo.js`執(zhí)行了`require('bar')`橘蜜，屬于上面的第3種情況菊匿，Node內(nèi)部運(yùn)行過程如下：
首先付呕，確認(rèn)X的絕對路徑可能是下面的幾種情況，依次查找：
>- /home/ry/project/node_modules/bar
- /home/ry/node_modules/bar
- /home/node_modules/bar
- /node_modules/bar
搜素時(shí)跌捆，Node先將bar當(dāng)成文件名徽职，依次嘗試加載下面這些文件，只要有一個成功就返回
> - bar
- bar.js
- bar.json
- bar.node
如果都不成功佩厚，說明bar可能是目錄名姆钉，于是依次嘗試加載下面這些文件
> - bar/package.json（main字段）
- bar/index.js
- bar/index.json
- bar/index.node
如果在所有對應(yīng)的目錄中，都無法找到對應(yīng)的目錄或文件抄瓦，就拋出一個錯誤
參考：[require() 源碼解讀](http://www.ruanyifeng.com/blog/2015/05/require.html)
---
## npm3與 npm2相比有什么改進(jìn)潮瓶？yarn和 npm 相比有什么優(yōu)勢? (選做題目)
npm3對于包的依賴處理不同于npm2
**npm2**：按照一個嵌套方式安裝所有依賴
**npm3**：試圖減輕樹的深度和冗余的嵌套，將傳統(tǒng)的嵌套結(jié)構(gòu)改為平鋪結(jié)構(gòu)
**yarn與npm相比的優(yōu)勢**：
- yarn.lock 文件
Yarn 有一個鎖定文件 (lock file) 記錄了被確切安裝上的模塊的版本號钙姊。每次只要新增了一個模塊毯辅，Yarn 就會創(chuàng)建（或更新）yarn.lock 這個文件。這么做就保證了摸恍，每一次拉取同一個項(xiàng)目依賴時(shí)悉罕，使用的都是一樣的模塊版本。
- 并行安裝
- 更簡潔的輸出
[Yarn vs npm：你需要知道的一切](https://zhuanlan.zhihu.com/p/23493436)
---
## webpack是什么立镶？和其他同類型工具比有什么優(yōu)勢壁袄？
webpack是一個JavaScript應(yīng)用程序的**模塊打包器**。當(dāng)使用webpack處理應(yīng)用程序時(shí)媚媒，它會遞歸的構(gòu)建一個**依賴關(guān)系圖**嗜逻，其中包含應(yīng)用程序需要的每個模塊，然后將應(yīng)用程序打包成少量的**bundler**——通常只有一個缭召，由瀏覽器加載栈顷。
與其他打包工具相比，webpack具有：
- **代碼分割**：
- **Loaders**：通過Loader機(jī)制嵌巷，可以將各種類型的資源轉(zhuǎn)換為js的模塊
- **插件機(jī)制**：擁有非常豐富的插件
---
## npm script是什么萄凤？如何使用？
npm script是package.json中的一個屬性搪哪，利用該屬性可以自定義一些腳本命令
通過: `npm run xxx`來執(zhí)行xxx命令靡努，如果xxx是npm中的默認(rèn)命令，則無需添加run晓折，直接使用`npm xxx`即可惑朦。
如：
```js
{
// ...
"scripts": {
"build": "node build.js"
}
}
執(zhí)行： node run build 即可執(zhí)行node build.js命令
使用 webpack 替換 入門-任務(wù)15中模塊化使用的 requriejs
gulp是什么？使用 gulp 實(shí)現(xiàn)圖片壓縮漓概、CSS 壓縮合并漾月、JS 壓縮合并
gulp是一款基于數(shù)據(jù)流的自動化構(gòu)建工具
一個gulpfile.js文件
// 載入模塊
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
minhtml = require('gulp-htmlmin'),
notify = require('gulp-notify'),
md5 = require('gulp-md5-plus');
// css任務(wù)
gulp.task('css', function() {
gulp.src('dist/css/*').pipe(clean());
return gulp.src('./www/src/css/*.css')
// .pipe(concat('merge.min.css'))
.pipe(minifycss())
.pipe(md5(10, 'dist/index.html'))
.pipe(gulp.dest('dist/css/'));
});
// html任務(wù)
gulp.task('html', function(){
return gulp.src('./www/src/index.html')
.pipe(minhtml({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
});
// js任務(wù)
gulp.task('js', function(){
gulp.src('./dist/app.bundle.js')
.pipe(jshint())
.pipe(concat('merge.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'))
});
// img任務(wù)
gulp.task('img', function(){
gulp.src('www/imgs/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/imgs'))
});
// clean任務(wù)
gulp.task('clear', function(){
gulp.src('./dist/*', {read: false})
.pipe(clean());
});
gulp.task('build', ['html', 'css', 'js', 'img']);
開發(fā)一個 node 命令行天氣應(yīng)用用于查詢用戶當(dāng)前所在城市的天氣，發(fā)布到 npm 上去胃珍×褐祝可以通過如下方式安裝使用(可使用api.jirengu.com里提供的查詢天氣接口) (選做題目)
包地址：npm install -g hexon-hunger-weather2
