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

通過下面這個命令可以全局安裝一個node應(yīng)用

npm install --global appName

簡寫形式

npm i -g appName

通過全局安裝的node應(yīng)用會存放在'/usr/local/lib/node_modules'中稼虎。

package.json有什么作用衅檀？

package.json是.json格式文件，記錄了node包的相關(guān)信息霎俩，如依賴哀军，版本號，名字等打却，每當用戶 npm install或使用命令行的時候杉适，就會根據(jù)package下載相關(guān)依賴和執(zhí)行相關(guān)文件。下面有幾個比較重要的信息

"name": appName
//記錄了這個node應(yīng)用的名字
"version": "1.0.0"
//記錄了node應(yīng)用的版本柳击，每次更新發(fā)布node包猿推，都要更新version
"description": ""
//node應(yīng)用的相關(guān)描述
"main": "index.js"
//node應(yīng)用的入口文件
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
}
//script可以集成一些命令行，通過'npm run + 命令行的名字'執(zhí)行該命令行捌肴，簡化操作
//有的命令名npm本身有定義蹬叭，如test，star就不需要run
//script還有一個很重要的功能状知，就算我們不是做node包秽五，也可以使用script功能來構(gòu)建工作流
"dependencies": {}
//dependencies記錄了node應(yīng)用的相關(guān)依賴
"devDependencies": {}
//devDependencies記錄了該node應(yīng)用的開發(fā)依賴
//是node應(yīng)用開發(fā)過程中用到，但和功能不相關(guān)的依賴饥悴，如debug等

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

兩條命令都是在本地安裝node應(yīng)用筝蚕，安裝在node_module文件夾中
現(xiàn)在假設(shè)我們在寫一個node應(yīng)用卦碾，用到app1和app2。
我們的node應(yīng)用依賴app1起宽，是node應(yīng)用功能的一部分洲胖，沒有app1，我們的node應(yīng)用就跑不起來坯沪，這時候就要使用npm install --save app命令安裝app1绿映，這個命令在安裝app1的同時，會把信息寫入到我們node應(yīng)用的package.json文件的dependencies中腐晾，用戶install我們的應(yīng)用時就會根據(jù)這條信息下載相關(guān)的依賴
此外叉弦，開發(fā)中我們還用到了app2進行輔助開發(fā)，app2和我們的應(yīng)用功能沒關(guān)系藻糖，是用來debug淹冰、測試、打包之類的巨柒，這種時候就可以使用 npm install --save-dev app來安裝app2樱拴，安裝的同時把信息記錄到devDependencies,用戶install應(yīng)用是不會下載相關(guān)app，app2為開發(fā)依賴

node_modules的查找路徑是怎樣的?

在node.js中洋满，模塊分為內(nèi)建模塊晶乔，本地模塊，node_module模塊
當我們require一個模塊時牺勾，先查找是否為內(nèi)建模塊正罢，然后是否為本地模塊，最后查找是否為node_module模塊
當require的模塊既不是內(nèi)建模塊驻民，也不是本地模塊翻具，且在當前目錄中的node_module中也找不到時，就會向上查找上一級的node_module回还，一直到根目錄
當文件標識不以'./ ../'開頭呛占，則跳過本地模塊查找，直接在node_module中查找

npm3與npm2相比有什么改進懦趋？yarn和npm相比有什么優(yōu)勢?

npm3改進了一些依賴算法
假設(shè)有兩個包晾虑，app1和app2
app1呢依賴a1和b1
app2呢依賴a1和b2
在npm2下，會把兩個包的依賴完全下載下來仅叫，分別放在app1和app2下帜篇，如圖所示

npm2

npm3則會分析這幾個包有哪些共同依賴，把共同依賴的包放在一起诫咱，共同使用笙隙，單獨依賴包另外下載，如圖所示

npm3

Yarn is only a new CLI client that fetches modules from the npm registry. Nothing about the registry itself will change — you’ll still be able to fetch and publish packages as normal.

yarn拉取的包還是來自于npm倉庫怕吴，yarn只是一個新的用來操作npm倉庫的cli

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

webpack是一個模塊加載器和打包工具追驴，它能把JS／css／圖片等等的資源打包成模塊使用
它的優(yōu)勢：
1.以CommonJS規(guī)范書寫模塊，同時也支持AMD疏之、CMD規(guī)范
2.webpack本身只能讀取JS殿雪，但可以使用loadsh將各種資源打包轉(zhuǎn)換成JS模塊，因此webpack不僅可以打包JS锋爪，還可以是css／html／圖片等等
3.強大的插件系統(tǒng)

npm scripts是什么丙曙？如何使用？

npm scripts是package.json中的一條信息

"scripts" : {
      "test": "echo hello"其骄，
      "build": //command line
}

npm scripts中可以定義一些命令行亏镰，供npm快捷調(diào)用，像上面的例子拯爽，只要在命令行中輸入npm test索抓，就會執(zhí)行echo hello這條語句
npm中內(nèi)置了一些像是'test','star'這樣快捷命令，只要在scripts中定義好毯炮，直接就可以使用

npm test
npm star

但是其他的自定義快捷命令就要使用run逼肯，像上面的'build'，就要這樣使用

npm run build

使用npm scripts桃煎，可以大大簡化命令行的操作篮幢，建立快速工作流程

gulp是什么？使用gulp實現(xiàn)圖片壓縮为迈、CSS壓縮合并三椿、JS壓縮合并

gulp是一個以流為基礎(chǔ)的前端自動化構(gòu)建工具缺菌，可以實現(xiàn)css的壓縮合并、js壓縮合并搜锰、圖片壓縮等等
下面是gulpfile.js一些配置

var gulp = require('gulp'),
    cssnano = require('gulp-cssnano'),   //css壓縮
    autoprefixer = require('gulp-autoprefixer'),    //css前綴
    imagemin = require('gulp-imagemin'),  //圖片壓縮
    babel = require('gulp-babel'),      //es6轉(zhuǎn)換es5
    uglify = require('gulp-uglify'),      //js壓縮
    concat = require('gulp-concat')    //文件合并


//css自動前綴和壓縮合并
gulp.task('merge:css',function() {
    gulp.src('./src/css/*.css')
        .pipe(autoprefixer({
            browsers: ['last 4 versions'],
            cascade: false
        }))
        .pipe(cssnano())
        .pipe(gulp.dest('./dist/css'))
})

//圖片壓縮
gulp.task('merge:images',function() {
    gulp.src('./src/images/*.{jpg,png,gif}')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'))
})

//js壓縮
gulp.task('merge:js',function() {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            presets: ['env' ]
        }))
        .pipe(uglify())
        .pipe(concat('main.js'))
        .pipe(gulp.dest('./dist/js'))
})

webpack改寫企業(yè)站

Demo
源碼

天氣小工具伴郁！

npm