iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

前端建置工具完全手冊 系列

前端框架五花八門,可是建置工具卻只更新了 2 3 代而已,相較之下要來的穩定多了,這些工具如 webpack, babel 都是我們在現代開發前端時不知不覺之中得去使用到的工具,可是我們真的了解這些工具嗎?現在我們大多都靠著框架提供的基本設定就搞定了這些工具,會不會有一天,我們非得正面面對這些工具呢?比如只要正確的設定好 webpack 你就可以在打包時順便的對圖片做最佳化,還可以做 prerender 來提供更好的 SEO

這系列不只是介紹這些工具的使用方法,還會去探究它們底層的實作原理,以及如何寫個 plugin ,完全客制化這些工具的功能

鐵人鍊成 | 共 30 篇文章 | 13 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1: 前言

前端框架五花八門,可是建置工具卻只更新了 2 3 代而已,相較之下要來的穩定多了,這些工具如 webpack, babel 都是我們在現代開發前端時不知不覺之中...

2020-09-16 ‧ 由 DanSnow 分享
DAY 2

Day 2: Transpiler: babel & postcss

在開始之前先說一下,接下來這兩篇會是介紹這些工具的背景,並沒有任何的使用與實作,如果你已經知道這些工具的由來或是沒有興趣的,可以從 Day 4 再開始看起 如果...

2020-09-17 ‧ 由 DanSnow 分享
DAY 3

Day 3: Bundler: webpack 與 rollup

webpack 以現在而言又是個在背後默默無名的功臣,不過如果你在 vue-cli 或是 create-react-app 誕生之前就在使用 React 或 V...

2020-09-18 ‧ 由 DanSnow 分享
DAY 4

Day 4: babel 的使用與設定

終於要開始講到實際應用了,由於 babel 是由多個模組與 plugin 組合起來的專案,於是不透過像 vue-cli 之類的專案建構工具的話就要安裝一堆東西很...

2020-09-19 ‧ 由 DanSnow 分享
DAY 5

Day 5: babel 進階設定

有時我們可能會有需要在不同的環境下提供不同的設定,或是針對不同的檔案提供不同的設定的情況,這時候有兩個東西可以使用: module.exports = {...

2020-09-20 ‧ 由 DanSnow 分享
DAY 6

Day 6: babel 是如何運作的

前面提過 babel 是個把程式碼編譯成程式碼的工具,本質上它還是個編譯器,所以它在做的事基本上就是編譯器在做的事,不過這邊會避免對編譯器的部份講的太細,重點是...

2020-09-21 ‧ 由 DanSnow 分享
DAY 7

Day 7: babel 的套件

babel 實際上拆成好幾個套件,有些平常基本上也用不到,因為那一般而言是開發 plugin 時才會去接觸到的,這邊就來一一介紹跟 plugin 還有一般使用有...

2020-09-22 ‧ 由 DanSnow 分享
DAY 8

Day 8: 第一個 babel plugin

介紹了這麼多,我們終於要來介紹怎麼寫個 plugin 了,這邊會盡量涵蓋大部份的用法,不過如果還是有缺的話可以去看超詳細的 Babel Handbook,不過它...

2020-09-23 ‧ 由 DanSnow 分享
DAY 9

Day 9: babel scope & helpers

這邊的 scope 就是指變數的作用域, babel 在解析時也會去分析變數的使用情況,於是我們就有機會判斷一個變數實際的值是什麼,或是可以用來避免增加新的變數...

2020-09-24 ‧ 由 DanSnow 分享
DAY 10

Day 10: babel macro

babel macro 是一個 babel 的 plugin ,它可以讓你把特殊的 babel 的 plugin 當成 package 來引入使用,這在 cre...

2020-09-25 ‧ 由 DanSnow 分享