AST，真香
豆皮粉兒們，又見面了，今天這一期，由字節跳動數據平台的太郎醬，帶大家走進AST的世界。 作者：太郎醬 什麼是AST 抽象語法樹（Abstract Syntax Tree, AST），是源代碼的抽象語法結構的樹狀表示，與之對應的是具體語法樹；之所以是抽象的，是因為抽象語法樹並不會表示出真實語法中出現的每一個細節，而且是文法無關、不依賴於語言的細節；可以把AST想象成一套標準化的編程語言接口定義，只不
昵稱 豆皮範兒
@babel
貢獻者12
粉絲0
貢獻者
@babel
動態 列表
編寫babel的插件
前言 Babel 是一個通用的多功能的 JavaScript 編譯器，讓一些新版本的語法或者語法糖可以在低版本的瀏覽器上跑起來。 它有三個主要處理步驟 Parse - Transform - Generate。 在 Transform 轉換過程中通過將插件（或預設）應用到配置文件來啓用代碼轉換。 AST 編寫 Babel 插件非常複雜，需要有相當的基礎知識，在講插件之前必須得提起 AS
昵稱 小皇帝James
GoGoCode 20行代碼實現 給所有的async函數添加try/catch
最近網上突然多了好多 給所有的async函數添加try/catch 的面試題，實現思路基本就是用 babel 正好最近也在學習 GoGoCode，就想到用 GoGoCode 實現一下 GoGoCode 是一個基於 AST 的 JavaScript/Typescript/HTML 代碼轉換工具，但相較於同類，它提供了更符合直覺的 API：一套類 JQuery 的 API 用來查找和處理 AST
昵稱 灬都是個謎
【原理揭秘】Vite 是怎麼兼容老舊瀏覽器的？你以為僅僅依靠 Babel？
作者：京東科技 孫凱 一、前言 對前端開發者來説，Vite 應該不算陌生了，它是一款基於 nobundle 和 bundleless 思想誕生的前端開發與構建工具，官網對它的概括和期待只有一句話：“下一代的前端工具鏈”。 Vite 最早的版本由尤雨溪發佈於3年前，經歷了3年多的發展，Vite 也已逐漸迭代成熟，它的穩定性、擴展性、周邊生態足以在生產環境中支撐各種業務場景的落地。但是關於Vite的
昵稱 京東雲開發者
jest +ts +esm
Jest 是當下最主流的前端測試框架 首先初始化ts環境 yarn add typescript --dev npx tsc --init 第二步:安裝ts下的jest yarn add jest @types/jest --dev 第三步:新建tests文件夾 tests/index.spec.ts it('init',()={ expect(true).toB
昵稱 ohoherror
帶你揭開神秘的Javascript AST面紗之Babel AST 四件套的使用方法
作者：京東零售 周明亮 寫在前面 這裏我們初步提到了一些基礎概念和應用： 分析器 抽象語法樹 AST AST 在 JS 中的用途 AST 的應用實踐 有了初步的認識，還有常規的代碼改造應用實踐，現在我們來詳細説説使用 AST， 如何進行代碼改造？ Babel AST 四件套的使用方法 其實在解析 AST 這個工具上，有很多可以使用，上文我們已經提到過了。對於 JS 的 AST 大家已經
昵稱 京東雲開發者
偏愛console.log的你，肯定會覺得這個插件泰褲辣！
前言 毋庸置疑，要説前端調試代碼用的最多的，肯定是console.log，雖然我現在 debugger 用的比較多，但對於生產環境、小程序真機調試，還是需要用到 log 來查看變量值，比如我下午遇到個場景：選擇完客户後返回頁面，根據條件判斷是否彈窗： if (global.isXXX || !this.customerId || !this.skuList.length) return // 到
昵稱 暴走
從Babel開始認識AST抽象語法樹
前言 AST抽象語法樹想必大家都有聽過這個概念，但是不是隻停留在聽過這個層面呢。其實它對於編程來講是一個非常重要的概念，當然也包括前端，在很多地方都能看見AST抽象語法樹的影子，其中不乏有vue、react、babel、webpack、typeScript、eslint等。簡單來説但凡需要編譯的地方你基本都能發現AST的存在。 babel是用來將javascript高級語法編譯成瀏覽器能夠執行的語
昵稱 南玖
element-ui部分引入失效問題追蹤
背景 項目使用vue2與element-ui；最近發現項目的部分引入失效了 // babel.config.js module.exports = api = { return { "presets": ['@vue/cli-plugin-babel/preset'], "plugins": [ [ "compon
昵稱 defghy
通過 AST 實現組件庫替換升級
年初接到一個任務將 semi-ui 替換到 antd，但是能人力預算不太夠，所以基於工作量和效率選擇了基於 AST 的替換方案。 項目技術棧是 React + tsx 為什麼要使用 AST？ AST（Abstract Syntax Tree，抽象語法樹）是一種在計算機科學中表示源代碼語法結構的樹狀數據結構。 通過 AST，可以理解代碼的結構和含義，實現代碼分析、轉換和操作。 基於 AS
昵稱 linong
前端 TypeError 錯誤永久消失術
作者：來自 vivo 互聯網大前端團隊- Sun Maobin 通過開發 Babel 插件，打包時自動為代碼添加 可選鏈運算符(?.)，從而有效避免 TypeError 的發生。 一、背景介紹 在 JS 中當獲取引用對象為空值的屬性時，程序會立即終止運行並報錯：TypeError: Cannot read properties of ... 在ECMAScript 2020新增的可選鏈運算符(?.
昵稱 vivo互聯網技術
用Babel操作AST實現JavaScript代碼的自動化生成與轉換
目錄 目錄 環境搭建 代碼：修改AST的邏輯 重命名函數名 重命名變量並修改變量值 函數調用替換 控制流扁平化還原 刪除未使用的變量 對象屬性簡化 條件表達式優化 表達式還原 環境搭建 安裝環境 npm install @babel/parser @babel/traverse @babel/genera
昵稱 歡快的紅酒_c2Eaor
review代碼系列（二）：
背景： 因技術優化需要，打算將現有項目庫的部分代碼摘出來單獨構建，所以在package.json加了新的打包命令,當然也要單獨進行webpack配置。 處理babel時發現有兩種babel配置，既有babel.config.js，也有.babelrc。因為都在根目錄下面，所以新的構建任務默認也會使用這兩個babel配置。考慮到後續的單獨維護，覺得用單獨的babel配置比較好。那就要處理
昵稱 雨花石