1.
如何全局安裝一個 node 應用?

npm install -g abc

2.
** package.json 有什么作用？**

npm上發布包時，需要package.json中的信息來描述這個包,并提供包所需要的依賴

{
  "name":"mike-demo",  //包的名字
  "version":"1.0.0",  //版本號，每次更改必須更改
  "description": "",  //功能描述
  "main": "index.js",  //入口
  "bin": {
    "mikedemo": "./index.js"  //地址
  },
  "script": {
    "start": "echo start...",
    "build": "echo build...",
    "test": "echo\"Error: no test specifed\" && exit 1" //直接執行特定命令行
  },
  "author": "",  //作者
  "license": "ISC",  //版權
  "dependencies": {
    "webpack": "^2.4.1"
  } 
}
   //依賴

3.
** npm install --save app 與 npm install --save-dev app有什么區別?**

npm install --save app: 保存需要加載的依賴的信息到package.json里面,該模塊使用時，該依賴被調用

"dependencies": {
  "app": "^0.0.0"
}

npm install --save-dev app: 開發測試時使用的依賴，當需要測試時，可以調用該依賴

"devDependencies": {
  "app": "^0.0.0"
}

4.
nodule_modules的查找路徑是怎樣的?

該模塊的同級目錄下查找nodule_modules => if(沒有) 向上一級查找 => if(沒有) 再向上一級 ...=> 直到找到根目錄下

5.
** npm3與 npm2相比有什么改進？**

假設A,C依賴B，npm2會把兩個不同版本的B各自放在A，C下面；npm3會把相同版本的B放在與A,C同一目錄下，而把不同版本的B放在C下面

npm3deps4.png

yarn和 npm 相比有什么優勢?
npm存在的缺陷：

• npm 安裝包（packages）的速度不夠快，拉取的 packages 可能版本不同
• npm 允許在安裝 packages 時執行代碼，這就埋下了安全隱患

Yarn的改進：
yarn.lock 文件

• npm 和 Yarn 都是通過 package.json 記錄項目需要拉取的依賴模塊，不過在使用時，往往 package.json 中模塊的版本號不太會寫得非常確切，通常是定個版本范圍。事實上，npm在拉取依賴時，即使用的是相同的 package.json，在不同的設備上拉到的 packages 版本也會不一樣，這就可能為項目引入 bug。

• Yarn 有一個鎖定文件 (lock file) 記錄了被確切安裝上的模塊的版本號。每次只要新增了一個模塊，Yarn 就會默認創建（或更新）yarn.lock 這個文件，這樣就保證了每次拉取同一個依賴時，使用的是同一個模塊版本

• npm中其實也有個lock，但是需要每次執行npm shrinkwrap命令才會生成npm-shrinkwrap.json這個文件來記錄模塊版本

并行安裝

• 在執行包的安裝時，npm會按照隊列依次進行安裝；而yarn會同步進行任務，提高了性能，總之就是很快。

更簡潔的輸出

• npm 的輸出信息比較冗長。在執行 npm install <package> 的時候，命令行里會不斷地打印出所有被安裝上的依賴。相比之下，Yarn 簡潔太多：默認情況下，結合了 emoji （Windows 上 emoji 不可見）直觀且直接地打印出必要的信息，也提供了一些命令供開發者查詢額外的安裝信息。

yarn global

• npm 的全局操作命令要加上-g 或者--global 參數，Yarn 的全局命令則需要加上 global。和 npm 類似，項目特定的依賴，就不需要全局安裝了。

yarn install

• npm install 命令安裝的是 package.json 中的依賴，如果開發者在 package.json 中添加了新的依賴，npm install 也一樣安裝。然而，yarn install 會優先安裝 yarn.lock 中記錄的依賴，沒有這樣的鎖定文件時，才會去安裝 package.json 中的依賴。

6.
webpack是什么？

市面上已經存在的模塊管理和打包工具并不適合大型的項目，尤其單頁面 Web 應用程序。最緊迫的原因是如何在一個大規模的代碼庫中，維護各種模塊資源的分割和存放，維護它們之間的依賴關系，并且無縫的將它們整合到一起生成適合瀏覽器端請求加載的靜態資源。

這些已有的模塊化工具并不能很好的完成如下的目標：
將依賴樹拆分成按需加載的塊
初始化加載的耗時盡量少
各種靜態資源都可以視作模塊
將第三方庫整合成模塊的能力
可以自定義打包邏輯的能力
適合大項目，無論是單頁還是多頁的 Web 應用

和其他同類型工具比有什么優勢？
web pack的優勢：
1.代碼拆分
Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點，形成一個新的塊。在優化了依賴樹后，每一個異步區塊都作為一個文件被打包。

2.Loader
Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉換器可以將各種類型的資源轉換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。

3.智能解析
Webpack 有一個智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時候，允許使用動態表達式 require("./templates/" + name + ".jade")。

4.插件系統
Webpack 還有一個功能豐富的插件系統。大多數內容功能都是基于這個插件系統運行的，還可以開發和使用開源的 Webpack 插件，來滿足各式各樣的需求。

5.快速運行
Webpack 使用異步 I/O 和多級緩存提高運行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。

7.
npm script是什么？
在package.json中存在scripts，可以執行自定義命令
下面是常用的自定義命令行：

{
  "scripts": {
    "css:scss": "app=node-sass npm run check; node-sass --output-style compressed -o dist/css src/scss",
    "css:autoprefixer": "app=postcss-cli npm run check; app=autoprefixer npm run check; postcss -u autoprefixer -r dist/css/*",
    "css:compress": "app=csso npm run check; csso in.css --output out.css",
    "css:less": "app=less npm run check; lessc --clean-css styles.less styles.min.css",

    "js:webpack": "app=webpack npm run check; webpack",
    "js:webpack:uncompress": "app=webpack npm run check; uglify=0 webpack",
    "js:lint": "app=eslint npm run check; && eslint src/js",
    "js:uglify": "app=uglifyjs npm run check; mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js",

    "image:imagemin": "app=imagemin-cli npm run check; imagemin src/images dist/images -p",

    "server": "app=browser-sync npm run check; browser-sync start --server --files 'dist/css/*.css, dist/js/*.js'",

    "watch": "app=onchange npm run check; onchange 'src/js/*.js' -- npm run build:js",

    "watch:webpack": "onchange 'public/src/js/**/!(bundle.js)' -- npm run webpack:js",
    "watch:all": "app=parallelshell npm run check; parallelshell 'npm run css:autoprefixer' 'npm run js:init' ",

    "check": "[ -z \"$(app=$app node -p 'try{url=process.env.app+\"/package.json\"; require(url).version}catch(e){exports=\"\"}')\" ] && npm i -D $app || echo \"already installed $app\"; "
  }
}

如何使用？

//在npm中有默認命令名稱的
npm test
//在npm中沒有默認命令名稱的
npm run css:scss

8.
使用 webpack 替換 入門-任務15中模塊化使用的 requriejs
代碼
demo

9.
gulp是什么？

• 它是一款nodejs應用。
• 它是打造前端工作流的利器，打包、壓縮、合并、git、遠程操作...，
• 簡單易用
• 無快不破
• 高質量的插件

使用 gulp 實現圖片壓縮、CSS 壓縮合并、JS 壓縮合并

 var gulp = require('gulp');

 //引入組件
 var minifycss = require('gulp-minify-css'), //css壓縮
    uglify = require('gulp-uglify'), //js壓縮
    concat = require('gulp-concat'), //合并文件

    rename = require('gulp-rename'), //重命名
    clean = require('gulp-clean'), //清空文件夾

    minhtml = require('gulp-htmlmin'), //html壓縮
    jshint = require('gulp-jshint'), //js代碼規范性檢查
    imagemin = require('gulp-imagemin'); //圖片壓縮

 gulp.task('html', function(){

    return gulp.src('src/*.html')
        .pipe(minhtml({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'))
 });

 gulp.task('css', function(argument){

    gulp.src('src/*.css')
        .pipe(concat('merge.min.css'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minfycss())
        .pipe(gulp.dest('dist/css/'))
 })

 gulp.task('js', function(argument){
    gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))

        .pipe(concat('merge.js'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'))
 })

 gulp.task('img', function(argument){
    gulp.src('src/imgs/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs'))
 })

 gulp.task('clear', function(){
    gulp.src('dist/*', {read: false})
        .pipe(clean())
 })

 gulp.task('build', ['html', 'css', 'js', 'img '])

 //執行
 /*
 gulp html //html壓縮
 gulp css //css壓縮合并
 gulp js //js書寫規范，壓縮
 gulp img //img壓縮
 gulp clear //清空文件夾
 gulp build //執行以上
 */

10.
**開發一個 node 命令行天氣應用用于查詢用戶當前所在城市的天氣，發布到 npm 上去。可以通過如下方式安裝使用(可使用api.jirengu.com里提供的查詢天氣接口) **
npm地址