Webpack

今天突然看到 TJ 開了一個新 Repo 是 frontend boilerplate 嚇到我了，自從 TJ 去年發表要轉向 Go 之後，就把他自己很多的 Node.js Project 轉給其他人維護，也漸漸沒在 Github 上面活動，但是今天又看到她整理了一份 frontend boilerplate，內容含了現代流行的前端開發工具，大家可以參考看看，是個不錯的 Template:

• Webpack
• React
• Redux
• Babel
• Autoprefixer
• PostCSS
• CSS modules
• Rucksack
• Hot reloading
• Redux router
• Redux effects
• TodoMVC example

期待 TJ 能有其他新作品啊。

在這幾年的趨勢看來，JavaScript 已經環繞在各領域了，不管在 Web 前端或後端，上層或下層，都充滿了 JavaScript，其實都是托 Node.js 的福，網路上看到這篇 JavaScript in 2015，裡面講到 JavaScript 所有的工具，不管前端到後端，每一年都有新的工具跟新的 Framework，從以前寫 Backbone 到 Angular.js 到現在 React.js 改變了整個 JavaScript View 的生態，工具流程整合從 Grunt.js 到 Gulp.js 的出現，整個生態又轉換了，大家陸續將工具全都轉到 Gulp，最後又出來一套 Webpack，Webpack 出現基本上不會影響 gulp 發展，因為 Webpack 還是有很多限制，在前端或後端在上 Production 前的一些流程像是 copy 檔案等，這些是 webpack 無法整合的，看到這些工具一一出現，也不知道明年或現在會不會又跑出一套新的玩具，讓整個 JavaScript 生態整個改變。寫上層的同時，看到同事在寫底層，同事就會跑過來拍拍我肩膀說：『好險我是搞 Kernel，搞上層就要跟你們一樣天天追新技術，永遠沒有停止的一天』。看一下全世界 Job Trends

寫 Facebook React 就是要搭配 Webpack，Webpack 已經是前端開發的必備工具，要測試 React Component 就是要用 Facebook 開發的 Jest 框架，使用 Webpack 也許會搭配 Less or Sass Loader 讓每個 component 都可以獨立有 CSS 檔案。要在 JS 內直接引入 CSS 檔案寫法如下

import '!style!css!less!./Schedule.less';
import React, { Component } from 'react';