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

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

npm install --global appName

簡(jiǎn)寫形式

npm i -g appName

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

package.json有什么作用？

package.json是.json格式文件，記錄了node包的相關(guān)信息，如依賴，版本號(hào)，名字等，每當(dāng)用戶 npm install或使用命令行的時(shí)候，就會(huì)根據(jù)package下載相關(guān)依賴和執(zhí)行相關(guān)文件。下面有幾個(gè)比較重要的信息

"name": appName
//記錄了這個(gè)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可以集成一些命令行，通過(guò)'npm run + 命令行的名字'執(zhí)行該命令行，簡(jiǎn)化操作
//有的命令名npm本身有定義，如test，star就不需要run
//script還有一個(gè)很重要的功能，就算我們不是做node包，也可以使用script功能來(lái)構(gòu)建工作流
"dependencies": {}
//dependencies記錄了node應(yīng)用的相關(guān)依賴
"devDependencies": {}
//devDependencies記錄了該node應(yīng)用的開(kāi)發(fā)依賴
//是node應(yīng)用開(kāi)發(fā)過(guò)程中用到，但和功能不相關(guān)的依賴，如debug等

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

兩條命令都是在本地安裝node應(yīng)用，安裝在node_module文件夾中
現(xiàn)在假設(shè)我們?cè)趯懸粋€(gè)node應(yīng)用，用到app1和app2。
我們的node應(yīng)用依賴app1，是node應(yīng)用功能的一部分，沒(méi)有app1，我們的node應(yīng)用就跑不起來(lái)，這時(shí)候就要使用npm install --save app命令安裝app1，這個(gè)命令在安裝app1的同時(shí)，會(huì)把信息寫入到我們node應(yīng)用的package.json文件的dependencies中，用戶install我們的應(yīng)用時(shí)就會(huì)根據(jù)這條信息下載相關(guān)的依賴
此外，開(kāi)發(fā)中我們還用到了app2進(jìn)行輔助開(kāi)發(fā)，app2和我們的應(yīng)用功能沒(méi)關(guān)系，是用來(lái)debug、測(cè)試、打包之類的，這種時(shí)候就可以使用 npm install --save-dev app來(lái)安裝app2，安裝的同時(shí)把信息記錄到devDependencies,用戶install應(yīng)用是不會(huì)下載相關(guān)app，app2為開(kāi)發(fā)依賴

node_modules的查找路徑是怎樣的?

在node.js中，模塊分為內(nèi)建模塊，本地模塊，node_module模塊
當(dāng)我們r(jià)equire一個(gè)模塊時(shí)，先查找是否為內(nèi)建模塊，然后是否為本地模塊，最后查找是否為node_module模塊
當(dāng)require的模塊既不是內(nèi)建模塊，也不是本地模塊，且在當(dāng)前目錄中的node_module中也找不到時(shí)，就會(huì)向上查找上一級(jí)的node_module，一直到根目錄
當(dāng)文件標(biāo)識(shí)不以'./ ../'開(kāi)頭，則跳過(guò)本地模塊查找，直接在node_module中查找

npm3與npm2相比有什么改進(jìn)？yarn和npm相比有什么優(yōu)勢(shì)?

npm3改進(jìn)了一些依賴算法
假設(shè)有兩個(gè)包，app1和app2
app1呢依賴a1和b1
app2呢依賴a1和b2
在npm2下，會(huì)把兩個(gè)包的依賴完全下載下來(lái)，分別放在app1和app2下，如圖所示

npm2

npm3則會(huì)分析這幾個(gè)包有哪些共同依賴，把共同依賴的包放在一起，共同使用，單獨(dú)依賴包另外下載，如圖所示

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拉取的包還是來(lái)自于npm倉(cāng)庫(kù)，yarn只是一個(gè)新的用來(lái)操作npm倉(cāng)庫(kù)的cli

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

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

npm scripts是什么？如何使用？

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

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

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

npm test
npm star

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

npm run build

使用npm scripts，可以大大簡(jiǎn)化命令行的操作，建立快速工作流程

gulp是什么？使用gulp實(shí)現(xiàn)圖片壓縮、CSS壓縮合并、JS壓縮合并

gulp是一個(gè)以流為基礎(chǔ)的前端自動(dòng)化構(gòu)建工具，可以實(shí)現(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自動(dòng)前綴和壓縮合并
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