ホームページ > 記事 > ウェブフロントエンド > シンプルで明確な JS 抽象構文ツリー

シンプルで明確な JS 抽象構文ツリー

小云云オリジナル: 2018-01-29 13:49:072265ブラウズ

この記事では、主にシンプルで明確な JS 抽象構文ツリーについて説明します。まず、抽象構文ツリーとは何かを紹介します。

Babel は現在ほぼすべてのプロジェクトに必須ですが、その動作原理では生成プロセスで js の解析を避けることができず、プロジェクト acron は初期にフォークされました。これを理解する前に見てみましょう。このエンジンが何を解析するかを見てください。 BabelだけでなくwebpackもJavaScriptパーサーを使ってコードを抽象構文ツリーに変換します。このツリーを操作することで、代入文、宣言文、演算文を正確に見つけることができます

抽象とは何ですか。構文ツリー

簡単な例を見てみましょう:

var a = 1;
var b = a + 1;

私たちはこの Web サイトを使用しています。これは非常に使いやすい Esprima エンジン Web サイトです。フローチャートは次のように描かれています:

シンプルで明確な JS 抽象構文ツリー

そして、彼はjson オブジェクトの形式は次のとおりです:

{
    "type": "Program",
    "body": [
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "a"
                    },
                    "init": {
                        "type": "Literal",
                        "value": 1,
                        "raw": "1"
                    }
                }
            ],
            "kind": "var"
        },
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "b"
                    },
                    "init": {
                        "type": "BinaryExpression",
                        "operator": "+",
                        "left": {
                            "type": "Identifier",
                            "name": "a"
                        },
                        "right": {
                            "type": "Literal",
                            "value": 1,
                            "raw": "1"
                        }
                    }
                }
            ],
            "kind": "var"
        }
    ],
    "sourceType": "script"
}

多くのエンジン

chrome には v8、firefix には Spidermonkey があり、よく使用されるエンジンもいくつかあります:

esprima
acron
Traceur
。
UglifyJS2
shift

以下は、いくつかのエンジンの速度比較と、異なるフレームワークを使用したエンジンの読み込み速度です:

シンプルで明確な JS 抽象構文ツリー

私個人的には、カプセル化が完璧であればあるほど、解析時間は長くなるのではないかと考えています。このエンジンの中では、babel エンジンの前身もこのプロジェクトのフォークです。

ASTの3つの軸

esprimaを介してASTを生成する
estraverseを介してASTをトラバースして更新する
escodegenを介してASTをソースコードに再生成する

簡単な例を実行できます:

1.まず、テストプロジェクトディレクトリを作成します

2. テストプロジェクトの下に esprima、estraverse、および escodegen の npm モジュールをインストールします

npm i esprima estraverse escodegen --save

3. ディレクトリの下に新しい test.js ファイルを作成し、次のコードを読み込みます:

const esprima = require('esprima');
let code = 'const a = 1';
const ast = esprima.parseScript(code);
console.log(ast);

出力結果が表示されます:

Script {
  type: 'Program',
  body:
   [ VariableDeclaration {
       type: 'VariableDeclaration',
       declarations: [Array],
       kind: 'const' } ],
  sourceType: 'script' }

4. 次に、テストファイルに次のコードを読み込みます:

const estraverse = require('estraverse');

estraverse.traverse(ast, {
    enter: function (node) {
        node.kind = "var";
    }
});

console.log(ast);

出力結果:

Script {
  type: 'Program',
  body:
   [ VariableDeclaration {
       type: 'VariableDeclaration',
       declarations: [Array],
       kind: 'var' } ],
  sourceType: 'script' }

5. 最後に、テストファイルに次のコードを追加します。出力結果:

const escodegen = require("escodegen");
const transformCode = escodegen.generate(ast)

console.log(transformCode);

これらの3つの軸を通して:

const a = 1转化成了var a = 1
Babel 0.0の気分はありますか

おすすめサイト

esprimaソースコード

acronソースコード

速度比較

AST Explorer
esprima可視化
AST のオンライン視覚化

概要

抽象ツリーは、Webpack であろうと Babel であろうと、現在フロントエンドでよく使用されます。ここでは一般的なプロセスを説明します。しばらくしてから、抽象ツリーの構文に関する記事を公開します。興味があれば、esprima のソースコードも参照してください。なぜなら、acron は esprima の方が詳しいからです。比較的軽量。興味があれば、私の [github]() をフォローして、作者へのサポートとして星をクリックしてください。ありがとうございます。

シンプルで明確な JS 抽象構文ツリー

抽象とは何ですか。構文ツリー

多くのエンジン

acronソースコード

関連記事