7月26日、JavaScriptのトランスパイラであるBabelのバージョン7.15.0 がリリースされた。
7.15.0 Released: Hack-style pipelines, TypeScript const enums and Rhino target support
今回のリリースでは、以下などの変更が含まれる
- top-level awaitとergonomic brand checks for private fieldsの構文解析
- Hack-styleパイプラインオペレーターをサポート
- TypeScriptのサポート改善
- 新しいコンパイラ仮定であるnoIncompleteNsImportDetectionの導入
- コンパイルターゲットとしてRhinoを指定可能に
ECMAScriptの機能をデフォルトでサポート
top-level awaitとergonomic brand checks for private fieldsのプロポーザルがステージ4になった。
Babelはそれらをデフォルトでサポートしているため、以下のプラグインを設定から削除することができる。
- @babel/plugin-syntax-top-level-await
- @babel/plugin-syntax-private-property-in-object
- @babel/plugin-proposal-private-property-in-object
ただし、現在はtop-level awaitを解析することしかできず、変換することはできない。
TypeScriptのサポート改善
TypeScriptの2つの機能、const enumと名前空間のエイリアス(import Alias = Namespace)を追加した。
以前は、const enum を使用した場合、正しくコンパイルするために型情報を必要とするため、エラーが発生していた。
回避策として、babel-plugin-const-enum などのプラグインがあったが、Babel は enum をコンパイルする際に const 修飾子を無視するようになった。
これは --isolatedModules オプションを使用する際の TypeScript の動作と一致する。
TypeScript で生成されるデフォルトのコードに似た、より最適化された出力が必要な場合は、@babel/plugin-tranform-typescript または @babel/preset-typescript の optimizeConstEnums オプションを有効にすることができる。
// Input
const enum Animals { Dog }
console.log(Animals.Dog);
// Output (default)
var Animals;
(function (Animals) {
Animals[Animals["Dog"] = 0] = "Dog";
})(Animals || (Animals = {}));
console.log(Animals.Dog);
// Output with `optimizeConstEnums`
console.log(0);
Hack-styleパイプラインオペレーターのサポート
"Hack-style pipelines"は、"smart mix"に代わるパイプラインオペレータープロポーザルの新しいフレーバー。
// Input
"World"
|> `Hello, ${#}!`
|> alert(#);
// output
var _ref, _ref2;
_ref2 = (_ref = "World", `Hello, ${_ref}!`), alert(_ref2);
Hack-styleパイプラインでは、前のパイプラインステップの値を参照するために、常に「トピックトークン」(#など)を使用する必要がある。
@babel/plugin-proposal-pipeline-operator で proposal: "hack" オプションを有効にすることで、このプロポーザルをテストすることができる。
また、使用するトピックトークンを「#」と「%」から選択する必要がある。
// babel.config.json
{
"plugins": [
["@babel/plugin-proposal-pipeline-operator", {
"proposal": "hack",
"topicToken": "#"
}]
]
}