npm-npmscript-gulp-webpack

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

npm install -g pkg

package.json 有什么作用?

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

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

--save 會(huì)把依賴包名稱添加到 package.json 文件 dependencies 鍵下
--save-dev 則添加到 devDependencies 鍵下,只有開發(fā)測(cè)試項(xiàng)目的時(shí)候會(huì)用到,別人引用項(xiàng)目不會(huì)下載

node_modules的查找路徑是怎樣的?
例如:

// index.js
var marked = require('marked')

-demo
  --node_modules
     ---bin
     ---marked
  --index.js

先從當(dāng)前所在文件夾demo的node_modules里找marked,找不到就依次到上級(jí)目錄中的node_modules里面找,,直到系統(tǒng)根目錄。

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

npm2 & npm3
Yarn vs npm

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

webpack是一個(gè)模塊加載器和打包工具,它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔,等到實(shí)際需要的時(shí)候再異步加載。通過 loader 的轉(zhuǎn)換,任何形式的資源都可以視作模塊,比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

優(yōu)勢(shì):
對(duì)CommonJS、AMD、ES6的語法兼容
對(duì)js、css、圖片等資源文件都支持打包
串聯(lián)式模塊加載器以及插件機(jī)制,讓其具有更好的靈活性和擴(kuò)展性,例如提供對(duì)CoffeeScript、ES6的支持
有獨(dú)立的配置文件webpack.config.js
可以將代碼切割成不同的chunk,實(shí)現(xiàn)按需加載,降低了初始化時(shí)間
支持 SourceUrls 和 SourceMaps,易于調(diào)試
具有強(qiáng)大的Plugin接口,大多是內(nèi)部插件,使用起來比較靈活
webpack 使用異步 IO 并具有多級(jí)緩存。這使得 webpack 很快且在增量編譯上更加快

npm script是什么?如何使用?

npm script允許在package.json中使用scripts字段定義腳本命令

//package.json
{
  ...
  "scripts": {
    "start": "webpack"    //npm start
    "server": "webpack-dev-server --open"   //npm run server
    },
  ...
}

使用 webpack 替換 requriejs

代碼
頁(yè)面

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

在Javascript的開發(fā)過程中,經(jīng)常會(huì)遇到一些重復(fù)性的任務(wù),比如合并文件、壓縮代碼、檢查語法錯(cuò)誤、將Sass代碼轉(zhuǎn)成CSS代碼等等。通常,我們需要使用不同的工具,來完成不同的任務(wù),既重復(fù)勞動(dòng)又非常耗時(shí)。grunt,gulp都是為了解決這個(gè)問題而發(fā)明的工具,可以幫助我們自動(dòng)管理和運(yùn)行各種任務(wù),很多人認(rèn)為,在操作上,它要比Grunt簡(jiǎn)單。

//gulpfile.js
var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'), //圖片壓縮
    concat = require('gulp-concat'), //文件合并
    cssnano = require('gulp-cssnano'), //css壓縮
    uglify = require('gulp-uglify') //js壓縮

gulp.task('imgtest', function(){
    gulp.src('src/img/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img/'))
})

gulp.task('csstest', function(){
    gulp.src('src/css/*')
        .pipe(concat("merge.css"))
        .pipe(cssnano())        
        .pipe(gulp.dest('dist/css/'))
})

gulp.task('jstest', function(){
    gulp.src('src/css/*')
        .pipe(concat('merge.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'))
})

gulp.task('default', ['imgtest', 'csstest', 'jstest'])

參考

開發(fā)一個(gè) node 命令行天氣應(yīng)用用于查詢用戶當(dāng)前所在城市的天氣,發(fā)布到 npm 上去。

npm install -g weather-peacechierdo
weather
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,663評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,125評(píng)論 3 414
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,506評(píng)論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,614評(píng)論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,402評(píng)論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,934評(píng)論 1 321
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,021評(píng)論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,168評(píng)論 0 287
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,690評(píng)論 1 333
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,596評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,784評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,288評(píng)論 5 357
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,027評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,404評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,662評(píng)論 1 280
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,398評(píng)論 3 390
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,743評(píng)論 2 370

推薦閱讀更多精彩內(nèi)容

  • 題目1: 如何全局安裝一個(gè) node 應(yīng)用? “全局安裝”指的是將一個(gè)模塊安裝到系統(tǒng)目錄中,各個(gè)項(xiàng)目都可以調(diào)用。一...
    saintkl閱讀 299評(píng)論 0 0
  • 1.如何全局安裝一個(gè) node 應(yīng)用? 打開你的命令行工具輸入npm install 'packages name...
    Rising_suns閱讀 351評(píng)論 0 0
  • 1: 如何全局安裝一個(gè) node 應(yīng)用? 全局安裝:package會(huì)被下載到到特定的系統(tǒng)目錄下( /usr/loc...
    yuhuan121閱讀 404評(píng)論 0 0
  • 1. 如何全局安裝一個(gè) node 應(yīng)用? 2. package.json 有什么作用? 執(zhí)行npm init -y...
    hui_mamba閱讀 335評(píng)論 0 0
  • 題目1: 如何全局安裝一個(gè) node 應(yīng)用? npm install -g xx 題目2: package.jso...
    GaoYangTongXue丶閱讀 577評(píng)論 0 0