Babel 是一個(gè) JavaScript 編譯器

Babel 是一個(gè)工具鏈，主要用于將采用 ECMAScript 2015+ 語(yǔ)法編寫的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語(yǔ)法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。下面列出的是 Babel 能為你做的事情：

• 語(yǔ)法轉(zhuǎn)換
• 通過(guò) Polyfill 方式在目標(biāo)環(huán)境中添加缺失的功能（通過(guò)引入第三方 polyfill 模塊，例如 core-js）
• 源碼轉(zhuǎn)換（codemods）

// Babel 接收到的輸入是： ES2015 箭頭函數(shù)
[1, 2, 3].map(n => n + 1);

// Babel 輸出： ES5 語(yǔ)法實(shí)現(xiàn)的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

 有關(guān)編譯器的精彩教程，請(qǐng)查看 the-super-tiny-compiler 項(xiàng)目，它還高屋建瓴地解釋了 Babel 的工作方式。

ES2015 及更新版本

Babel 通過(guò)語(yǔ)法轉(zhuǎn)換器來(lái)支持新版本的 JavaScript 語(yǔ)法。

這些 插件 讓你現(xiàn)在就能使用新的語(yǔ)法，無(wú)需等待瀏覽器的支持。查看 使用指南 開始入門吧。

JSX 與 React

Babel 能夠轉(zhuǎn)換 JSX 語(yǔ)法！查看 React preset 了解更多信息。通過(guò)和 babel-sublime 一起使用還可以把語(yǔ)法高亮的功能提升到一個(gè)新的水平。

通過(guò)以下命令安裝此 preset

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

//Yarn命令
yarn add --dev @babel/preset-react

//pnum命令 
pnpm add --save-dev @babel/preset-react

并將 @babel/preset-react 添加到你的 Babel 配置文件中。

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>
  );
};

 了解更多關(guān)于 JSX 的信息。

類型注釋 (Flow 和 TypeScript)

Babel 可以刪除類型注釋！查看 Flow preset 或 TypeScript preset 了解如何使用。務(wù)必牢記 Babel 不做類型檢查，你仍然需要安裝 Flow 或 TypeScript 來(lái)執(zhí)行類型檢查的工作。

通過(guò)以下命令安裝 flow preset

//npm命令
npm install --save-dev @babel/preset-flow

//Yarn命令
yarn add --dev @babel/preset-flow

//pnpm命令
pnpm add --save-dev @babel/preset-flow

JavaScript：

// @flow
function square(n: number): number {
  return n * n;
}

或通過(guò)以下命令安裝 typescript preset

//npm命令
npm install --save-dev @babel/preset-typescript

//Yarn命令
yarn add --dev @babel/preset-typescript

//pnpm命令
pnpm add --save-dev @babel/preset-typescript

JavaScript：

function Greeter(greeting: string) {
  this.greeting = greeting;
}

了解更多關(guān)于 Flow 和 TypeScript 的信息

插件化

Babel 構(gòu)建在插件之上。使用現(xiàn)有的或者自己編寫的插件可以組成一個(gè)轉(zhuǎn)換管道。通過(guò)使用或創(chuàng)建一個(gè) preset 即可輕松使用一組插件。 了解更多 →

利用 astexplorer.net 可以立即創(chuàng)建一個(gè)插件，或者使用 generator-babel-plugin 生成一個(gè)插件模板。

example-babel-plugin.js

// 一個(gè)插件就是一個(gè)函數(shù)
export default function({ types: t }) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name; // 反轉(zhuǎn)字符串： JavaScript -> tpircSavaJ
        path.node.name = [...name]
          .reverse()
          .join("");
      },
    },
  };
}

可調(diào)試

由于 Babel 支持 Source map，因此你可以輕松調(diào)試編譯后的代碼。

符合規(guī)范

Babel 盡最大可能遵循 ECMAScript 標(biāo)準(zhǔn)。不過(guò)，Babel 還提供了特定的選項(xiàng)來(lái)對(duì)標(biāo)準(zhǔn)和性能做權(quán)衡。

代碼緊湊

Babel 盡可能用最少的代碼并且不依賴太大量的運(yùn)行環(huán)境。

有些情況是很難達(dá)成的這一愿望的，因此 Babel 提供了 "assumptions" 選項(xiàng)，用以在符合規(guī)范、文件大小和編譯速度之間做折中。