跳至主要內容

什麼是 Babel？

Babel 是一個 JavaScript 編譯器​

Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 程式碼轉換成當前及舊版瀏覽器或環境中向下相容的 JavaScript 版本。以下是 Babel 能為您執行的主要事項

  • 轉換語法
  • 透過第三方 polyfill（例如 core-js）補充目標環境中缺少的功能
  • 原始碼轉換（codemods）
  • 更多！（查看這些 影片 以獲得靈感）
JavaScript
// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});
提示

如要取得編譯器的超棒教學課程，請查看 the-super-tiny-compiler，它也會說明 Babel 本身在高階層級是如何運作的。

ES2015 及更新版本​

Babel 透過語法轉換器支援最新版本的 JavaScript。

這些 外掛程式讓您能夠立即使用新的語法，而不用等到瀏覽器支援。查看我們的 使用指南 以開始使用。

JSX 和 React​

Babel 可以轉換 JSX 語法！查看我們的 React 預設值 以開始使用。將它與 babel-sublime 套件一起使用，將語法突顯帶到一個全新的層級。

您可以使用以下方式安裝此預設值

npm install --save-dev @babel/preset-react

並將 @babel/preset-react 新增到你的 Babel 組態中。

JSX
export default function DiceRoll(){
  const getRandomNumber = () => {
    return Math.ceil(Math.random() * 6);
  };

  const [num, setNum] = useState(getRandomNumber());

  const handleClick = () => {
    const newNum = getRandomNumber();
    setNum(newNum);
  };

  return (
    <div>
      Your dice roll: {num}.
      <button onClick={handleClick}>Click to get a new number</button>
    </div>
  );
};
提示

深入了解 JSX

類型註解 (Flow 和 TypeScript)​

Babel 可以移除類型註解！查看我們的 Flow 預設值 或 TypeScript 預設值 以開始使用。請記住，Babel 沒有進行類型檢查；你仍然必須安裝並使用 Flow 或 TypeScript 來檢查類型。

你可以使用以下方式安裝 flow 預設值

npm install --save-dev @babel/preset-flow
JavaScript
// @flow
function square(n: number): number {
  return n * n;
}

或使用以下方式安裝 typescript 預設值

npm install --save-dev @babel/preset-typescript
JavaScript
function Greeter(greeting: string) {
  this.greeting = greeting;
}
提示

深入了解 Flow 和 TypeScript！

可插入​

Babel 是由外掛程式組成的。使用現有的外掛程式或撰寫你自己的外掛程式來組合你自己的轉換管線。透過使用或建立 預設值，輕鬆使用一組外掛程式。 深入了解 →

使用 astexplorer.net 隨時建立外掛程式，或使用 generator-babel-plugin 來產生外掛程式範本。

example-babel-plugin.js
// A plugin is just a function
export default function({ types: t }) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = [...name]
          .reverse()
          .join("");
      },
    },
  };
}

可除錯​

Source map 支援，讓你輕鬆除錯已編譯的程式碼。

符合規格​

Babel 盡可能地遵循 ECMAScript 標準。它也可能有一些特定的選項，以符合規格作為效能的權衡。

精簡​

Babel 嘗試使用最少的程式碼，且不依賴龐大的執行時間。

在某些情況下，這可能很難做到，而且有「假設」選項，以可讀性、檔案大小和速度來權衡規格相容性。