npm-gulp-webpack

題目1: 如何全局安裝一個 node 應用?

npm install -g XXX//即可全局安裝一個node應用

題目2: package.json 有什么作用?

  • 每個項目的根目錄下面,一般都有一個package.json文件,定義了這個項目所需要的各種模塊,以及項目的配置信息(比如名稱、版本、許可證等元數據)。npm install命令根據這個配置文件,自動下載所需的模塊,也就是配置項目所需的運行和開發環境。
    1. scripts字段
      scripts指定了運行腳本命令的npm命令行縮寫,比如start指定了運行npm run start時,所要執行的命令。
    2. dependencies字段,devDependencies字段
      dependencies字段指定了項目運行所依賴的模塊,devDependencies指定項目開發所需要的模塊。
    3. bin字段
      bin項用來指定各個內部命令對應的可執行文件的位置。
    4. main字段
      main字段指定了加載的入口文件,require('moduleName')就會加載這個文件。這個字段的默認值是模塊根目錄下面的index.js。
    5. config 字段
      config字段用于添加命令行的環境變量。
    6. version字段
      表示項目的版本好,默認1.0.0
    7. author
      表示項目的作者
{
    "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有什么區別?

  • npm install --save app表示項目運行時的依賴,其他用戶在安裝此應用時一起安裝。
  • npm install --save-dev表示項目開發時的以來,其他用戶在安裝此應用時不會一起安裝。

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

  • node_module查找依賴的路線是:先從本地目錄下尋找,不存在就依次向上級目錄中查詢,直到系統根目錄。node全局安裝在系統根目錄下,所以全局安裝后可在所有目錄下使用。

題目5: npm3與 npm2相比有什么改進?yarn和 npm 相比有什么優勢? (選做題目)

  • npm3與 npm2相比最重要就是把依賴管理的改變
    • npm2的方式是層層嵌套的 。
      安裝依賴的時候比較簡單直接,直接按照包依賴的樹形結構下載填充本地目錄結構。因為 npm 設計的初衷就是考慮到了包依賴的版本錯綜復雜的關系,同一個包因為被依賴的關系原因會出現多個版本,簡單地填充結構保證了無論是安裝還是刪除都會有統一的行為和結構。
      于是缺陷就凸顯出來了,太深的目錄樹結構會嚴重影響效率,甚至在 Windows 下可能會超出系統路徑限制的長度。另外,在 Windows 有刪 node_modules 目錄經歷的可能都經歷過漫長的等待。
    • npm3的方式是把最新的依賴放在同一層。
      針對 npm2 的問題,npm3 加了點算法,直白的解釋就是:npm install 時會按照 package.json 里依賴的順序依次解析,遇到新的包就把它放在第一級目錄,后面如果遇到一級目錄已經存在的包,會先判斷版本,如果版本一樣則忽略,否則會按照 npm2 的方式依次掛在依賴包目錄下
  • yarn和 npm 相比有什么優勢
    • 更快
      yarn緩存了每個下載過的包,所以再次使用的時候無需重復下載。同時利用并行下載以最大化資源利用率,一次安裝速度更快。
    • 更安全
      在執行代碼之前,yarn會通過算法校驗每個安裝包的完整性。
    • 更可靠
      使用詳細和見解的鎖文件格式和明確的安裝算法,yarn能夠保證在不同系統下無差異的工作

題目6: webpack是什么?和其他同類型工具比有什么優勢?

  • webpack 是一個現代 JavaScript 應用程序的模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關系圖(dependency graph),其中包含應用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle。
    • 在webpack開來一切皆模塊。包括你的js代碼,也包括css和fonts以及圖片等等,只要通過合適的loaders,他們都可以被當做模塊處理。
    • Webpack本身做能處理原聲的js模塊,但是loaders可以將各種類型的資源轉換成js模塊。這樣,任何資源都可以成為Webpack可以處理的模塊。
    • 豐富的插件系統。大多數功能都是基于這個插件系統運行的,還可以開發和使用開源的webpack插件,來滿足各式各樣的需求。
    • 和requirejs相比較,requirejs的功能它都有,還能兼容AMD,ES6。webpack不需要寫define,自己exports后,require即可。

題目7:npm script是什么?如何使用?

  • npm script允許在package.json中使用script字段定義腳本命令。通過設置npm script可以方便的實現前端工作流。例如:輸入命令npm run start,就會執行index.js文件。輸入命令npm run begin,就會在命令行輸出'there it goes'
"scripts": {
    "begin": "echo there it goes!",
    "start": "node index.js",

}

題目8: 使用 webpack 替換 入門-任務15中模塊化使用的 requriejs

預覽
代碼

題目9:gulp是什么?使用 gulp 實現圖片壓縮、CSS 壓縮合并、JS 壓縮合并

  • gulp是基于Nodejs的自動任務運行器, 她能自動化地完成javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成,并監聽文件在改動后重復指定的這些步驟
var gulp = require('gulp')
var clean = require('gulp-clean')//清空文件夾
var cssnano = require('gulp-cssnano')//css壓縮
var concat = require('gulp-concat')//合并文件
var uglify = require('gulp-uglify')//js壓縮
var imagemin = require('gulp-imagemin')//圖片壓縮
var babel = require('gulp-babel')
var notify = require('gulp-notify')

gulp.task('css', function () {
  gulp.src('./dist/app.css')
  .pipe(cssnano())
  .pipe(gulp.dest('./gulp/css'))
  .pipe(notify('CSS 編譯成功!!!!'))
})

gulp.task('js', function () {
  gulp.src(['./dist/app.merge.js'])
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./gulp/js'))
    .pipe(notify('JS 編譯成功!!!!'))
})

gulp.task('img', function () {
  gulp.src('./src/image/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./gulp/image'))
    .pipe(notify('IMG 編譯成功!!!!'))
})

gulp.task('img1', function () {
  gulp.src('./src/image/history/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./gulp/image/history'))
    .pipe(notify('IMG1 編譯成功!!!!'))
})

gulp.task('img2', function () {
  gulp.src('./src/image/more/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./gulp/image/more'))
    .pipe(notify('IMG2 編譯成功!!!!'))
})

gulp.task('img3', function () {
  gulp.src('./src/image/watches/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./gulp/image/watches'))
    .pipe(notify('IMG3 編譯成功!!!!'))
})

gulp.task('clean', function () {
  gulp.src(['./gulp/css/*.css', './gulp/image/*','./gulp/js/*.js'],{read: false})
  .pipe(clean())
})
gulp.task('build', ['clean'],function() {
  gulp.start('css','js','img','img1','img2','img3')
})

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

$ npm install weather-search -g
weather //查詢本地天氣
weather beijing //查詢beijing天氣,最好使用漢字
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 題目1: 如何全局安裝一個 node 應用? Node模塊采用npm install命令安裝。 每個模塊可以“全局...
    蕭雪圣閱讀 1,796評論 0 1
  • 題目1: 如何全局安裝一個 node 應用? 如果下載速度比較慢,可以使用淘寶的鏡像 install 可以縮寫成 ...
    輝夜乀閱讀 430評論 0 0
  • 如何全局安裝一個 node 應用? npm install -g package.json 有什么作用? 可以理解...
    邢烽朔閱讀 593評論 0 1
  • 如何全局安裝一個 node 應用? 通過下面這個命令可以全局安裝一個node應用 簡寫形式 通過全局安裝的node...
    LeeoZz閱讀 980評論 0 0
  • 去年看了四十幾本書,但是只是看了,把書中的大部分內容忘了。今年,努力養成讀完一本書,寫一篇讀書筆記的習慣,加...
    Eva伊伊閱讀 431評論 0 2