不依賴 Gulp、Babel、WebPack，還能優雅地寫程式碼嗎？

純屬吐槽文，不服來辯。

不知道什麼時候開始，前端開發已經到了不開一個 watcher 就無法工作的地步了。不依賴 Gulp 、 Babel 、 WebPack ，還能優雅地寫程式碼嗎？

那我就帶你來回顧一下這一切是怎麼發生的。

從哪開始說好呢？我們就從『前端打包』開始吧。

前端打包

很久以前（也就五年左右吧，但是五年前端已經大變樣了），頁面的 JS 壓縮（混淆）一般是用谷歌的 closure compiler 做的。但是突然蹦出來個 Node.js ，前端開發者們就開始第一次小試牛刀了，用 Node.js 來做 JS 壓縮，一般都是用 uglify-js 來做。

JS 壓縮做了， CSS 壓縮是不是也可以做？ JS lint 是不是也可以做？自動測試是不是也可以做？檔案合併是不是也可以做？

於是 grunt 應運而生，它可以幫你把這些事情都做了，只需要配置一個簡單的 Gruntfile 即可。

同一時期， AMD 和 CommonJS 也出現了， Node.js 用 CommonJS 載入模組，瀏覽器用 AMD 來載入模組。前端們覺得可以統一一下，都用 CommonJS 來寫，於是用上 browserify 之類的工具。

好了，這個時候一個前端專案需要有一個 Grunt （後來又有了 Gulp 等）任務用來打包前端資源，看起來就是一個標配了。

框架的興起

前端們一直吐槽新手們用 jQuery 寫出的「義大利麵條」式的程式碼，於是發明的了一些框架，一開始比較火的是 MVC 框架（如 Backbone.js ），火了沒多久，前端們發現 MVC 框架有很多相似的程式碼都是在做「繫結事件」「更新 view 」這些事情了，於是發現了 MVVM 框架（一種早年間被微軟玩過的設計模式），最著名的庫就是 AngularJS 。

此時的庫都是不需要額外用 Grunt 做轉譯的。

直到 React 的出現。 React 背後的工程師（顯示不是前端）發明了一種新的語法—— JSX ，把 HTML 和 JS 混合起來寫。前端們看了一眼表示這才是寫模板正確的姿勢。唯一的問題是這種語法瀏覽器不支援，於是需要把 JSX 翻譯成 JS 。

此時 Grunt 大概也因為效能太低被 Gulp 取代了。

於是此時用 React 的專案一定會去用 Gulp 將 JSX 翻譯成 JS 。

ECMAScript 的發展

同時期， ES 發展也是非常迅猛。

IE 8 不支援 ES5 ，於是前端們說，「 IE 8 去死吧」，不想再支援 IE 8 了，因為那幾年移動端發展迅猛，網頁主要都是 H5 頁面（不要問 H5 是不是 HTML5 ，不是 HTML5 ），所以很多前端確實不需要管 IE 8 。現在想想， Windows Phone 的失敗，真是前端的福音啊。

前端就開始追新了，一定要第一時間用上最新版的 JS 語法。但是即便是 Chrome 和 Firefox 也不可能那麼快就支援最新語法。於是前端說，不過就是在 Gulp 裡再加一道轉譯嘛，用 Babel 把 ES 2016 的語法轉譯成 ES 5 就好了。

於是 Gulp 裡又多了一項任務。

重新思考

經過這兩三年的飛速發展，前端們是不是應該重新思考一下，做一個網頁之前要加這麼多 Gulp 任務的初衷到底是什麼？是否解決了問題。

從目前的結果來看，基本可以總結為

1. DOM 不好用，換成虛擬 DOM
2. CSS 不好用，換成 CSS in JS
3. 瀏覽器支援的 JS 不好用，換成 ES 最新版語法，然後轉譯為瀏覽器支援的 JS
4. DOM Event 不用了，去新造一個 Event 機制。
5. Gulp 用得太多了 watch 很慢，於是加上了 hot module replacement

基本把能拋棄的都拋棄了。

實際上這些變化非常適合複雜的 Web 應用，然而 90% 的頁面根本不是單頁面應用好嗎！

能不能讓我寫一個 CSS 一個 JS 重新整理一下就能看到效果！為什麼我要花那麼多時間來學習轉譯工具，以及解決轉譯過程中的各種問題。

總感覺『弊大於利』。甚至有的時候覺得這是『沒有問題，創造問題也要上』。

大家可以思考這麼幾個問題：

1. 不用 bable，用瀏覽器支援的 ES 行不行？（IE 8 不支援？shim？）
2. 不用 JSX（React 寫起來就不爽了，最討厭 React 這點了）行不行？
3. 不用 Webpack 行不行？如果你依賴的 Webpack 被前端界拋棄了怎麼辦？顯然 JS 載入器的標準會出來的。你到時候怎麼看 Webpack 都彆扭。
4. 在想得狠一點，前端很多東西發展到現在，都違背初衷、過早優化、過度設計了。

模組化：檔案劃分模組-> 名稱空間 -> AMD -> CommonJS -> UMD -> …… （問題越來越多） 載入器：script src -> load script -> requirejs -> browserify -> webpack -> hot module replacement -> …… （開發是爽是爽了，執行和除錯可不見得）

你們都看不到弊端是吧？ 

你也可以只思考一個問題：

現在的 HTML 、 CSS 和 JS ，真的沒辦法直接用了？（大型專案裡）用起來真的那麼難用？非要轉譯。

你加上這些工具和轉譯後，就沒有後果？