Hello!大家好啊!記得我們昨天裝了node.js、npm、webpack還用npm init建立一個專案,然後用webpack -p打包了一個JavaScr...
新一代的 JavaScript:ES6 與 babel 時代在進步,程式語言也會跟著一起進步。JavaScript 其實是一個叫做 ECMAScript 標準的...
已經寫了好幾篇介紹 ES6 特色的文章,這次就來詳細介紹 JavaScript ES6 的開發環境要如何建立吧!由於文章內容有點長,就分為兩篇來討論,此篇主軸為...
前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...
前言 基本上瀏覽器只看得懂三種語言,分別是 HTM、CSS 和 JavaScript,因此接下來學習 React 使用的 JSX 語法,瀏覽器無法讀懂,也沒辦法...
專案整體架構 當我們使用webpack樣板初始化一個完整的vue專案,該專案資料夾內基本架構如下圖: static資料夾內存放的是“真正的”靜態資源,他們不...
DAY 23. Webpack 設定 由於近幾年前端需求變化之大,因此各類相關技術演進速度劇增作為核心的JavaScript當然不在話下,若遲遲不肯跟進自己的開...
終於要開始講到實際應用了,由於 babel 是由多個模組與 plugin 組合起來的專案,於是不透過像 vue-cli 之類的專案建構工具的話就要安裝一堆東西很...
關於 Babel 看一下 Babel 官網上的定義,馬上就能明白 Babel 的功用。 在 ES6 之後,ECMAScript 版本每年都會更新,2018 年...
前言 進到入最後一個章節,本篇章開始會持續說明如何將 TypeScript 導入 React 專案裡,最後會再和大家介紹筆者怎麼在專案裡運用 TypeScrip...
本篇目的 這篇雖然不免俗的介紹到一些眾所皆知的工具,但嘗試用一些比較不死板的方式,寫出基本概念、筆者的看法與一些值得參考的資源,相信可以帶給大家一些啟發。 Ba...
本篇主旨:透過babel轉譯使用Async function的js檔,使其可在瀏覽器(非Node環境)運行上篇 閱前注意: 本篇為個人使用筆記,為供未來使用,會...
ES6 vs Babel <好讀版> 前言 接下來的幾篇文章,會先介紹一些基本的技術和觀念。這一些觀念不僅在本 boilerplate 適用,對 R...
本系列文章已出版實體書籍:「你的地圖會說話?WebGIS 與 JavaScript 的情感交織」(博碩文化)WebGIS啟蒙首選✖五家地圖API✖近百個程式範...
本篇主旨:透過babel轉譯使用Async function的js檔,使其可在瀏覽器(非Node環境)運行上篇 閱前注意: 本篇為個人使用筆記,為供未來使用,會...
本篇主旨:透過babel轉譯使用Async function的js檔,使其可在瀏覽器(非Node環境)運行 閱前注意: 本篇為個人使用筆記,為供未來使用,會包...
繼上一篇 <22 - React 上陣> Webpack - Babel - React 聯手,已經做好基本的安裝與設定,接下來要更進一步寫多個元件...
babel macro 是一個 babel 的 plugin ,它可以讓你把特殊的 babel 的 plugin 當成 package 來引入使用,這在 cre...
在開始之前先說一下,接下來這兩篇會是介紹這些工具的背景,並沒有任何的使用與實作,如果你已經知道這些工具的由來或是沒有興趣的,可以從 Day 4 再開始看起 如果...
前面提過 babel 是個把程式碼編譯成程式碼的工具,本質上它還是個編譯器,所以它在做的事基本上就是編譯器在做的事,不過這邊會避免對編譯器的部份講的太細,重點是...
有時我們可能會有需要在不同的環境下提供不同的設定,或是針對不同的檔案提供不同的設定的情況,這時候有兩個東西可以使用: module.exports = {...
前端框架五花八門,可是建置工具卻只更新了 2 3 代而已,相較之下要來的穩定多了,這些工具如 webpack, babel 都是我們在現代開發前端時不知不覺之中...
babel 實際上拆成好幾個套件,有些平常基本上也用不到,因為那一般而言是開發 plugin 時才會去接觸到的,這邊就來一一介紹跟 plugin 還有一般使用有...
這邊的 scope 就是指變數的作用域, babel 在解析時也會去分析變數的使用情況,於是我們就有機會判斷一個變數實際的值是什麼,或是可以用來避免增加新的變數...
介紹了這麼多,我們終於要來介紹怎麼寫個 plugin 了,這邊會盡量涵蓋大部份的用法,不過如果還是有缺的話可以去看超詳細的 Babel Handbook,不過它...
在前一篇有提到寫 babel macro 比較簡單,這邊就來看看一個 babel macro 的基本架構: const { createMacro } = re...
前言 昨天談完 TypeScript,了解到因為瀏覽器不支援 TypeScript,所以需要一個編譯器來轉換。 於是今天我們來談談另一個編譯器,扮演的角色比 T...
這篇文章的主要內容 簡單說明 JSX 跟 babel 的作用。 JSX 語法 在上一篇文章中有出現一個有點像是 html 的標籤。 const App: Re...