tag babel

標籤
貢獻22
73
07:48 AM · Nov 03 ,2025
jdcdevloper 頭像 zhuqitao 頭像 tosmile 頭像 u_11365839 頭像 _raymond 頭像 _6085362b65292 頭像 bbqzhiyoufanshu 頭像 tiantiantiantianxuexi 頭像 skychx 頭像 Itstars 頭像 doupifaner 頭像 thjjames 頭像

@babel / 博客 RSS 訂閱

dushigemi 頭像

灬都是個謎 - GoGoCode 20行代碼實現 給所有的async函數添加try/catch

最近網上突然多了好多 給所有的async函數添加try/catch 的面試題，實現思路基本就是用 babel 正好最近也在學習 GoGoCode，就想到用 GoGoCode 實現一下 GoGoCode 是一個基於 AST 的 JavaScript/Typescript/HTML 代碼轉換工具，但相較於同類，它提供了更符合直覺的 API：一套類 JQuery 的 API 用來查找和處理 AST

ast , babel , Javascript

收藏 評論

u_16164933 頭像

謝爾登_ - 身為大廠前端的你，不能不知道Babel + Polyfill！

〇、Babel 概述 Babel 的工作原理 = “把代碼變樹 → 改樹 → 再變回代碼”。 也就是三個階段： Parse（解析）：ESNext（ES 新語法） → AST 語法樹 Transform（轉換）：插件修改 AST Generate（生成）：AST → 舊 JS 代碼（瀏覽器都可以識別的代碼） Babel 是一個“代碼轉換工具

bundle , 語法樹 , Css , 前端開發 , babel , HTML

收藏 評論

yuhuashi_584a46acea21f 頭像

雨花石 - review代碼系列（二）：

背景： 因技術優化需要，打算將現有項目庫的部分代碼摘出來單獨構建，所以在package.json加了新的打包命令,當然也要單獨進行webpack配置。 處理babel時發現有兩種babel配置，既有babel.config.js，也有.babelrc。因為都在根目錄下面，所以新的構建任務默認也會使用這兩個babel配置。考慮到後續的單獨維護，覺得用單獨的babel配置比較好。那就要處理

webpack , babel , 前端 , Javascript

收藏 評論

huankuaidehongjiu_c2eaor 頭像

歡快的紅酒_c2Eaor - 用Babel操作AST實現JavaScript代碼的自動化生成與轉換

目錄 目錄 環境搭建 代碼：修改AST的邏輯 重命名函數名 重命名變量並修改變量值 函數調用替換 控制流扁平化還原 刪除未使用的變量 對象屬性簡化 條件表達式優化 表達式還原 環境搭建 安裝環境 npm install @babel/parser @babel/traverse @babel/genera

ast , node.js , 逆向工程 , babel , Javascript

收藏 評論

vivo_tech 頭像

vivo互聯網技術 - 前端 TypeError 錯誤永久消失術

作者：來自 vivo 互聯網大前端團隊- Sun Maobin 通過開發 Babel 插件，打包時自動為代碼添加 可選鏈運算符(?.)，從而有效避免 TypeError 的發生。 一、背景介紹 在 JS 中當獲取引用對象為空值的屬性時，程序會立即終止運行並報錯：TypeError: Cannot read properties of ... 在ECMAScript 2020新增的可選鏈運算符(?.

typeerror , babel , 前端

收藏 評論

linong 頭像

linong - 通過 AST 實現組件庫替換升級

年初接到一個任務將 semi-ui 替換到 antd，但是能人力預算不太夠，所以基於工作量和效率選擇了基於 AST 的替換方案。 項目技術棧是 React + tsx 為什麼要使用 AST？ AST（Abstract Syntax Tree，抽象語法樹）是一種在計算機科學中表示源代碼語法結構的樹狀數據結構。 通過 AST，可以理解代碼的結構和含義，實現代碼分析、轉換和操作。 基於 AS

ast , typescript , babel , 前端 , Javascript

收藏 評論

defghy 頭像

defghy - element-ui部分引入失效問題追蹤

背景 項目使用vue2與element-ui；最近發現項目的部分引入失效了 // babel.config.js module.exports = api = { return { "presets": ['@vue/cli-plugin-babel/preset'], "plugins": [ [ "compon

vue-cli , 調試 , babel , element-ui

收藏 評論

fenanjiu 頭像

南玖 - 從Babel開始認識AST抽象語法樹

前言 AST抽象語法樹想必大家都有聽過這個概念，但是不是隻停留在聽過這個層面呢。其實它對於編程來講是一個非常重要的概念，當然也包括前端，在很多地方都能看見AST抽象語法樹的影子，其中不乏有vue、react、babel、webpack、typeScript、eslint等。簡單來説但凡需要編譯的地方你基本都能發現AST的存在。 babel是用來將javascript高級語法編譯成瀏覽器能夠執行的語

ast , babel , 前端 , Javascript

收藏 評論

baozouai 頭像

暴走 - 偏愛console.log的你，肯定會覺得這個插件泰褲辣！

前言 毋庸置疑，要説前端調試代碼用的最多的，肯定是console.log，雖然我現在 debugger 用的比較多，但對於生產環境、小程序真機調試，還是需要用到 log 來查看變量值，比如我下午遇到個場景：選擇完客户後返回頁面，根據條件判斷是否彈窗： if (global.isXXX || !this.customerId || !this.skuList.length) return // 到

console.log , typescript , babel , 前端 , Javascript

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 帶你揭開神秘的Javascript AST面紗之Babel AST 四件套的使用方法

作者：京東零售 周明亮 寫在前面 這裏我們初步提到了一些基礎概念和應用： 分析器 抽象語法樹 AST AST 在 JS 中的用途 AST 的應用實踐 有了初步的認識，還有常規的代碼改造應用實踐，現在我們來詳細説説使用 AST， 如何進行代碼改造？ Babel AST 四件套的使用方法 其實在解析 AST 這個工具上，有很多可以使用，上文我們已經提到過了。對於 JS 的 AST 大家已經

ast , babel , 前端 , Javascript

收藏 評論

gkymfrg1 頭像

ohoherror - 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

jest , typescript , babel , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 【原理揭秘】Vite 是怎麼兼容老舊瀏覽器的？你以為僅僅依靠 Babel？

作者：京東科技 孫凱 一、前言 對前端開發者來説，Vite 應該不算陌生了，它是一款基於 nobundle 和 bundleless 思想誕生的前端開發與構建工具，官網對它的概括和期待只有一句話：“下一代的前端工具鏈”。 Vite 最早的版本由尤雨溪發佈於3年前，經歷了3年多的發展，Vite 也已逐漸迭代成熟，它的穩定性、擴展性、周邊生態足以在生產環境中支撐各種業務場景的落地。但是關於Vite的

vite , 瀏覽器 , babel , 前端

收藏 評論

zhuqitao 頭像

zhuqitao - 告別 cursor: pointer 遺忘症！一鍵自動添加手勢樣式

你是否還在手動給每一個可點擊元素添加 cursor: pointer？忘了加，用户體驗就大打折扣。 現在，只需安裝 ​ babel-plugin-pointe​，就能徹底解決這個問題！這是一個 Babel 插件，能夠自動、智能地為所有帶有點擊事件的元素注入正確的指針樣式。 💡 核心亮點：智能且非侵入式 1. 🤯 自動檢測，全框架支持 ​Vue 3​：檢測 @click、v-on:click

插件 , Css , babel , Javascript

收藏 評論

thjjames 頭像

小皇帝James - 編寫babel的插件

前言 Babel 是一個通用的多功能的 JavaScript 編譯器，讓一些新版本的語法或者語法糖可以在低版本的瀏覽器上跑起來。 它有三個主要處理步驟 Parse - Transform - Generate。 在 Transform 轉換過程中通過將插件（或預設）應用到配置文件來啓用代碼轉換。 AST 編寫 Babel 插件非常複雜，需要有相當的基礎知識，在講插件之前必須得提起 AS

ast , plugin , babel , 前端 , Javascript

收藏 評論

doupifaner 頭像

豆皮範兒 - AST，真香

豆皮粉兒們，又見面了，今天這一期，由字節跳動數據平台的太郎醬，帶大家走進AST的世界。 作者：太郎醬 什麼是AST 抽象語法樹（Abstract Syntax Tree, AST），是源代碼的抽象語法結構的樹狀表示，與之對應的是具體語法樹；之所以是抽象的，是因為抽象語法樹並不會表示出真實語法中出現的每一個細節，而且是文法無關、不依賴於語言的細節；可以把AST想象成一套標準化的編程語言接口定義，只不

ast , babel , Javascript

收藏 評論

Itstars 頭像

新茶十九 - babel詳解

Babel 全面詳解 一、Babel 概述 1.1 什麼是 Babel Babel 是一個 JavaScript 編譯器，主要用於將 ES6+ 代碼轉換為向後兼容的 JavaScript 代碼，以便能夠在當前和舊版本的瀏覽器或環境中運行。 核心功能： 語法轉換（ES6+ → ES5） 添加 polyfill（支持新 API） 源碼轉換（JSX、Ty

前端開發 , babel , Javascript , Json

收藏 評論

skychx 頭像

鹵代烴 - 🔬 一文搞懂前端兼容問題

如果你喜歡我的文章，希望點贊👍 收藏 📁 評論 💬 三連支持一下，謝謝你，這對我真的很重要！ 對於大部分開發者來説，版本兼容是一件存在感很低的事情，因為它在絕大部分情況下都是一行配置，在一些前端工具鏈（例如 Babel、CoreJS，Autoprefixer 等工具）的幫助下適配到目標瀏覽器，只會在一些大的 break change 事件（例如 Vue3 必須在支持 Proxy 的現代瀏覽

瀏覽器兼容性 , webpack , babel , 兼容性問題 , 前端

收藏 評論

tiantiantiantianxuexi 頭像

天天天天學習丶 - 第一次vue單頁面應用ios低版本爬坑總結

1.vue打包後iphone 5c ios10.3.3打開報錯,調試時無錯誤. 求解決辦法 問題鏈接 解決辦法 webpack.prod.conf.js 配置 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') new UglifyJsPlugin({ uglifyOptions: { compress: {

vue.js , webpack-dev-server , 單頁面應用 , babel , Javascript

收藏 評論

bbqzhiyoufanshu 頭像

BBQ只有番薯 - 使用mocha測試TypeScript文件

如何在mocha中測試TypeScript文件 mocha是我比較喜歡的一款的單元測試框架。使用mocha直接測試TypeScript文件，需要結合babel，preset-env,preset-typescript以及babel-register。 // linked-list.ts export default class LinkedList(){ } // ./test/linked-l

mocha , typescript , babel

收藏 評論

_6085362b65292 頭像

HZFEStudio - Babel 的原理

完整高頻題庫倉庫地址：https://github.com/hzfe/aweso... 完整高頻題庫閲讀地址：https://febook.hzfe.org/ 相關問題 Babel 是什麼 Babel 有什麼用 壓縮代碼如何實現 回答關鍵點 JS 編譯器 AST 插件系統 Babel 是 JavaScript 編譯器：他能讓開發者在開發過程中，直接使用各類方言（如 TS、Flow、JSX

ast , 壓縮工具 , 前端工具 , babel , 前端

收藏 評論

_raymond 頭像

Raymond - 瞎折騰：在html中使用 require/exports 或 import/export

本文又名 : 解析 require/exports 或 import/export 為 html 可識別的代碼 Uncaught ReferenceError: require is not defined 我一點也不想部署 webpack/gulp，僅僅只想在單個html中使用 require/exports 或 import/export # 正文前的簡略科普 require/exp

browserify , babel , 前端

收藏 評論

u_11365839 頭像

尼羲 - Webpack自定義Loader

我們知道 webpack 只能處理 JavaScript 和 Json 文件，面對 CSS、圖片等資源是無能為力的，它需要通過 loader 將這些資源轉換為可處理的模塊。 loader 的本質是一個解析資源的函數模塊，該函數對接受到的內容進行轉換，然後返回 webpack 可處理的資源。 loader的執行順序 loader 可根據執行順序區分為：

執行順序 , yyds乾貨盤點 , webpack , Css , 前端開發 , babel

收藏 評論

tosmile 頭像

浪遏飛舟 - 前後端未分離項目檢視ES6和Web API兼容性方案

背景 近半年，已產生幾起FreeMarker項目(後面統一簡稱FM項目)在IE瀏覽器或者360瀏覽器兼容模式環境下下因使用 ES6+ 高級語法特性而運行出錯的線上問題，導致業務流程無法執行下去。雖然一直在強調開發同學在做FM項目的需求時不要使用ES6，但是口頭上的的團隊公約約束性不強，加上開發同學早已習慣性使用ES6，使之問題層出不窮，另外，還有些Web Apis和樣式在IE上存在兼容性問題（比如

ecmascript-6 , 前後端分離 , 兼容性 , eslint , babel

收藏 評論