34.npm/npmscript/gulp/webpack

1.如何全局安裝一個 node 應(yīng)用?
npm install -g <package_name>
2.package.json 有什么作用?

1.定義了模塊的配置信息(名稱、版本、許可證、依賴等),
2.通過命令npm install根據(jù)這個配置文件,下載所需模塊配置環(huán)境,便于開發(fā)者之間的協(xié)作

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

a.npm installl --save app會在package.json中的dependencies中添加運行時依賴,產(chǎn)品發(fā)布后仍需要依靠這些工具運行;
當下載一個node包時執(zhí)行npm install可以安裝dependencies下的依賴,而不會安裝devDependencies下的依賴

"dependencies" {
  "axios": "^0.16.2"
}

b.npm install --save-dev app則會在devDependencies添加開發(fā)依賴,這些工具是開發(fā)時使用的,如gulp,產(chǎn)品發(fā)布后不需要使用這些工具。

"devDependencies": {
    "gulp": "^3.9.1"
}
4.node_modules的查找路徑是怎樣的?

首先是當前文件夾下的node_modules,然后向上一級查找node_modules,一直到根目錄為止

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

參考文獻
1.Yarn vs npm: 你需要知道的一切
2.玩轉(zhuǎn)npm
3.一文看懂npm、yarn、pnpm之間的區(qū)別
4.npm 依賴解決方案

a.npm3與 npm2相比有什么改進?

  • npm3將依賴模塊扁平化存放,減輕了npm2中過長依賴嵌套的問題

b.Yarn和 npm 相比有什么優(yōu)勢?

  • Yarn默認每次安裝應(yīng)用都會創(chuàng)建或更新yarn.lock文件,以此保證其他機器安裝相同版本的依賴
  • 默認情況下Yarn的安裝速度更快,Yarn并行下載和安裝
  • Yarn支持離線安裝
  • Yarn在每個安裝包的代碼執(zhí)行前使用校驗碼驗證包的完整性
6. webpack是什么?和其他同類型工具比有什么優(yōu)勢?

webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)。當 webpack 處理應(yīng)用程序時,它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph),其中包含應(yīng)用程序需要的每個模塊,然后將所有這些模塊打包成少量的 bundle - 通常只有一個,由瀏覽器加載。

  • webpack將項目當做一個整體,通過給定的入口文件(如:index.js),找到你的項目的所有依賴文件,使用loaders和plugins來處理它們;(與gulp相比,gulp是對每一種資源單獨處理,并沒有整體的概念)
  • webpack將所有資源都視為模塊,所以諸如less,json,jpg等各種資源都可以被處理;
  • webpack根據(jù)需要將文件切分,避免模塊過多導致的請求過多,也避免只請求一次,文件過大導致的加載緩慢問題。(與r.js requirejs)
7. npm-scripts是什么?如何使用?

npm 允許在package.json文件里面,使用scripts字段定義腳本命令。

通過它,可以進行很多快捷操作。

以下為一個package.json中的scripts片段;

如下,命令行執(zhí)行npm run build相當于執(zhí)行node index.js
本地安裝webpack后,命令行執(zhí)行npm run webpack相當于執(zhí)行./node_modules/webpack/bin/webpack.js

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"node index.js",
    "webpack": "webpack",
    "server": "webpack-dev-server --open"
  },

其中test,start等npm固有命令,可以通過npm {name},其他自定義name通過npm run {name}來執(zhí)行

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

預覽鏈接
webpack配置文件

打包前后目錄結(jié)構(gòu)
9.gulp是什么?使用 gulp 實現(xiàn)圖片壓縮、CSS 壓縮合并、JS 壓縮合并

gulp是一款打造前端自動化工作流的node應(yīng)用,包括:打包,壓縮,合并,git,遠程操作等;

//gulpfile.js
var gulp = require('gulp')

var imagemin = require('gulp-imagemin');
var csso = require('gulp-csso');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('img',function () {  //圖片壓縮
    gulp.src('src/img/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs'))
})

gulp.task('css',function () {  //css壓縮合并
    gulp.src('src/css/*.css')
       .pipe(csso())
       .pipe(concat('merge.css'))
       .pipe(gulp.dest('dist/css/'))
})

gulp.task('js',function () {  //js壓縮合并
    gulp.src('src/**/*.js')
        .pipe(uglify())
        .pipe(concat('merge.js'))
        .pipe(gulp.dest('dist/js'))
})

gulp('default',['img','css','js'])  //命令行執(zhí)行g(shù)ulp即可
10.開發(fā)一個 node 命令行天氣應(yīng)用用于查詢用戶當前所在城市的天氣,發(fā)布到 npm 上去??梢酝ㄟ^如下方式安裝使用(可使用api.jirengu.com里提供的查詢天氣接口)

weather應(yīng)用-npm地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在現(xiàn)在的前端開發(fā)中,前后端分離、模塊化開發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,690評論 1 32
  • 題目1: 如何全局安裝一個 node 應(yīng)用? Node模塊采用npm install命令安裝。 每個模塊可以“全局...
    蕭雪圣閱讀 1,859評論 0 1
  • 題目1: 如何全局安裝一個 node 應(yīng)用? “全局安裝”指的是將一個模塊安裝到系統(tǒng)目錄中,各個項目都可以調(diào)用。一...
    saintkl閱讀 368評論 0 0
  • 1. 如何全局安裝一個 node 應(yīng)用? 在終端輸入npm install -g pkg pkg為安裝包的名字pk...
    _李祺閱讀 292評論 0 1
  • 1: 如何全局安裝一個 node 應(yīng)用? 全局安裝:package會被下載到到特定的系統(tǒng)目錄下( /usr/loc...
    yuhuan121閱讀 463評論 0 0

友情鏈接更多精彩內(nèi)容