babel詳解詳情 - Babel,javascript,json,JavaScript,前端開發新茶十九博客

Babel 全面詳解

一、Babel 概述

1.1 什麼是 Babel

Babel 是一個 JavaScript 編譯器，主要用於將 ES6+ 代碼轉換為向後兼容的 JavaScript 代碼，以便能夠在當前和舊版本的瀏覽器或環境中運行。

核心功能：

語法轉換（ES6+ → ES5）
添加 polyfill（支持新 API）
源碼轉換（JSX、TypeScript 等）

1.2 為什麼需要 Babel

// ES2022 代碼（現代瀏覽器可能不支持）
class Person {
  #privateField = 'secret';  // 私有字段
  
  static {
    console.log('Static block');  // 靜態塊
  }
}

const arr = [1, 2, 3];
const result = arr.at(-1);  // 數組 .at() 方法

// 轉換為 ES5 兼容代碼
"use strict";

function _classPrivateFieldInitSpec(obj, privateMap, value) { /*...*/ }

var Person = function Person() {
  _classPrivateFieldInitSpec(this, _privateField, { /*...*/ });
};

var _privateField = new WeakMap();

console.log('Static block');

var arr = [1, 2, 3];
var result = arr[arr.length - 1];  // 使用傳統方式

二、Babel 架構與工作原理

2.1 Babel 的工作流程

源代碼 → 解析(Parser) → AST → 轉換(Transformer) → AST → 生成(Generator) → 目標代碼

2.2 核心包解析

{
  "@babel/core": "核心編譯器",
  "@babel/parser": "將源代碼解析為AST",
  "@babel/traverse": "遍歷和修改AST",
  "@babel/generator": "將AST轉換為代碼",
  "@babel/types": "AST節點類型定義和創建",
  "@babel/template": "代碼模板生成AST"
}

2.3 AST（抽象語法樹）示例

// 源代碼
const sum = (a, b) => a + b;

// AST 結構（簡化版）
{
  type: "Program",
  body: [{
    type: "VariableDeclaration",
    declarations: [{
      type: "VariableDeclarator",
      id: { type: "Identifier", name: "sum" },
      init: {
        type: "ArrowFunctionExpression",
        params: [
          { type: "Identifier", name: "a" },
          { type: "Identifier", name: "b" }
        ],
        body: {
          type: "BinaryExpression",
          operator: "+",
          left: { type: "Identifier", name: "a" },
          right: { type: "Identifier", name: "b" }
        }
      }
    }],
    kind: "const"
  }]
}

三、Babel 配置詳解

3.1 配置文件類型

// 1. babel.config.json / .babelrc.json
{
  "presets": [...],
  "plugins": [...]
}

// 2. babel.config.js（推薦）
module.exports = {
  presets: [...],
  plugins: [...],
  env: {
    development: {...},
    production: {...},
    test: {...}
  }
};

// 3. babel.config.cjs（CommonJS）
module.exports = {...};

// 4. babel.config.mjs（ES Module）
export default {...};

// 5. package.json 中的 babel 字段
{
  "name": "my-package",
  "babel": {
    "presets": [...],
    "plugins": [...]
  }
}

3.2 配置優先級

項目級配置（babel.config.json）> 目錄級配置（.babelrc）> package.json

3.3 環境配置

// babel.config.js
module.exports = function(api) {
  api.cache.using(() => process.env.NODE_ENV);
  
  const presets = [...];
  const plugins = [...];
  
  if (process.env.NODE_ENV === 'development') {
    plugins.push('react-refresh/babel');
  }
  
  if (process.env.NODE_ENV === 'production') {
    plugins.push(['transform-remove-console', { exclude: ['error', 'warn'] }]);
  }
  
  return {
    presets,
    plugins,
    // 其他配置...
  };
};

四、預設（Presets）

4.1 官方預設

// @babel/preset-env（最常用）
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        // 目標環境配置
        targets: {
          // 瀏覽器版本
          browsers: [
            '> 1%',            // 全球使用率 > 1%
            'last 2 versions',  // 每個瀏覽器的最近2個版本
            'not ie <= 11',     // 排除 IE 11 及以下
            'not dead'          // 排除已停止維護的瀏覽器
          ],
          
          // 或指定具體版本
          // chrome: '58',
          // ie: '11',
          // node: 'current', // 當前Node版本
          // node: '14.0.0',  // 指定Node版本
        },
        
        // 模塊系統
        modules: 'auto', // 'amd' | 'umd' | 'systemjs' | 'commonjs' | 'cjs' | 'auto' | false
        
        // Polyfill 配置
        useBuiltIns: 'usage', // 'entry' | 'usage' | false
        corejs: {
          version: '3.32',    // 指定 core-js 版本
          proposals: true      // 是否包含提案階段的特性
        },
        
        // 調試選項
        debug: false,          // 輸出調試信息
        shippedProposals: true // 包含已確定會進入標準的提案
      }
    ]
  ]
};

// @babel/preset-react
module.exports = {
  presets: [
    [
      '@babel/preset-react',
      {
        runtime: 'automatic', // 'classic' | 'automatic'（React 17+）
        development: process.env.NODE_ENV === 'development',
        importSource: '@emotion/react' // 支持 Emotion
      }
    ]
  ]
};

// @babel/preset-typescript
module.exports = {
  presets: [
    [
      '@babel/preset-typescript',
      {
        isTSX: true,           // 啓用 JSX 解析
        jsxPragma: 'React',    // JSX 編譯器指令
        allExtensions: true    // 支持所有文件擴展名
      }
    ]
  ]
};

4.2 第三方預設

// Vue.js 3
module.exports = {
  presets: ['@vue/babel-preset-app']
};

// Next.js
module.exports = {
  presets: ['next/babel']
};

// Nuxt.js
module.exports = {
  presets: ['@nuxt/babel-preset-app']
};

五、插件（Plugins）

5.1 常用插件分類

// 1. 語法轉換插件
{
  plugins: [
    '@babel/plugin-transform-arrow-functions',       // 箭頭函數
    '@babel/plugin-transform-classes',               // 類
    '@babel/plugin-transform-destructuring',         // 解構
    '@babel/plugin-transform-spread',                // 擴展運算符
    '@babel/plugin-transform-parameters',            // 參數
    '@babel/plugin-transform-template-literals',     // 模板字符串
    '@babel/plugin-proposal-optional-chaining',      // 可選鏈 ?.
    '@babel/plugin-proposal-nullish-coalescing-operator', // 空值合併 ??
    '@babel/plugin-proposal-class-properties',       // 類屬性
    '@babel/plugin-proposal-private-methods',        // 私有方法
    '@babel/plugin-proposal-decorators',             // 裝飾器
    '@babel/plugin-syntax-dynamic-import',           // 動態導入
    '@babel/plugin-proposal-export-default-from',    // export default from
    '@babel/plugin-proposal-export-namespace-from',  // export * as
    '@babel/plugin-proposal-throw-expressions',      // 拋出表達式
    '@babel/plugin-proposal-pipeline-operator',      // 管道運算符
    '@babel/plugin-proposal-partial-application',    // 偏函數應用
    '@babel/plugin-proposal-do-expressions',         // do 表達式
  ]
}

// 2. 優化插件
{
  plugins: [
    '@babel/plugin-transform-runtime',      // 複用輔助函數
    'babel-plugin-lodash',                  // Lodash 按需加載
    'babel-plugin-import',                  // 組件庫按需加載
    'babel-plugin-transform-remove-console', // 移除 console
    'babel-plugin-transform-remove-debugger', // 移除 debugger
    'babel-plugin-jsx-remove-data-test-id', // 移除測試屬性
  ]
}

// 3. CSS-in-JS 插件
{
  plugins: [
    ['styled-components', { ssr: true }],    // styled-components
    'emotion',                               // Emotion
    'linaria/babel',                         // Linaria
  ]
}

5.2 插件順序

// 插件執行順序：
// 1. Plugins 在 Presets 之前執行
// 2. 插件順序：從前往後執行
// 3. Presets 順序：從後往前執行（倒序）

module.exports = {
  presets: [
    'preset-a', // 第三執行
    'preset-b', // 第二執行
    'preset-c'  // 第一執行
  ],
  plugins: [
    'plugin-a', // 第一執行
    'plugin-b', // 第二執行
    'plugin-c'  // 第三執行
  ]
};

5.3 插件參數配置

module.exports = {
  plugins: [
    // 無參數插件
    '@babel/plugin-transform-arrow-functions',
    
    // 有參數插件（數組形式）
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true, // 使用舊版裝飾器語法
        decoratorsBeforeExport: true
      }
    ],
    
    // 有參數插件（對象形式）
    {
      name: '@babel/plugin-proposal-class-properties',
      options: {
        loose: true // 使用寬鬆模式
      }
    },
    
    // 自定義插件路徑
    './plugins/my-custom-plugin.js'
  ]
};

六、Polyfill 與 Runtime

6.1 三種 Polyfill 方案對比

// 方案一：@babel/polyfill（已廢棄，Babel 7.4.0+）
// 舊方式（不推薦）
import '@babel/polyfill';

// 方案二：core-js + regenerator-runtime（推薦）
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage', // 按需引入
        corejs: {
          version: 3,         // 使用 core-js@3
          proposals: true
        }
      }
    ]
  ]
};

// 方案三：@babel/runtime + @babel/plugin-transform-runtime
module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,           // 使用 core-js@3 的 runtime 版本
        helpers: true,       // 複用 helper 函數
        regenerator: true,   // 複用 regenerator 運行時
        useESModules: false  // 是否使用 ES Module
      }
    ]
  ]
};

6.2 配置示例

// package.json
{
  "dependencies": {
    "core-js": "^3.32.0",
    "regenerator-runtime": "^0.14.0"
  },
  "devDependencies": {
    "@babel/core": "^7.23.0",
    "@babel/plugin-transform-runtime": "^7.23.0",
    "@babel/preset-env": "^7.23.0",
    "@babel/runtime": "^7.23.0",
    "@babel/runtime-corejs3": "^7.23.0"
  }
}

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        // 方法一：使用 useBuiltIns（全局污染，適合應用）
        useBuiltIns: 'usage',
        corejs: { version: 3, proposals: true }
      }
    ]
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        // 方法二：使用 transform-runtime（無污染，適合庫）
        corejs: 3,
        helpers: true,
        regenerator: true,
        version: '^7.23.0'
      }
    ]
  ]
};

七、與構建工具集成

7.1 Webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            // 啓用緩存（顯著提升構建速度）
            cacheDirectory: true,
            // 壓縮緩存目錄
            cacheCompression: true,
            // 緩存標識
            cacheIdentifier: JSON.stringify({
              babel: require('@babel/core').version,
              env: process.env.NODE_ENV,
              config: require('fs').readFileSync('./babel.config.js', 'utf8')
            }),
            // 並行處理
            ...(process.env.NODE_ENV === 'production' && {
              compact: true,  // 壓縮代碼
              minified: true, // 最小化
              comments: false // 移除註釋
            })
          }
        }
      }
    ]
  }
};

7.2 Rollup

// rollup.config.js
import babel from '@rollup/plugin-babel';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    nodeResolve(),
    babel({
      babelHelpers: 'runtime', // 'bundled' | 'runtime' | 'inline' | 'external'
      exclude: 'node_modules/**',
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      // Babel 配置可以直接寫在這裏
      presets: [
        [
          '@babel/preset-env',
          {
            modules: false, // Rollup 處理模塊
            targets: { esmodules: true }
          }
        ]
      ],
      plugins: ['@babel/plugin-transform-runtime']
    })
  ]
};

7.3 Vite

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        // 自定義 Babel 配置
        presets: [...],
        plugins: [
          ['@babel/plugin-proposal-decorators', { legacy: true }],
          ['@babel/plugin-proposal-class-properties', { loose: true }]
        ],
        // 或使用獨立的 babel.config.js
        babelrc: true,
        configFile: true
      }
    })
  ]
});

八、高級配置

8.1 條件編譯

// babel-plugin-conditional-compile
module.exports = {
  plugins: [
    [
      'conditional-compile',
      {
        // 定義條件變量
        define: {
          DEBUG: process.env.NODE_ENV === 'development',
          VERSION: JSON.stringify(require('./package.json').version),
          FEATURE_FLAGS: {
            NEW_FEATURE: process.env.NEW_FEATURE === 'true'
          }
        }
      }
    ]
  ]
};

// 源代碼中使用
function MyComponent() {
  /* IFDEBUG */
  console.log('Debug info'); // 只在開發環境編譯
  /* FIDEBUG */
  
  return (
    <div>
      {/* IFDEBUG */}
      <DebugPanel /> // 調試面板
      {/* FIDEBUG */}
      <MainContent />
    </div>
  );
}

8.2 代碼拆分

// babel-plugin-code-split
module.exports = {
  plugins: [
    [
      'code-split',
      {
        // 基於路由拆分
        routes: [
          { path: '/home', chunkName: 'home' },
          { path: '/about', chunkName: 'about' },
          { path: '/contact', chunkName: 'contact' }
        ],
        // 或基於動態導入自動拆分
        dynamicImports: true,
        // 最小 chunk 大小（KB）
        minChunkSize: 10
      }
    ]
  ]
};

8.3 自定義插件開發

// my-babel-plugin.js
module.exports = function myPlugin(babel) {
  const { types: t } = babel;
  
  return {
    name: 'my-custom-plugin',
    visitor: {
      // 1. 轉換箭頭函數
      ArrowFunctionExpression(path) {
        if (path.node.type === 'ArrowFunctionExpression') {
          path.replaceWith(
            t.functionExpression(
              null,
              path.node.params,
              path.node.body,
              false,
              false
            )
          );
        }
      },
      
      // 2. 移除 console.log
      CallExpression(path) {
        const callee = path.node.callee;
        
        if (
          t.isMemberExpression(callee) &&
          t.isIdentifier(callee.object, { name: 'console' }) &&
          t.isIdentifier(callee.property, { name: 'log' })
        ) {
          path.remove();
        }
      },
      
      // 3. 添加版本註釋
      Program: {
        enter(path, state) {
          const { file } = state;
          const comment = `/* Version: ${process.env.npm_package_version} */`;
          path.addComment('leading', comment);
        }
      },
      
      // 4. 重命名變量
      Identifier(path) {
        // 將所有的 'foo' 重命名為 'bar'
        if (path.node.name === 'foo') {
          path.node.name = 'bar';
        }
      }
    }
  };
};

// 使用自定義插件
module.exports = {
  plugins: ['./plugins/my-babel-plugin.js']
};

九、性能優化

9.1 緩存策略

// .babelrc.js
module.exports = function(api) {
  // 永久緩存配置
  api.cache.forever();
  
  // 或基於環境緩存
  api.cache.using(() => process.env.NODE_ENV);
  
  // 或基於文件內容緩存
  api.cache.using(() => {
    return process.env.NODE_ENV + 
      require('fs').readFileSync('./package.json', 'utf8');
  });
  
  return {
    // 配置...
  };
};

9.2 並行處理

// 使用 babel-loader 的並行處理
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            // 啓用並行處理
            cacheDirectory: true,
            // 使用多線程
            ...(require('os').cpus().length > 1 && {
              envName: process.env.BABEL_ENV || process.env.NODE_ENV,
              configFile: false,
              babelrc: false,
              presets: [
                ['@babel/preset-env', { targets: { node: 'current' } }]
              ]
            })
          }
        }
      }
    ]
  }
};

9.3 按需加載優化

// babel-plugin-import 配置示例
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true // 或 'css'
      },
      'antd'
    ],
    [
      'import',
      {
        libraryName: 'lodash',
        libraryDirectory: '',
        camel2DashComponentName: false
      },
      'lodash'
    ],
    [
      'import',
      {
        libraryName: '@material-ui/core',
        libraryDirectory: 'esm',
        camel2DashComponentName: false
      },
      '@material-ui/core'
    ]
  ]
};

// 轉換前
import { Button, Modal } from 'antd';
import _ from 'lodash';
import _get from 'lodash/get';

// 轉換後
import Button from 'antd/es/button';
import Modal from 'antd/es/modal';
import get from 'lodash/get';

十、調試與問題排查

10.1 調試配置

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        debug: true, // 啓用調試輸出
        // 輸出信息包括：
        // - 使用的插件和 polyfill
        // - 目標環境
        // - 轉換的語法特性
      }
    ]
  ],
  
  // 源代碼映射
  sourceMaps: true,
  sourceType: 'module',
  sourceRoot: '/',
  
  // 保留格式
  retainLines: true,
  comments: true,
  compact: false,
  minified: false
};

10.2 常用命令

# 查看 Babel 版本
npx babel --version

# 編譯單個文件
npx babel src/index.js --out-file dist/index.js

# 編譯整個目錄
npx babel src --out-dir dist

# 監聽文件變化
npx babel src --out-dir dist --watch

# 使用特定配置文件
npx babel src --out-dir dist --config-file ./my-babel-config.js

# 查看 AST
npx babel-node --inspect "console.log('hello')"

10.3 性能分析

// 使用 babel-plugin-perf 進行性能分析
module.exports = {
  plugins: [
    [
      'babel-plugin-perf',
      {
        // 測量函數執行時間
        functions: ['render', 'calculate', 'process'],
        // 輸出格式
        format: 'json', // 'json' | 'console' | 'file'
        // 輸出文件
        output: './perf-stats.json',
        // 閾值（毫秒）
        threshold: 10
      }
    ]
  ]
};

十一、最佳實踐

11.1 項目結構

project/
├── babel.config.js          # 根配置
├── package.json
├── src/
│   ├── components/
│   │   └── .babelrc.js     # 組件特定配置
│   ├── utils/
│   │   └── .babelrc.js     # 工具函數配置
│   └── index.js
├── scripts/
│   └── build.js
├── plugins/                 # 自定義插件
│   └── my-plugin.js
└── presets/                # 自定義預設
    └── my-preset.js

11.2 配置示例

// 生產環境優化配置
const productionConfig = {
  assumptions: {
    setPublicClassFields: true,
    privateFieldsAsProperties: true
  },
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['> 0.5%', 'last 2 versions', 'not dead']
        },
        bugfixes: true,
        loose: true, // 寬鬆模式，生成更快的代碼
        modules: false,
        exclude: [
          'transform-typeof-symbol', // 排除不必要的轉換
          'transform-regenerator'
        ]
      }
    ],
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
        development: false
      }
    ]
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: false,
        helpers: true,
        regenerator: false,
        useESModules: true
      }
    ],
    'babel-plugin-transform-react-remove-prop-types',
    ['babel-plugin-transform-remove-console', { exclude: ['error', 'warn'] }],
    'babel-plugin-jsx-remove-data-test-id'
  ],
  minified: true,
  comments: false,
  compact: true
};

// 開發環境配置
const developmentConfig = {
  ...productionConfig,
  presets: [
    [
      '@babel/preset-env',
      {
        ...productionConfig.presets[0][1],
        debug: true
      }
    ],
    [
      '@babel/preset-react',
      {
        ...productionConfig.presets[1][1],
        development: true
      }
    ]
  ],
  plugins: [
    ...productionConfig.plugins.filter(
      p => p !== 'babel-plugin-transform-remove-console'
    ),
    'react-refresh/babel'
  ],
  minified: false,
  comments: true,
  compact: false
};

module.exports = function(api) {
  api.cache.using(() => process.env.NODE_ENV);
  
  return process.env.NODE_ENV === 'production' 
    ? productionConfig 
    : developmentConfig;
};

11.3 常見問題解決

Polyfill 重複引入

// 錯誤：混合使用 useBuiltIns 和 transform-runtime
{
  presets: [
    ['@babel/preset-env', { useBuiltIns: 'usage' }]
  ],
  plugins: [
    ['@babel/plugin-transform-runtime', { corejs: 3 }] // 衝突！
  ]
}

// 正確：選擇一種方案
// 方案A：使用 useBuiltIns（適合應用）
{
  presets: [
    ['@babel/preset-env', { 
      useBuiltIns: 'usage',
      corejs: 3 
    }]
  ]
}

// 方案B：使用 transform-runtime（適合庫）
{
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime', { 
      corejs: 3 
    }]
  ]
}

裝飾器配置

// 正確順序
{
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ]
}

// 錯誤順序（會導致問題）
{
  plugins: [
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    ['@babel/plugin-proposal-decorators', { legacy: true }] // 應該在前面
  ]
}

十二、未來趨勢

12.1 Babel 8 新特性

// 預計特性
{
  assumptions: {              // 性能假設
    noDocumentAll: true,      // 假設沒有 document.all
    noClassCalls: true,       // 假設類不會被調用
    constantReexports: true,  // 假設 reexport 是常量
  },
  // 更快的編譯
  // 更好的 Tree Shaking
  // 改進的 Source Map
  // 內置 WebAssembly 支持
}

12.2 與 SWC、esbuild 的對比

// 性能對比（粗略）
const tools = {
  babel: {
    type: '編譯器',
    speed: '慢',
    plugins: '豐富',
   生態: '成熟',
    適用: '複雜轉換、舊瀏覽器支持'
  },
  swc: {
    type: '編譯器（Rust）',
    speed: '快（10-20x）',
    plugins: '有限',
   生態: '發展中',
    適用: '生產構建'
  },
  esbuild: {
    type: '打包器/編譯器（Go）',
    speed: '極快（10-100x）',
    plugins: '有限',
   生態: '發展中',
    適用: '開發服務器、簡單項目'
  }
};

// 混合使用策略
// 開發：esbuild（快速啓動）
// 生產：Babel（完全兼容）
// 庫構建：swc（快速編譯）

Babel 是現代 JavaScript 開發中不可或缺的工具，理解其工作原理和配置方式對於構建高質量的前端應用至關重要。隨着 JavaScript 語言的不斷演進，Babel 也在持續更新以適應新的語法和特性。

博客 / 詳情

babel詳解

Babel 全面詳解

一、Babel 概述

1.1 什麼是 Babel

1.2 為什麼需要 Babel

二、Babel 架構與工作原理

2.1 Babel 的工作流程

2.2 核心包解析

2.3 AST（抽象語法樹）示例

三、Babel 配置詳解

3.1 配置文件類型

3.2 配置優先級

3.3 環境配置

四、預設（Presets）

4.1 官方預設

4.2 第三方預設

五、插件（Plugins）

5.1 常用插件分類

5.2 插件順序

5.3 插件參數配置

六、Polyfill 與 Runtime

6.1 三種 Polyfill 方案對比

6.2 配置示例

七、與構建工具集成

7.1 Webpack

7.2 Rollup

7.3 Vite

八、高級配置

8.1 條件編譯

8.2 代碼拆分

8.3 自定義插件開發

九、性能優化

9.1 緩存策略

9.2 並行處理

9.3 按需加載優化

十、調試與問題排查

10.1 調試配置

10.2 常用命令

10.3 性能分析

十一、最佳實踐

11.1 項目結構

11.2 配置示例

11.3 常見問題解決

十二、未來趨勢

12.1 Babel 8 新特性

12.2 與 SWC、esbuild 的對比

發佈 評論

發佈評論