題目1： 如何全局安裝一個 node 應(yīng)用?

npm install -g webpack

題目2： package.json 有什么作用？

每個項目的根目錄下面，一般都有一個package.json文件，定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數(shù)據(jù)）。npm install命令根據(jù)這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發(fā)環(huán)境。

{
    "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",
    }
}

參考連接-阮一峰

題目3： npm install --save app 與 npm install --save-dev app有什么區(qū)別?

如果一個模塊不在package.json文件之中，可以單獨安裝這個模塊，并使用相應(yīng)的參數(shù)，將其寫入package.json文件之中。

$ npm install express --save
$ npm install express --save-dev

上面代碼表示單獨安裝express模塊，--save參數(shù)表示將該模塊寫入dependencies屬性，--save-dev表示將該模塊寫入devDependencies屬性。

題目4： node_modules的查找路徑是怎樣的?

就近原則，先在當(dāng)前目錄下的node_modules下面找，如果沒找到，逐級往上找，直到根目錄。

題目5： npm3與 npm2相比有什么改進(jìn)？yarn和 npm 相比有什么優(yōu)勢? (選做題目)

已經(jīng)出來npm5了。。。。
Yarn的優(yōu)點：

• 速度快。速度快主要來自以下兩個方面

• 并行安裝：無論 npm 還是 Yarn 在執(zhí)行包的安裝時，都會執(zhí)行一系列任務(wù)。npm 是按照隊列執(zhí)行每個 package，也就是說必須要等到當(dāng)前 package 安裝完成之后，才能繼續(xù)后面的安裝。而 Yarn 是同步執(zhí)行所有任務(wù)，提高了性能。

• 離線模式：如果之前已經(jīng)安裝過一個軟件包，用Yarn再次安裝時之間從緩存中獲取，就不用像npm那樣再從網(wǎng)絡(luò)下載了。

• 安裝版本統(tǒng)一：為了防止拉取到不同的版本，Yarn 有一個鎖定文件 (lock file) 記錄了被確切安裝上的模塊的版本號。每次只要新增了一個模塊，Yarn 就會創(chuàng)建（或更新）yarn.lock 這個文件。這么做就保證了，每一次拉取同一個項目依賴時，使用的都是一樣的模塊版本。npm 其實也有辦法實現(xiàn)處處使用相同版本的 packages，但需要開發(fā)者執(zhí)行 npm shrinkwrap 命令。這個命令將會生成一個鎖定文件，在執(zhí)行 npm install 的時候，該鎖定文件會先被讀取，和 Yarn 讀取 yarn.lock 文件一個道理。npm 和 Yarn 兩者的不同之處在于，Yarn 默認(rèn)會生成這樣的鎖定文件，而 npm 要通過 shrinkwrap 命令生成 npm-shrinkwrap.json 文件，只有當(dāng)這個文件存在的時候，packages 版本信息才會被記錄和更新。

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

• 多注冊來源處理：所有的依賴包，不管他被不同的庫間接關(guān)聯(lián)引用多少次，安裝這個包時，只會從一個注冊來源去裝，要么是 npm 要么是 bower, 防止出現(xiàn)混亂不一致。

• 更好的語義化： yarn改變了一些npm命令的名稱，比如 yarn add/remove，感覺上比 npm 原本的 install/uninstall 要更清晰。
  原文

題目6： webpack是什么？和其他同類型工具比有什么優(yōu)勢？

webpack是一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。

webpack,相比其他競爭者，他的好處有

• 模塊來源廣泛，支持包括npm/bower等等的各種主流模塊安裝／依賴解決方案
• 模塊規(guī)范支持全面，amd/cmd以及shimming等一應(yīng)具全
• 瀏覽器端足跡小，移動端友好，卻對熱加載乃至熱替換有很好的支持
• 插件機制完善，實現(xiàn)本身實現(xiàn)同樣模塊化，容易擴展

題目7：npm script是什么？如何使用？

scripts指定了運行腳本命令的npm命令行縮寫，比如start指定了運行npm run start時，所要執(zhí)行的命令。
下面的設(shè)置指定了npm run preinstall、npm run postinstall、npm run start、npm run test時，所要執(zhí)行的命令。

"scripts": {
    "preinstall": "echo here it comes!",
    "postinstall": "echo there it goes!",
    "start": "node index.js",
    "test": "tap test/*.js"
}

題目8： 使用 webpack 替換 入門-任務(wù)15中模塊化使用的 requriejs

預(yù)覽
代碼

題目9：gulp是什么？使用 gulp 實現(xiàn)圖片壓縮、CSS 壓縮合并、JS 壓縮合并

gulp是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具，是自動化項目的構(gòu)建利器；她不僅能對網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動完成；
gulp是基于Nodejs的自動任務(wù)運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟。在實現(xiàn)上，她借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。

gulp 實現(xiàn)圖片壓縮

第一步、在命令行輸入

npm install --save-dev gulp-imagemin
前提是要安裝了 gulp
第二步、創(chuàng)建 gulpfile.js 文件編寫代碼

// 獲取 gulp
var gulp = require('gulp')
    // 獲取 gulp-imagemin 模塊
var imagemin = require('gulp-imagemin')

// 壓縮圖片任務(wù)
// 在命令行輸入 gulp images 啟動此任務(wù)
gulp.task('images', function() {
    // 1. 找到圖片
    gulp.src('images/*.*')
        // 2. 壓縮圖片
        .pipe(imagemin({
            progressive: true
        }))
        // 3. 另存圖片
        .pipe(gulp.dest('dist/images'))
});


// 在命令行使用 gulp auto 啟動此任務(wù)
gulp.task('auto', function() {
        gulp.watch('images/*.*', ['images'])
    })
    // 使用 gulp.task('default') 定義默認(rèn)任務(wù)
    // 在命令行使用 gulp 啟動 images 任務(wù)和 auto 任務(wù)
gulp.task('default', ['images', 'auto'])

CSS 壓縮合并

第一步、在命令行輸入

npm install gulp-minify-css

第二步、創(chuàng)建 gulpfile.js 文件編寫代碼

// 獲取 gulp
var gulp = require('gulp')

// 獲取 minify-css 模塊（用于壓縮 CSS）
var minifyCSS = require('gulp-minify-css')

// 壓縮 css 文件
// 在命令行使用 gulp css 啟動此任務(wù)
gulp.task('css', function () {
    // 1. 找到文件
    gulp.src('css/*.css')
    // 2. 壓縮文件
        .pipe(minifyCSS())
    // 3. 另存為壓縮文件
        .pipe(gulp.dest('dist/css'))
})

// 在命令行使用 gulp auto 啟動此任務(wù)
gulp.task('auto', function () {
    // 監(jiān)聽文件修改，當(dāng)文件被修改則執(zhí)行 css 任務(wù)
    gulp.watch('css/*.css', ['css'])
});

// 使用 gulp.task('default') 定義默認(rèn)任務(wù)
// 在命令行使用 gulp 啟動 css 任務(wù)和 auto 任務(wù)
gulp.task('default', ['css', 'auto'])

JS 壓縮合并

第一步、

npm install gulp-uglify
第二步、

// 獲取 gulp
var gulp = require('gulp')

// 獲取 uglify 模塊（用于壓縮 JS）
var uglify = require('gulp-uglify')

// 壓縮 js 文件
// 在命令行使用 gulp script 啟動此任務(wù)
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 壓縮文件
        .pipe(uglify())
    // 3. 另存壓縮后的文件
        .pipe(gulp.dest('dist/js'))
})

// 在命令行使用 gulp auto 啟動此任務(wù)
gulp.task('auto', function () {
    // 監(jiān)聽文件修改，當(dāng)文件被修改則執(zhí)行 script 任務(wù)
    gulp.watch('js/*.js', ['script'])
})


// 使用 gulp.task('default') 定義默認(rèn)任務(wù)
// 在命令行使用 gulp 啟動 script 任務(wù)和 auto 任務(wù)
gulp.task('default', ['script', 'auto'])