當(dāng)前位置：首頁 > 科技 > 軟件

深入理解 Babel - 微內(nèi)核架構(gòu)與 ECMAScript 標(biāo)準(zhǔn)化

來源：責(zé)編：時間：2024-09-10 09:51:09 104觀看

導(dǎo)讀隨著瀏覽器版本的持續(xù)更新，瀏覽器對JavaScript的支持越來越強大，Babel的重要性顯得較低了。但Babel的設(shè)計思路、背后依賴的ECMAScript標(biāo)準(zhǔn)化思想仍然值得借鑒。本文涉及的Babel版本主要是V7.16及以下，截至發(fā)文時，Babel最

隨著瀏覽器版本的持續(xù)更新，瀏覽器對JavaScript的支持越來越強大，Babel的重要性顯得較低了。但Babel的設(shè)計思路、背后依賴的ECMAScript標(biāo)準(zhǔn)化思想仍然值得借鑒。

本文涉及的Babel版本主要是V7.16及以下，截至發(fā)文時，Babel最新發(fā)布的版本是V7.25.6，未出現(xiàn)大版本更新，近2年也進(jìn)入了穩(wěn)定迭代期，本文的分析思路基本適用目前的Babel設(shè)計。

一、Babel簡介

Babel是什么

Babel是JavaScript轉(zhuǎn)譯器，通過Babel，開發(fā)者可以自由使用下一代ECMAScript 語法。高版本ECMAScript語法將被轉(zhuǎn)譯為低版本語法，以便順利運行在各類環(huán)境，如低版本瀏覽器、低版本 Node.js 等。

Babel 是轉(zhuǎn)譯器，不是編譯器。下面是轉(zhuǎn)譯和編譯的區(qū)別:

編譯，一般指將一種語言轉(zhuǎn)換為另一種語法和抽象程度等都不同的語言，常見的比如 gcc 編譯器。

轉(zhuǎn)譯，一般指將一種語言轉(zhuǎn)換為不同版本或者抽象程度相同的語言，比如 Babel 可以把 ECMAScript 6 語法轉(zhuǎn)譯為 ECMAScript 5語法。

利用 Babel，開發(fā)者可以使用 ECMAScript 的各種新特性進(jìn)行開發(fā)，同時花極少的精力關(guān)注瀏覽器或其他JS運行環(huán)境對新特性的支持。甚至，開發(fā)者可以根據(jù)自身需要，創(chuàng)造屬于自己的 JavaScript 語法。

Babel在轉(zhuǎn)譯的時候，會對源碼進(jìn)行以下處理: 語法轉(zhuǎn)譯(Syntax)和添加API Polyfill。

圖片

語法(Syntax)部分Babel 支持識別高版本語法，并通過插件將源碼從高版本語法轉(zhuǎn)譯為低版本語法，如:

箭頭函數(shù) () => {} 轉(zhuǎn)為普通函數(shù) function() {}。

const / let 轉(zhuǎn)譯為var

API Polyfill有些運行時相關(guān)的 API，語法轉(zhuǎn)譯無法解決它們對低版本瀏覽器等環(huán)境的兼容性問題，因此 Babel 通過與 core-js 等工具的配合，實現(xiàn) API 部分對目標(biāo)環(huán)境(通常是低版本瀏覽器等)的兼容。例如[1, 2, 3].include、Promise等 API，Babel 在處理時，如果目標(biāo)環(huán)節(jié)可能不支持原生的 include / Promise 的話，Babel 會在轉(zhuǎn)譯結(jié)果中嵌入 include / Promise 的自定義實現(xiàn)。有多種方式可以使用 Babel，如: 命令行(babel-cli、babel-node)、瀏覽器(babel-standalone)、API 調(diào)用(babel-core)、webpack loader(babel-loader)等。

轉(zhuǎn)譯過程

和多數(shù)轉(zhuǎn)譯器相同，Babel 運行的生命周期主要是 3 個階段: 解析、轉(zhuǎn)換、代碼生成。

這個過程涉及抽象語法樹:

抽象語法樹(Abstract Syntax Tree，AST)，或簡稱語法樹(Syntax tree)，是源代碼語法結(jié)構(gòu)的一種抽象表示。

AST 是樹形對象，以結(jié)構(gòu)化的形式表示編程語言的語法結(jié)構(gòu)，樹上的每個節(jié)點都表示源代碼中的一種結(jié)構(gòu)。

圖片

源碼字符串需要經(jīng)轉(zhuǎn)譯器生成 AST，轉(zhuǎn)譯器有很多種，不同轉(zhuǎn)譯器，生成的AST對象格式細(xì)節(jié)可能有差異，但共同點為: 都是樹形對象、該樹形對象描述了節(jié)點特征、各節(jié)點之間的關(guān)系（兄弟、父子等）。

以下是 Babel 生命周期的三個過程:

解析(Parsing): Code1 ==> 抽象語法樹1解析過程包括 2 個環(huán)節(jié): 詞法解析、語法解析，最終生成抽象語法樹。詞法解析階段，代碼字符串被解析為 token 令牌數(shù)組，數(shù)組項是一個對象，包括: 代碼字符碎片的值、位置、類型等信息。token 數(shù)組是平鋪式的數(shù)組，沒有嵌套的結(jié)構(gòu)信息，它是為語法解析階段做準(zhǔn)備的。語法解析階段，token 令牌數(shù)組被解析為結(jié)構(gòu)化的抽放語法樹對象(AST)。babel-parser 完成該階段的主要功能。

圖片

轉(zhuǎn)換(Transformation): AST1 ==> AST2Babel 生成 AST 后，會對 AST 進(jìn)行遍歷，遍歷過程中，各類插件對原 AST 對象進(jìn)行增刪改查等操作，AST 結(jié)構(gòu)被修改。

圖片

代碼生成(Generation): AST2 ==> Code2Babel 將修改后的 AST 對象轉(zhuǎn)目標(biāo)代碼字符串。babel-generator 完成該階段的主要功能。

圖片

二、Babel微內(nèi)核架構(gòu)

微內(nèi)核架構(gòu)

Babel 采用微內(nèi)核架構(gòu)，其內(nèi)核保留核心功能，其余功能利用外部工具和插件機制實現(xiàn)，也體現(xiàn)了"開放-封閉"的設(shè)計原則。

圖片

除了微內(nèi)核設(shè)計架構(gòu)，Babel 的模塊設(shè)計也可以做如下分類:

圖片

轉(zhuǎn)譯模塊

轉(zhuǎn)譯模塊位于 Babel 微內(nèi)核架構(gòu)的"微內(nèi)核"部分，該部分主要負(fù)責(zé)代碼轉(zhuǎn)譯，也就是上面提到的"解析-轉(zhuǎn)換-代碼生成"過程。

該模塊主要包括: babel-parser、babel-traverse、babel-generator。

babel-parser負(fù)責(zé)將代碼字符串轉(zhuǎn)為 AST 對象。有 2 點值得一提:

babel-parser 本身并不會對 AST 做轉(zhuǎn)換操作，只是負(fù)責(zé)解析出 AST。AST 轉(zhuǎn)換部分交由各類 plugins 和 presets 處理。

babel-parser 內(nèi)置了對 ESNext/TypeScript/JSX/Flow 最新版本語法的支持，但很多默認(rèn)是不開啟的，目前沒有開放插件機制擴(kuò)展新語法。

babel-traverse在轉(zhuǎn)譯過程中，babel-traverse 負(fù)責(zé)遍歷 AST 節(jié)點，并根據(jù)配置的 plugins/presets，在遍歷過程中，對各個 AST 節(jié)點進(jìn)行增刪改查的操作。AST 是一個樹形對象，遍歷 AST 對象的過程也是一個深度優(yōu)先遍歷的過程。

babel-generator負(fù)責(zé)將 AST 節(jié)點，轉(zhuǎn)為代碼字符串，同時也可以生成 source-map。

插件模塊

插件模塊包括 plugins、presets。

plugins豐富的插件，幫助 Babel 成為一個非常成功的轉(zhuǎn)譯工具。對 AST 的遍歷、轉(zhuǎn)換是 Babel 轉(zhuǎn)譯的核心功能，但 Babel 本身并不參與該過程，將這些功能作為插件引入到運行時。具體來說，babel-core 作為核心工具，不提供對 AST 的修改邏輯，通過調(diào)用各類插件，實現(xiàn)對 AST 的修改。Babel的插件分為語法插件和轉(zhuǎn)換插件。

語法插件

值得注意的是，babel-parser 負(fù)責(zé)將 JavaScript 代碼解析出抽象語法樹(AST)，它支持全面識別 ESNext/TypeScript/JSX/Flow 等語法，目前由 Babel 團(tuán)隊開發(fā)維護(hù)，不支持插件化。

Babel 插件生態(tài)中的語法插件，其功能就是作為"開關(guān)"，配置是否開啟 babel-parser 的某些語法轉(zhuǎn)譯功能。

語法插件在 Babel 源碼中，以 babel-plugin-syntax 開頭。

舉個例子:

babel-plugin-syntax-decorators負(fù)責(zé)開啟 babel-parser 對裝飾器的語法支持。

babel-plugin-syntax-dynamic-import負(fù)責(zé)開啟 babel-parser 對 import 語句的語法支持。

babel-plugin-syntax-jsx負(fù)責(zé)開啟 babel-parser 對 jsx 語法的支持。

轉(zhuǎn)換插件轉(zhuǎn)換插件就是社區(qū)里常說的 Babel 插件，負(fù)責(zé)轉(zhuǎn)換 AST 節(jié)點。在介紹babel-traverse時提到，它負(fù)責(zé)遍歷AST對象，每個AST節(jié)點會被訪問到，等待轉(zhuǎn)換，轉(zhuǎn)換的部分，由"轉(zhuǎn)換插件"負(fù)責(zé)。轉(zhuǎn)換插件會提供一個叫做"Visitor"的對象，該對象的 Key 為節(jié)點名稱，Value 部分提供進(jìn)入該節(jié)點時、離開該節(jié)點時的回調(diào)函數(shù)，在回調(diào)函數(shù)里，可以對該節(jié)點進(jìn)行一系列操作。"Visitor" 又稱為 "訪問者"。

// plugin 提供 visitor，在 visitor 中對 AST 節(jié)點操作const visitor = {    Program: {        enter() {},        exit() {},    },    CallExpression: {        enter() {},        exit() {},    },    NumberLiteral: {        enter() {},        exit() {},    }};traverse(ast, visitor);

轉(zhuǎn)換插件在Babel源碼中，以 babel-plugin-transform 開頭。

舉個例子:

babel-plugin-transform-strict-mode

該插件攔截 Program 節(jié)點，也就是整個程序的根節(jié)點，添加 "use strict"指令。

visitor 節(jié)點值為函數(shù)時，是 enter 回調(diào)的快捷方式。

{    name: "transform-strict-mode",    visitor: {      Program(path) {        const { node } = path;        for (const directive of node.directives) {          if (directive.value.value === "use strict") return;        }        path.unshiftContainer(          "directives",          t.directive(t.directiveLiteral("use strict")),        );      },    },  };}

babel-plugin-transform-object-assign

該插件負(fù)責(zé)攔截函數(shù)調(diào)用表達(dá)式節(jié)點 CallExpression，將 Object.assign 轉(zhuǎn)為 extends 寫法。

{    name: "transform-object-assign",    visitor: {      CallExpression(path, file) {        if (path.get("callee").matchesPattern("Object.assign")) {          path.node.callee = file.addHelper("extends");        }      },    },}

PresetsBabel 插件的功能是細(xì)粒度的，大部分插件承擔(dān)了單一功能。而在實際開發(fā)過程中，往往需要支持對各類語法的支持。此時，有兩種做法:

需要支持哪些特性，就分別引入支持該特性的插件

直接引入一個插件集合，涵蓋所需的各類插件功能

很顯然，第一種做法是相對麻煩的。針對第二種做法，Babel提供了插件集 preset。

preset 在 Babel 源碼中，以 babel-preset 開頭。

例如，Babel 已經(jīng)提供了幾種常用的 preset 供開發(fā)者使用:

babel-preset-env

babel-preset-react

babel-preset-flow

babel-preset-typescript

插件運行順序Babel 配置項中，plugins 和 presets 均以數(shù)組的形式配置，執(zhí)行時有先后順序。

plugins 在 presets之前運行

plugins 按照數(shù)組正序執(zhí)行

presets 按照數(shù)組倒序執(zhí)行

圖片

工具模塊

工具模塊提供 Babel 相關(guān)模塊所需的各類工具，以下一一簡要介紹:

babel-corebabel-core 對外提供了 Babel 多項功能的 API，如轉(zhuǎn)譯文件、轉(zhuǎn)譯代碼、創(chuàng)建/獲取配置等，在 Babel 官方文檔介紹的比較詳細(xì)，不再贅述。值得注意的是，轉(zhuǎn)譯類的 API 均提供了同步和異步版本，如 transformSync/transfomAsync、parseSync/parseAsync。

babel-cliBabel 的命令行工具，可以直接轉(zhuǎn)譯文件夾/文件，它也提供了很多配置項做其他工作，官方文檔介紹的比較詳細(xì)，感興趣的同學(xué)可以去 Babel 官網(wǎng)查看詳細(xì)配置。

babel-standaloneBabel 對外服務(wù)的很多包是基于 node 環(huán)境下使用的，babel-standalone 提供了瀏覽器下轉(zhuǎn)譯的方案。babel-standalone 內(nèi)置了所有 Babel 插件，所以體積還是比較大的，而且在瀏覽器端轉(zhuǎn)譯需要時間，比較適合開發(fā)、學(xué)習(xí)使用，不適合在生產(chǎn)環(huán)境使用。舉個例子:

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>test babel-standalone</title>    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>    <script type="text/babel">      const arr = [1, 2, 3];      console.log(...arr);</script>  </head>  <body></body></html>

在瀏覽器運行該 html，可以看到，頁面結(jié)構(gòu)變成了:

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>test babel-standalone</title>    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>    <script type="text/babel">      const arr = [1, 2, 3];      console.log(...arr);</script>    <script>      "use strict";      var _console;      var arr = [1, 2, 3];      (_console = console).log.apply(_console, arr); //# sourceMappingURL=data:application/json;charset=utf-8;base64...</script>  </head>  <body></body></html>

babel-node

提供在命令行執(zhí)行高級語法的環(huán)境。

例如:

// index.js 里可以使用高級語法     babel-node -e index.js

index.js 文件以及被其引入的其他文件均可以使用高級語法了。和 babel-cli 不同的是，babel-cli 只負(fù)責(zé)轉(zhuǎn)換，不在 node 運行時執(zhí)行；babel-node 會在 node 運行時執(zhí)行轉(zhuǎn)換，不適合生產(chǎn)環(huán)境使用。

babel-register

在源文件中，引入babel-register，如 index.js:

index.js

require('babel-register');     require('./run');

run.js

import fs from 'fs';     console.log(fs);

執(zhí)行 node index 時，run.js 就不需要被轉(zhuǎn)碼了。

babel-register 通過攔截 node require 方法，為 node 運行時引入了 Babel 的轉(zhuǎn)譯能力。

babel-loader

babel-loader 是利用 babel-core 的 API 封裝的 webpack loader，用于 webpack 構(gòu)建過程。

babel-types

babel-types 是一個非常強大的工具集合，它集成了節(jié)點校驗、增刪改查等功能，是 Babel 核心模塊開發(fā)、插件開發(fā)等場景下不可或缺的工具。

例如:

const t = require('@babel/types');const binaryExpression = t.binaryExpression('+', t.numericLiteral(1), t.numericLiteral(2));

babel-template

模板引擎，負(fù)責(zé)將代碼字符串轉(zhuǎn)為 AST 節(jié)點對象。

import { smart as template } from '@babel/template';    import generate from '@babel/generator';    import * as t from '@babel/types';    const buildRequire = template(      var %%importName%% = require(%%source%%);    );    const ast = buildRequire({        importName: t.identifier('myModule'),        source: t.stringLiteral("my-module"),    });    const code = generate(ast).code    console.log(code)

運行結(jié)果:

var myModule = require("my-module");

babel-code-frame

負(fù)責(zé)打印出錯的代碼位置，例如:

const { codeFrameColumns } = require('@babel/code-frame');const testCode = `class Run {    constructor() {}}`;const location = {    start: {        line: 2,        column: 2,    }};const result = codeFrameColumns(testCode, location);console.log(result);

1 | class Run {> 2 |     constructor() {}    |  ^  3 | }  4 |

babel-highlight

向控制臺輸出有顏色的代碼片段。該工具可以識別 JavaScript 中的操作符號、標(biāo)識符、保留字等類型的詞法單元，并在終端環(huán)境下顯示不同的顏色。

運行時相關(guān)模塊

Babel 配合其插件可以對靜態(tài)代碼進(jìn)行轉(zhuǎn)譯，但有一些遺漏點:

對于運行時涉及的一些高版本 API，并沒有提供兼容目標(biāo)環(huán)境的 Polyfill。
轉(zhuǎn)譯產(chǎn)物代碼可能有些臃腫。

為此，運行時模塊(runtime)關(guān)注的是轉(zhuǎn)譯產(chǎn)物的運行時環(huán)境，對運行時提供 API polyfill、代碼優(yōu)化等，該模塊涉及幾個子包:

babel-preset-env
babel-plugin-transform-runtime
babel-runtime
babel-runtime-corejs2/3
core-js

接下來以案例解釋 runtime 模塊的作用。

源碼文件 index.js 的內(nèi)容:

const a = 1; // const 為語法部分class Base {} // class 為語法部分new Promise() // Promise 為 API 部分

這段源碼包含了語法和 API 部分:

const、class 為語法部分
Promise 為 API 部分

如果希望這段源碼轉(zhuǎn)為 ES5 版本，使構(gòu)建產(chǎn)物可以運行在不支持 ES6 和 Promise 的環(huán)境里，該怎么做呢？

用 babel 命令行執(zhí)行轉(zhuǎn)譯，其中源文件為 index.js，轉(zhuǎn)譯產(chǎn)物文件為 index-compiled.js。

npx babel index.js --out-file index-compiled.js

需要配置.babelrc 幫助 Babel 完成語法和 API 部分的轉(zhuǎn)譯:

.babelrc:

{    "presets": [        [             "@babel/preset-env"        ]    ],    "plugins": [        [            "@babel/plugin-transform-runtime",            {                "corejs": 3            }        ]    ]}

簡要解釋下該配置的原理:

babel-preset-env 可以完成語法部分轉(zhuǎn)譯，即 const 轉(zhuǎn)譯為var但構(gòu)建產(chǎn)物中，有些輔助代碼如 _classCallCheck 是以硬編碼的形式直接寫入轉(zhuǎn)譯產(chǎn)物的:

"use strict";    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }    var a = 1;    var Base = function Base() {        _classCallCheck(this, Base);    };    new Promise();

這樣的后果就是構(gòu)建產(chǎn)物比較臃腫。

babel-plugin-transform-runtime 可以將上述 _classCallCheck 置于通用包中，以引用的形式寫入轉(zhuǎn)譯產(chǎn)物:

"use strict";    var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");    var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));    var a = 1;    var Base = function Base() {        (0, _classCallCheck2["default"])(this, Base);    };    new Promise();

babel-plugin-transform-runtime 的配置參數(shù) corejs 用于轉(zhuǎn)譯 API 部分，如 Promsie

"use strict";    var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");    var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));    var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));    var a = 1;    var Base = function Base() {        (0, _classCallCheck2["default"])(this, Base);    };    new _promise"default";

Babel 轉(zhuǎn)譯過程的運行時優(yōu)化是一個繁瑣的過程，為此將單獨用一章講解運行時優(yōu)化，感興趣的同學(xué)可以直接閱讀 "Babel Runtime" 章節(jié)詳細(xì)了解。

三、標(biāo)準(zhǔn)化

Babel 生態(tài)涉及的一些標(biāo)準(zhǔn)化組織。無論是 JavaScript、HTML、DOM、URL 等領(lǐng)域，均需要統(tǒng)一的標(biāo)準(zhǔn)，才能在不同的運行環(huán)境下有統(tǒng)一的表現(xiàn)。Babel 轉(zhuǎn)譯也需要遵循這些標(biāo)準(zhǔn)，包括 ECMAScript、web標(biāo)準(zhǔn)等。

ECMAScript

JavaScript誕生

1995 年，JavaScript 的第一個版本發(fā)布。用時間線的方式描述 JavaScript 的誕生過程會更清晰:

圖片

ECMAScript發(fā)布

1996 年，微軟模仿 JavaScript 實現(xiàn)了 JScript 并內(nèi)置在 IE3.0，隨后，Netscape 公司著手推動 JavaScript 標(biāo)準(zhǔn)化。

這里涉及幾個組織:

Ecma International

Ecma International 是一家國際性會員制度的信息和電信標(biāo)準(zhǔn)組織。1994年之前，名為歐洲計算機制造商協(xié)會（European Computer Manufacturers Association）。因為計算機的國際化，組織的標(biāo)準(zhǔn)牽涉到很多其他國家，因此組織決定改名表明其國際性。

Ecma International 的任務(wù)包括與有關(guān)組織合作開發(fā)通信技術(shù)和消費電子標(biāo)準(zhǔn)、鼓勵準(zhǔn)確的標(biāo)準(zhǔn)落實、和標(biāo)準(zhǔn)文件與相關(guān)技術(shù)報告的出版。

Ecma International 負(fù)責(zé)多個國際標(biāo)準(zhǔn)的制定:

CD-ROM 格式（之后被國際標(biāo)準(zhǔn)化組織批準(zhǔn)為ISO 9660）
C# 語言規(guī)范
C++/CLI 語言規(guī)范
通用語言架構(gòu)（CLI）
Eiffel 語言
電子產(chǎn)品環(huán)境化設(shè)計要素
Universal 3D 標(biāo)準(zhǔn)
OOXML
Dart 語言規(guī)范
ECMAScript 語言規(guī)范（以 JavaScript 為基礎(chǔ)）ECMA-262其中就包括 JavaScript 標(biāo)準(zhǔn)語言規(guī)范 ECMAScript。cma International 擁有 ECMAScript 的商標(biāo)。

ECMA TC39

「TC39」全稱「Technical Committee 39」譯為「第 39 號技術(shù)委員會」，是 Ecma International 組織架構(gòu)中的一部分。

TC39 負(fù)責(zé)迭代和發(fā)展 ECMAScript，它的成員由各個主流瀏覽器廠商的代表組成，通常每年召開約 6 次會議來討論未決提案的進(jìn)展情況，會議的每一項決議必須得到大部分人的贊同，并且沒有人強烈反對才可以通過。

TC39 負(fù)責(zé):

維護(hù)和更新 ECMAScript 語言標(biāo)準(zhǔn)

識別、開發(fā)、維護(hù) ECMAScript 的擴(kuò)展功能庫

開發(fā)測試套件

為 ISO/IEC JTC 1 提供標(biāo)準(zhǔn)

評估和考慮新添加的標(biāo)準(zhǔn)

國際標(biāo)準(zhǔn)化組織（英語: International Organization for Standardization，簡稱: ISO）成立于 1947 年 2 月 23 日，制定全世界工商業(yè)國際標(biāo)準(zhǔn)的國際標(biāo)準(zhǔn)建立機構(gòu)。

ISO 的國際標(biāo)準(zhǔn)以數(shù)字表示，例如: "ISO 11180:1993" 的 "11180" 是標(biāo)準(zhǔn)號碼，而 "1993" 是出版年份。

ISO/IEC JTC 1 是國際標(biāo)準(zhǔn)化組織和國際電工委員會聯(lián)合技術(shù)委員會。其目的是開發(fā)、維護(hù)和促進(jìn)信息技術(shù)以及信息和通信技術(shù)領(lǐng)域的標(biāo)準(zhǔn)。JTC 1 負(fù)責(zé)了許多關(guān)鍵的 IT 標(biāo)準(zhǔn)，從 MPEG 視頻格式到 C++ 編程語言。

圖片

ECMAScript 發(fā)展過程中的關(guān)鍵節(jié)點

圖片

ECMAScript 各版本

ECMAScript 經(jīng)歷了多個版本，每個版本有自己的特點，簡單列舉如下:

圖片

ECMAScript 迭代過程

一個 ECMAScript 標(biāo)準(zhǔn)的制作過程，包含了 Stage 0 到 Stage 4 共 5 個階段，每個階段提交至下一階段都需要 TC39 審批通過。

圖片

特性進(jìn)入 Stage-4 后，才有可能被加入標(biāo)準(zhǔn)中，還需要 ECMA General Assembly 表決通過才能進(jìn)入下一次的 ECMAScript 標(biāo)準(zhǔn)中。

如何閱讀 ECMAScript

ECMAScript 文檔結(jié)構(gòu)

ECMAScript 的規(guī)格，可以在 ECMA 國際標(biāo)準(zhǔn)組織的官方網(wǎng)站免費下載和在線閱讀。

查看ECMAScript 不同版本的地址：https://ecma-international.org/publications-and-standards/standards/ecma-262/。

截至 2023年底，已發(fā)布的版本如下：

ECMA-262 5.1 edition, June 2011

（https://262.ecma-international.org/5.1/index.html）

ECMA-262, 6th edition, June 2015

（https://262.ecma-international.org/6.0/index.html）

ECMA-262, 7th edition, June 2016

（https://262.ecma-international.org/7.0/index.html）

ECMA-262, 8th edition, June 2017

（https://262.ecma-international.org/8.0/index.html）

ECMA-262, 9th edition, June 2018

（https://262.ecma-international.org/9.0/index.html）

ECMA-262, 10th edition, June 2019

（https://262.ecma-international.org/10.0/index.html）

ECMA-262, 11th edition, June 2020

（https://262.ecma-international.org/11.0/index.html）

ECMA-262, 12th edition, June 2021

（https://262.ecma-international.org/12.0/index.html）

ECMA-262, 13th edition, June 2022

（https://262.ecma-international.org/13.0/index.html）

ECMA-262, 14th edition, June 2023

（https://262.ecma-international.org/14.0/index.html）

每個版本有獨立的網(wǎng)址，格式為: https://262.ecma-international.org/{version}/，比如 ECMAScript 14.0 版本的網(wǎng)址為 https://262.ecma-international.org/14.0/。

從章節(jié)數(shù)量上，ECMAScript 6.0、ECMAScript 7.0 有 26 章，之后的版本有 27-29 章，雖然章節(jié)數(shù)量不同，規(guī)格章節(jié)的分布是保持一定規(guī)律的，以 ECMAScript 11.0 版本為例:

Introduction: 介紹部分

該章節(jié)簡要描述了: JavaScript 和 ECMAScript 的發(fā)展歷史、不同 ECMAScript 規(guī)格的主要更新內(nèi)容。

第 1 章到第 3 章: 描述了規(guī)格文件本身，而非語言

第 1 章用一句話描述了該規(guī)格的描述范圍。

第 2 章描述了基于規(guī)格的"實現(xiàn)"的一致性要求:

"實現(xiàn)"必須支持規(guī)格中描述的所有類型、值、對象、屬性、函數(shù)以及程序的語法和語義

"實現(xiàn)"必須按照 Unicode 標(biāo)準(zhǔn)和 ISO/IEC 10646 的最新版本處理文本輸入

"實現(xiàn)"如果提供了應(yīng)用程序編程接口（API），那么該 API 需要適應(yīng)不同的人文語言和國家差異，且必須實現(xiàn)最新版本的 ECMA-402 所定義的與本規(guī)范相兼容的接口

"實現(xiàn)"可以支持該規(guī)格中沒有提及的類型、值、對象、屬性、函數(shù)、正則表達(dá)式語法以及其他編程寫法

"實現(xiàn)"不能實現(xiàn)該規(guī)格中禁止的寫法

第 3 章描述了該規(guī)格的一些參考資料:
ISO/IEC 10646
ECMA-402
EMCA-404 JSON 數(shù)據(jù)交換格式規(guī)范
第 4 章: 對這門語言總體設(shè)計的描述。
第 5 章到第 8 章: 語言宏觀層面的描述。
第 6 章介紹數(shù)據(jù)類型。
第 7 章介紹語言內(nèi)部用到的抽象操作。
第 8 章介紹代碼如何運行。
第 9 章到第 27 章: 介紹具體的語法。

一般而言，除非寫編譯器，開發(fā)者無需閱讀 ECMAScript 的規(guī)格，規(guī)格的內(nèi)容非常多，如無必要也無需通讀。只是在遇到一些奇怪的問題時，閱讀官方規(guī)格，是最穩(wěn)妥的辦法。

通過閱讀規(guī)格解決一些問題

（以ECMAScript 11.0為例）

識別關(guān)鍵詞和保留字，并高亮

Babel 工具集中的 babel-highlight，可以實現(xiàn)在終端對代碼塊中的目標(biāo)字符單元顯示不同的顏色。這里需要識別不同字符單元的類型，如關(guān)鍵字、保留字、標(biāo)識符、數(shù)字、字符串等。

標(biāo)識符、數(shù)字、字符串都很好理解和識別，但哪些字符應(yīng)該被識別為關(guān)鍵字、保留字，而不是標(biāo)識符呢？

此時可以閱讀 ECMAScript 規(guī)格了，ECMAScript 11.0 規(guī)格的 11.6.2 節(jié)介紹了關(guān)鍵詞和保留字列表。

關(guān)鍵詞（keywords）關(guān)鍵詞首先是標(biāo)識符，同時有語義，包括 if、while、async、await...，個別關(guān)鍵詞是可以用作變量名的。

保留字（reserved word）保留字首先是標(biāo)識符，但不能用作變量名。部分關(guān)鍵詞是保留字，但部分不是: if、while是保留字；await只有在 async方法和模塊中才是保留字；async不是保留字，它可以作為普通的變量名使用。

保留字列表

awaitbreakcasecatchclassconstcontinuedebuggerdefaultdeletedoelseenumexportextendsfalsefinallyforfunctionifimportininstanceofnewnullreturnsuperswitchthisthrowtruetrytypeofvarvoidwhilewithyield

讀完上述規(guī)格，也就知道哪些字符單元是需要識別為保留字與關(guān)鍵詞，并高亮的了。

識別全局對象，并高亮

繼續(xù)使用 babel-highlight 實現(xiàn)代碼塊中的全局對象高亮，那么，我們需要知道哪些是規(guī)格中描述的全局變量。

規(guī)格的 18 章介紹了全局對象，通過該章的描述，可以知道:

全局屬性全局屬性有: globalThis、Infinity、NaN、undefined。

全局方法

全局方法有: eval(x)、isFinite、isNaN、parseFloat、parseInt、decodeURIComponent、encodeURIComponent 等。

全局構(gòu)造函數(shù)

全局的構(gòu)造函數(shù)有:

ArrayArrayBufferBigIntBigInt64ArrayBigUnit64ArrayBooleanDataViewDateErrorEvalErrorFloat32ArrayFloat64ArrayFunctionInt8ArrayInt16ArrayInt32ArrayMapNumberObjectPromiseProxyRangeErrorReferenceErrorRegExpSetSharedArrayBufferStringSymbolSyntaxErrorTypeErrorUint8ArrayUint8ClampedArrayUint16ArrayUint32ArrayURIErrorWeakMapWeakSet

其他的全局屬性Atomics、JSON、Math、Reflect。很顯然，當(dāng)字符單元的名稱是上述名稱中的一員時，我們可以對其進(jìn)行高亮處理了（若上下文中無重新定義的同名變量）。

自定義 Error

babel-loader 自身維護(hù)了私有的 LoaderError 對象，該對象繼承自原生 Error 類，并且訂制了部分實例屬性。代碼如下:

class LoaderError extends Error {    constructor(err) {        super();        const { name, message, codeFrame, hideStack } = format(err);        this.name = "BabelLoaderError";        this.message = ${name ? ${name}: ` : ""}${message}/n/n${codeFrame}/n`;        this.hideStack = hideStack;        Error.captureStackTrace(this, this.constructor);    }}

可以看到，babel-loader 自定義了錯誤實例的 name、message、hideStack 屬性，那么，問題是，原生的 Error 類有哪些屬性和方法，哪些是開發(fā)者可以自定義的呢？

規(guī)格的 19.5 章節(jié)，詳細(xì)介紹了 Error 的各類規(guī)范:

Error 作為函數(shù)被調(diào)用時（Error(...)），表現(xiàn)和 new Error(...) 一致，均會創(chuàng)建并返回 Error 的新實例

Error 可以被繼承，比如通過 extends 的方式，子類必須提供 constructor 方法，且該方法內(nèi)必須提供 super() 調(diào)用

Error 構(gòu)造函數(shù)必須有 prototype 屬性

Error.prototype 屬性需有以下屬性：

Error.prototype.constructor: 指向構(gòu)造函數(shù)

Error.prototype.message: 描述錯誤信息，默認(rèn)是空字符串

Error.prototype.name: 描述錯誤名稱，默認(rèn)值是 Error

從 LoaderError 的源碼可以看到，LoaderError 做了以下幾件事情:

LoaderError 繼承自 Error
實例自定義了 name、message 屬性，明確 babel-loader 的信息
實例自定義的 hideStack 屬性是非標(biāo)準(zhǔn)屬性，用于 babel-loader 內(nèi)部

web標(biāo)準(zhǔn)

是在解決 API Polyfil 的時候，Babel 配合使用的 core-js 除了提供 ECMAScript 標(biāo)準(zhǔn)下的 JavaScript API 實現(xiàn)，也提供了 DOM/URL 等實現(xiàn)。而 DOM/URL 所屬的 web 標(biāo)準(zhǔn)，由 W3C/WHATWG 制定。

圖片

經(jīng)過多年發(fā)展，WHATWG 和 W3C 目前是合作關(guān)系，其中，WHATWG 維護(hù) HTML 和 DOM 標(biāo)準(zhǔn)，W3C 使用 WHATWG 存儲庫中的 HTML 和 DOM 標(biāo)準(zhǔn)描述，W3C 在 HTML 部分的工作集中在 XHTML/XML 上。

圖片

四、總結(jié)

本文介紹了 Babel 的概述/微內(nèi)核架構(gòu)/ECMAScript標(biāo)準(zhǔn)化方面的設(shè)計思想和部分實現(xiàn)原理。

上述內(nèi)容其實在很早之前就已經(jīng)成型了，筆者也查看了Babel最近的迭代內(nèi)容，發(fā)現(xiàn)并沒有太大的變化。至于代碼轉(zhuǎn)譯領(lǐng)域，目前是Babel還是其他工具哪個更有優(yōu)勢，不在本文的討論范圍內(nèi)。除了比較社區(qū)哪些工具更好而言，“Babel的設(shè)計思路、其與標(biāo)準(zhǔn)規(guī)范是怎么配合的”等也是很值得學(xué)習(xí)的地方，也是這篇文章的產(chǎn)生背景。

本文鏈接：http://www.tebozhan.com/showinfo-26-112790-0.html深入理解 Babel - 微內(nèi)核架構(gòu)與 ECMAScript 標(biāo)準(zhǔn)化

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： DevOps流程最全詳解(7大流程步驟圖解)

下一篇：記一次線程池使用不當(dāng)觸發(fā)死鎖導(dǎo)致RocketMQ消費停滯

標(biāo)簽：

熱門焦點

官方承諾：K60至尊版將會首批升級MIUI 15

全新的MIUI 15今天也有了消息，在官宣了K60至尊版將會搭載天璣9200+處理器和獨顯芯片X7的同時，Redmi給出了官方承諾，K60至尊重大更新首批升級，會首批推送MIUI 15。也就是說雖然
Flowable工作流引擎的科普與實踐

一.引言當(dāng)我們在日常工作和業(yè)務(wù)中需要進(jìn)行各種審批流程時，可能會面臨一系列技術(shù)和業(yè)務(wù)上的挑戰(zhàn)。手動處理這些審批流程可能會導(dǎo)致開發(fā)成本的增加以及業(yè)務(wù)復(fù)雜度的上升。在這
小紅書1周漲粉49W+，我總結(jié)了小白可以用的N條漲粉筆記

作者：黃河懂運營一條性教育視頻，被54萬人“珍藏”是什么體驗？最近，情感博主@公主是用鮮花做的，火了！僅僅憑借一條視頻，光小紅書就有超過128萬人，為她瘋狂點贊！更瘋狂的是，這
本地生活這塊肥肉，拼多多也想吃一口

出品/壹覽商業(yè) 作者/李彥編輯/木魚拼多多也看上本地生活這塊蛋糕了。近期，拼多多在App首頁“充值中心”入口上線了本機生活界面。壹覽商業(yè)發(fā)現(xiàn)，該界面目前主要
信通院：小米、華為等11家應(yīng)用商店基本完成APP簽名及驗簽工作

中國信通院表示，目前，小米、華為、OPPO、vivo、360手機助手、百度手機助手、應(yīng)用寶、豌豆莢和努比亞等9家應(yīng)用商店，以及抖音和快手2家新型應(yīng)用分發(fā)平
華為Mate 60保護(hù)殼曝光：碩大后置相機模組凸起程度有驚喜

這段時間以來，關(guān)于華為新旗艦的爆料日漸密集。據(jù)此前多方爆料，今年華為將開始恢復(fù)一年雙旗艦戰(zhàn)略，除上半年推出的P60系列外，往年下半年的Mate系列也將
三星推出Galaxy Tab S9系列平板電腦以及Galaxy Watch6系列智能手表

2023年7月26日，三星電子正式發(fā)布了Galaxy Z Flip5與Galaxy Z Fold5。除此之外，Galaxy Tab S9系列平板電腦以及三星Galaxy Watch6系列智能手表也同期
聯(lián)想小新Pad Pro 12.6將要推出，搭載高通驍龍 870 處理器

聯(lián)想小新Pad Pro 12.6將于秋季新品會上推出，官方按照慣例直接在發(fā)布會前給出了機型的所有參數(shù)。聯(lián)想小新 Pad Pro 12.6 將搭載高通驍龍 870 處理器，重量為 5
外交部：美方應(yīng)停止在網(wǎng)絡(luò)安全問題上不負(fù)責(zé)任地指責(zé)他國

　中國外交部今天（16日）舉行例行記者會。會上，有記者問，美國情報官員稱，他們正在阻攔來自中國以及其他國家的黑客獲取相關(guān)科研成果。中方對此有何評論？對此

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

深入理解 Babel - 微內(nèi)核架構(gòu)與 ECMAScript 標(biāo)準(zhǔn)化

一、Babel簡介

Babel是什么

轉(zhuǎn)譯過程

二、Babel微內(nèi)核架構(gòu)

微內(nèi)核架構(gòu)

轉(zhuǎn)譯模塊

插件模塊

工具模塊

運行時相關(guān)模塊

三、標(biāo)準(zhǔn)化

ECMAScript

JavaScript誕生

ECMAScript發(fā)布

ECMAScript 各版本

ECMAScript 迭代過程

如何閱讀 ECMAScript

ECMAScript 文檔結(jié)構(gòu)

web標(biāo)準(zhǔn)

四、總結(jié)

官方承諾：K60至尊版將會首批升級MIUI 15

Flowable工作流引擎的科普與實踐

小紅書1周漲粉49W+，我總結(jié)了小白可以用的N條漲粉筆記

本地生活這塊肥肉，拼多多也想吃一口

信通院：小米、華為等11家應(yīng)用商店基本完成APP簽名及驗簽工作

華為Mate 60保護(hù)殼曝光：碩大后置相機模組凸起程度有驚喜

三星推出Galaxy Tab S9系列平板電腦以及Galaxy Watch6系列智能手表

聯(lián)想小新Pad Pro 12.6將要推出，搭載高通驍龍 870 處理器

外交部：美方應(yīng)停止在網(wǎng)絡(luò)安全問題上不負(fù)責(zé)任地指責(zé)他國

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊