Day10, npm, webpack… 那些好用的工具寫一起

這系列的文章主要備份自it鐵人賽: http://ithelp.ithome.com.tw/users/20103835/articles

切入正題直接。

npm

什麼是npm?

他全名叫Node Package Manager,用於管理Javascript套件使用,又因為我們是用在Rails下,所以不探討後端NodeJs的套件,純屬探討前端、工具、最佳化JS相關的套件。
以下是我的Node與npm版本

npm install

在執行npm的過程,最讓我熟悉的就是npm install,把在package.json中dependencies與devDependencies裡有提到的package都安裝進node_modules資料夾裡,或者你也可以下 -g 的參數讓你要安裝的package安裝成global套件。

npm run

除此之外,package中scripts也可以定義一些常用的指令,之後只要 npm run [指令] 就可以了

npm outdate, npm update

npm outdate可以列出哪些套件有更新,並可透過update更新。
要注意先看看更新哪些套件,以及更新後會要做什麼調整喔

webpack

Webpack給了正在使用 gulp 和 browserify 的開發者另一個選擇來完成模組整合的工作
From (
https://rhadow.github.io/2015/03/23/webpackIntro/)

webpack的設定對我而言真的是非常複雜,我目前也只是略懂略懂。當初在react中會使用到它,最主要是因為兩個功能:

  1. Watch
  2. 轉換JSX, coffeescript, Javascript
    可以觀看專案中的JS有哪些改變,並即時編譯一個output出來。然後又可以轉換coffeescript jsx (cjsx)到js格式。

好,開始逐一介紹有用到的部分:

Entry

entry: {
app: "./app.js",
vendor: ["jquery", "underscore", ...],
},

給定一個入口,讓webpack去逐一監看入口有用到的Javascript文件,有改變時適時更新。
也可將常用套件分割開來,像是把JQuery, D3, bootstrap之類的套件,放進Vendor裡

output

output: {
filename: 'webpack-bundle.js',
path: '../app/assets/webpack',
},

指定output出來的路徑,必要時可以去看一下output的結果是不是跟我們預想的一樣。

module

module: {
loaders: [{
test: /\.js$/,
exclude: [node_modules_dir],
loader: 'babel'
}]
},

放置會用到的loader,舉凡CSS, file, image都可以,loader還可以用”!”串在一起使用。

resolve

resolve: {
extensions: ['', '.js', '.json', '.coffee']
}

這樣之後Require的時候就不用寫副檔名啦~

好,這邊就是這麼多!!
我還沒用完所有的webpack,有錯誤的地方還要請大家見諒!
聖誕快樂各位~明天來多跑幾個範例,把目錄稍微更動一下!