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