The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何讓 Angular CLI v8+ 建置專案時可以不要輸出 ES5 版本 (browserslist)

Angular CLI 從 v8 版本開始,就支援一個「差異化載入」(Differential Loading) 功能,此功能會自動判斷當今世上所有主流瀏覽器中,是否支援 ES5 或 ES2015 (ES6) 語法。如果這些瀏覽器還有不支援 ES2015 的版本尚在市場上流通的話,Angular CLI 在執行 ng build --prod 的時候,就會建置出分別為 ES5 與 ES2015 兩個版本,並透過 nomodule 屬性達成差異化載入。想當然爾,如果一次建置兩個版本,總體建置時間也會倍增。本篇文章我將解釋這部分技術細節,如果你只想建置出 ES2015 的版本,也請繼續看下去。

... 繼續閱讀 ...

Angular CLI 7.3 使用 ES2015 的 nomodule 屬性載入 Polyfills 函式庫

最近推出的 Angular CLI 7.3 版本,新增了一個相當亮眼的特性。當你的 Angular 應用程式同時要符合 IE 或舊版瀏覽器時,以往都會用 Polyfill 來填充缺少的 HTML5/JS APIs,但這件事到了 Angular CLI 7.3 又變得更貼心了。不但如此,這個新特性一樣可以用在各種 SPA 框架中,像是 Vue, React 或其他函式庫也都可以套用相同技巧。欲知詳情請繼續看下去。

... 繼續閱讀 ...

網站如何開始使用 ES6 / ES2015 模組化技術進行前端開發

在 2019 的今天,還有多少人在使用傳統前端技術在開發 Web 應用程式?撇除市面上知名的 SPA 框架不說,就算你公司內部還在使用 jQuery 開發網頁,你依然可以將自己升級到使用現代化前端技術的前端工程師。今天這篇文章,將分享如何將現有傳統網站逐步升級,改用如 ES6 / ES2015 等語法,以及透過好用的模組打包工具(module bundler)將全新的 JS 語法轉譯為舊版瀏覽器也能執行的 JS 語法。

... 繼續閱讀 ...