iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

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

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

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

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

Day 21: rollup plugin

rollup 的 plugin 要比 webpack 要來的簡單多,另外 rollup 也有提供一個給寫 plugin 用的 utils ,只要安裝: $ ya...

2020-10-06 ‧ 由 DanSnow 分享
DAY 22

Day 22: Parcel

Parcel 跟 webpack 是個很像的 bundler ,同樣可以打包各種類型的檔案,不一樣的是 Parcel 不用設定就可以處理大部份的情況,用來快速建...

2020-10-07 ‧ 由 DanSnow 分享
DAY 23

Day 23: Parcel plugin

這篇的範例程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/parcel-demo 雖然上一...

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

Day 24: postcss 的使用與設定

postcss 可說是相當於 css 的 babel ,可以轉換 css 的語法,同時它也是個 css 的 parser ,被用在像 stylelint 之類的...

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

Day 25: 實作個 postcss plugin

在開始前先說一件事, postcss 的 plugin 設計其實有個不小的問題,而為了解決這個問題 postcss 8 大改了這部份的架構,然而大部份的 plu...

2020-10-10 ‧ 由 DanSnow 分享
DAY 26

Day 26 介紹 vite

vite 是 Vue.js 的作者所做的一個新的 bundler ,如果你有用過應該會知道,它最特別的部份是它在開發時不做打包,而是用原生瀏覽器支援的 es6...

2020-10-11 ‧ 由 DanSnow 分享
DAY 27

Day 27 介紹 gulp

插播一下, webpack 5 出來了 gulp 是個老牌的 task runner ,它就只是執行設定好的工作,設定寫起來其實不難,不過現在前端大家主要還...

2020-10-12 ‧ 由 DanSnow 分享
DAY 28

Day 28: gulp 是怎麼運作的

要講到 gulp 怎麼運作的就不得不講到 vinyl 跟 Node.js 的 stream vinyl vinyl 是 gulp 用的虛擬的檔案格式,在它的 r...

2020-10-13 ‧ 由 DanSnow 分享
DAY 29

Day 29: eslint

eslint 是很有名的 linter ,如果有在寫 JavaScript 應該多多少少都會知道,雖然它不該被歸類來這系列的主題「建置工具」中,不過它也算是很常...

2020-10-14 ‧ 由 DanSnow 分享
DAY 30

Day 30: 實作個 eslint plugin

這篇的完整的程式可以到 https://github.com/DanSnow/ironman-2020/tree/master/build-tool/pack...

2020-10-15 ‧ 由 DanSnow 分享