Trung BìnhBuild Tools iconBuild Tools

Babel là gì? Vai trò trong JavaScript toolchain?

Babel là JavaScript compiler với 3-phase pipeline: Parse (source code → AST via @babel/parser), Transform (plugins traverse và modify AST — ví dụ arrow function plugin chuyển () => {} thành function() {}), Generate (AST → output code via @babel/generator).

  • Polyfills vs transforms: transforms là syntax changes (const → var, class → prototype); polyfills là runtime additions cho missing APIs (Promise, Array.from, fetch) — Babel transforms syntax nhưng không tự polyfill APIs. core-js là polyfill library chuẩn — @babel/preset-env với useBuiltIns: 'usage' tự động import chỉ polyfills cần thiết dựa trên browserslist config. browserslist config (trong package.json hoặc .browserslistrc): target browsers list như '> 0.5%, last 2 versions, not dead' — preset-env compile chỉ những features không được target browsers hỗ trợ natively, giảm output size.
  • Plugin order: plugins chạy trước presets, plugins first-to-last, presets last-to-first (legacy behavior).
  • Babel vs SWC vs esbuild: Babel chậm nhất (JS) nhưng most customizable plugin ecosystem; SWC nhanh hơn 20-70x (Rust), ít plugins hơn; esbuild nhanh nhất nhưng không hỗ trợ custom transforms.

Xem toàn bộ Build Tools cùng filter theo level & chủ đề con.

Mở danh sách Build Tools