メインコンテンツにスキップ

@babel/plugin-transform-block-scoping

情報

このプラグインは@babel/preset-envに含まれています

例​

入力

JavaScript
{
  let a = 3;
}

let a = 3;

出力

JavaScript
{
  var _a = 3;
}

var a = 3;

定数チェック​

このプラグインは、すべてのconst変数も検証します。定数の再代入はランタイムエラーであり、それらのために必要なエラーコードが挿入されます。

インストール​

npm install --save-dev @babel/plugin-transform-block-scoping

使用法​

オプションなし

babel.config.json
{
  "plugins": ["@babel/plugin-transform-block-scoping"]
}

オプション付き

babel.config.json
{
  "plugins": [
    [
      "@babel/plugin-transform-block-scoping",
      {
        "throwIfClosureRequired": true
      }
    ]
  ]
}

CLI経由​

シェル
babel --plugins @babel/plugin-transform-block-scoping script.js

Node API経由​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-block-scoping"],
});

オプション​

throwIfClosureRequired​

boolean、デフォルトはfalseです。

以下のような場合、変換中に追加の関数とクロージャを追加せずにlet/constを書き換えることは不可能です

JavaScript
for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1);
}

非常にパフォーマンスが重要なコードでは、これは望ましくない場合があります。"throwIfClosureRequired": trueが設定されている場合、Babelは自動的に追加の関数を追加する代わりに、これらのパターンを変換するときにエラーをスローします。

tdz​

boolean、デフォルトはfalseです。

デフォルトでは、このプラグインはブロックスコープ変数の*一時的デッドゾーン（TDZ）*を無視します。次のコードは、**Babelでトランスパイルされた場合、エラーをスローしません。これは仕様に準拠していません**

JavaScript
i;
let i;

これらのエラーが必要な場合は、このプラグインに"tdz": trueを設定することで、Babelにそれらを検出させることができます。ただし、現在の実装はすべてのエッジケースを正しく処理できない可能性があり、そもそもこのようなコードを避けるのが最善です。

ヒント

プラグインオプションの設定の詳細については、こちらを参照してください