iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 12
0
Modern Web

每日文章推薦系列 第 12

Day 12 前置編譯器

  • 分享至 

  • xImage
  •  

基本用途

我提到的主要都是覺得原本的語言提供的特性不夠用

所以會做出一套工具 來提供想要的功能

最後再編譯成原始的語言來讓環境可以直接套用

有哪些

javascript

個人玩過coffeescript跟livescript

因為之前有學python 加上遇到javascript的callback hell的摧殘

所以當時是覺得這兩個語言都還蠻有打到痛點的

不過自從es6跟babel開始流行

就越來越多人跳回去直接寫es6了

babel也算是前置編譯器

可以把新版的語法轉成瀏覽器可以支援的語法

但是因為沒有改變語法所以我另外提

CSS

CSS的部分就算是大亂鬥了

  • SASS,SCSS
  • less
  • stylus
  • postcss

比較特別的是我覺得以上沒有特別的優劣

目前也是都還有人用

基本上還是去研究看看哪個比較符合你自己的需求

像我就比較喜歡SASS

BUNDLER

介紹完前面的工具

就知道目前前端環境檔案非常的繁雜

但是最後還是要產生出js css jpg png html等靜態檔案

所以就出現了打包工具

主要有

  • webpack
  • browserify

目前主流應該算是webpack 吧

不過設定有點繁雜

另外還有rollup值得介紹一下

還有最近推出號稱免設定的Parcel

如果覺得太困難是可以用套裝的工具

順便緬懷一下http://fireapp.kkbox.com/

Task Runner

因為手動編譯js,css之類的東西太麻煩了

所以就有人做出來一些工具讓人可以把工作整合處理

早期大家用grunt

後來覺得grunt設定檔很難寫

所以又跑出來gulp 因為是直接寫javascript去控制

因此更符合工程師的喜好

還有一派喜歡更傳統的make

總結

基本上目前寫個比較複雜的前端可能都避免不了以上的工具

所以有人說以前前端只要引入jquery

但是現在都要從npm install開始

每次都裝一大包

個人建議新手都從簡單的工具上手啦

不用特別避開用現成的工具

像是我上面提到的prepros等工具

可以先用 等察覺到哪裡不合用了再來替換工具

我當初就是從prepros跳到grunt 再一路自己玩上來的

今日文章分享

今天看的文章

越來越難掰分享以外的內容了XD


上一篇
Day 11 npm
下一篇
Day 13 Laravel的學習
系列文
每日文章推薦30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言