iT邦幫忙

babel相關文章
共有 25 則文章
鐵人賽 Modern Web DAY 20

技術 [番外篇] 從npm安裝到活用Webpack Babel - 十分鐘就上手

不知不覺鐵人賽來到了Day20了! 講了很多ES6的語法,從let、const到樣板語法, 箭頭函式、擴展運算子到Import/Export, 有太多太好用的寫...

鐵人賽 Modern Web DAY 11
前端建置工具完全手冊 系列 第 11

技術 Day 11: 寫個 babel macro

在前一篇有提到寫 babel macro 比較簡單,這邊就來看看一個 babel macro 的基本架構: const { createMacro } = re...

鐵人賽 Modern Web DAY 10
前端建置工具完全手冊 系列 第 10

技術 Day 10: babel macro

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

鐵人賽 Modern Web DAY 9

技術 Day 9: babel scope & helpers

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

鐵人賽 Modern Web DAY 8

技術 Day 8: 第一個 babel plugin

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

鐵人賽 Modern Web DAY 7

技術 Day 7: babel 的套件

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

鐵人賽 Modern Web DAY 6

技術 Day 6: babel 是如何運作的

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

鐵人賽 Modern Web DAY 5

技術 Day 5: babel 進階設定

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

鐵人賽 Modern Web DAY 4

技術 Day 4: babel 的使用與設定

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

鐵人賽 Modern Web DAY 2

技術 Day 2: Transpiler: babel & postcss

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

鐵人賽 Modern Web DAY 1

技術 Day 1: 前言

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

技術 [JS]使用babel 轉譯 ES7 的 Async function(適用於瀏覽器)--3(完)

本篇主旨:透過babel轉譯使用Async function的js檔,使其可在瀏覽器(非Node環境)運行 上篇 閱前注意: 本篇為個人使用筆記,為供未來使用,...

技術 [JS]使用babel 轉譯 ES7 的 Async function(適用於瀏覽器)--2

本篇主旨:透過babel轉譯使用Async function的js檔,使其可在瀏覽器(非Node環境)運行 上篇 閱前注意: 本篇為個人使用筆記,為供未來使用,...

技術 [JS]使用babel 轉譯 ES7 的 Async function(適用於瀏覽器)--1

本篇主旨:透過babel轉譯使用Async function的js檔,使其可在瀏覽器(非Node環境)運行 閱前注意: 本篇為個人使用筆記,為供未來使用,會包...

鐵人賽 Modern Web DAY 28

技術 Day27 | 最強聯名款 TSX 上市-Babel、Webpack、Jest 篇

前言 進到入最後一個章節,本篇章開始會持續說明如何將 TypeScript 導入 React 專案裡,最後會再和大家介紹筆者怎麼在專案裡運用 TypeScrip...

鐵人賽 Modern Web DAY 4

技術 Day03 | JSX 瀏覽器看不懂?要翻譯就靠 Babel

前言 基本上瀏覽器只看得懂三種語言,分別是 HTM、CSS 和 JavaScript,因此接下來學習 React 使用的 JSX 語法,瀏覽器無法讀懂,也沒辦法...

鐵人賽 Modern Web DAY 3

達標好文 技術 [筆記][React]從零到一的webpack開發環境(2)-React開發篇

Hello!大家好啊!記得我們昨天裝了node.js、npm、webpack還用npm init建立一個專案,然後用webpack -p打包了一個JavaScr...

鐵人賽 Modern Web DAY 7
Webpack with ASP.NET MVC 系列 第 7

技術 Babel 設定

關於 Babel 看一下 Babel 官網上的定義,馬上就能明白 Babel 的功用。 在 ES6 之後,ECMAScript 版本每年都會更新,2018 年...

技術 [ES6-重點紀錄] 開發環境建置(上) - Babel 編譯工具

已經寫了好幾篇介紹 ES6 特色的文章,這次就來詳細介紹 JavaScript ES6 的開發環境要如何建立吧!由於文章內容有點長,就分為兩篇來討論,此篇主軸為...

鐵人賽 Modern Web DAY 23
重新學習網頁設計 系列 第 23

技術 DAY 23. Webpack 設定

DAY 23. Webpack 設定 由於近幾年前端需求變化之大,因此各類相關技術演進速度劇增 作為核心的JavaScript當然不在話下,若遲遲不肯跟進自己的...

鐵人賽 Modern Web DAY 6
Vue.js 30天隨身包 系列 第 6

技術 Day06 - 熟悉Webpack專案架構

專案整體架構 當我們使用webpack樣板初始化一個完整的vue專案,該專案資料夾內基本架構如下圖: static資料夾內存放的是“真正的”靜態資源,他們不...

鐵人賽 Modern Web DAY 23

技術 <23 - React 上陣 02> Webpack - Babel - React 聯手 - 撰寫多個元件並匯入至某個JS

繼上一篇 <22 - React 上陣> Webpack - Babel - React 聯手,已經做好基本的安裝與設定,接下來要更進一步寫多個元件...

鐵人賽 Modern Web DAY 10

技術 新一代的 JavaScript:ES6 與 babel

新一代的 JavaScript:ES6 與 babel 時代在進步,程式語言也會跟著一起進步。JavaScript 其實是一個叫做 ECMAScript 標準的...

鐵人賽 Modern Web DAY 3

技術 Day 03:React Ecosystem

本篇目的 這篇雖然不免俗的介紹到一些眾所皆知的工具,但嘗試用一些比較不死板的方式,寫出基本概念、筆者的看法與一些值得參考的資源,相信可以帶給大家一些啟發。 Ba...

鐵人賽 Modern Web DAY 2

技術 Day2 / Basic -- ES6 vs Babel

ES6 vs Babel <好讀版> 前言 接下來的幾篇文章,會先介紹一些基本的技術和觀念。這一些觀念不僅在本 boilerplate 適用,對 R...