[訳]babelバージョン7.0機能更新

[訳]babelバージョン7.0機能更新
7.0リリース：エラーリカバリとType Script 3.7
2019年11月5日
今日はBabel 7.0を発表します.
このバージョンは、トップクラスのawait x(第3段階)とFlow enumステートメント(Flow の提案)などの新しいアナライザ機能を含む.今、@babel/parserはいくつかの文法的エラーから回復することを選択できます.
また、Type Script 3.7のサポートを追加しました.Babelは、タイプ注釈付きのプライベートフィールドを解析し、変換し、declareキーで定義されたパブリッククラスフィールド注釈、タイプ宣言関数署名、enum声明のテンプレートテキストを使用しています.
babelは現在、三箇新のプロファイルを受け入れています.babel.co.fig.json、babel.co.fig.cjsとbabelrc.cjs、それらの行為はbabel.co nfig.jsとbabelrc.jsファイルと同じです.
最後に、Babel 7.0使用メモリは7.6.0より20%少ないです.
GitHubにいますは変更ログ全体を読むことができる.
トップawait解析(＃1049)
トップクラスのawait proposalはモジュールの中でawait promiseを許可します.大きな非同期関数に包装されているようです.これは、例えば依存項を条件付きでロードするか、あるいはアプリケーション初期化を実行するために有用である.

// Dynamic dependency path
const strings = await import(`./i18n/${navigator.language}.mjs`);

// Resource initialization
const connection = await dbConnector();

@babel/parserはバージョン7.0.0からawaitに対応しています.このallowAwait OutsideFunctionオプションを通じて非同期機能以外の機能を使用します.
バージョン7.0は、新しいtopLevelAwait解析プラグインを導入しています.このプラグインにはいくつかの主要な違いがあります.

は、awaitによって提案された要求に従って、内部スクリプトを許可することなく、トップレベルの内部モジュールのみを許可する.同期スクリプトに基づくモジュールシステム(例えば、CommunJS)が非同期依存性をサポートできないために必要である.

を使用して、正しいsourceType時間sourceType: "unambiguous"を検出することができる.awaitは脚本において有効な識別子であるため、多くのあいまいな構成が実際には曖昧であるように見えるが、Babelはそれらをシナリオとして解析する.例えば、await -1は、waiting表現のwaiting -1、またはawaitとの間の差異1であってもよい.

@babel/parserが直接使用する場合、topLevel Awaitプラグインを有効にすることができます.

parser.parse(inputCode, {
  plugins: ["topLevelAwait"]
});

@babel/plugin-syntax-top-level-awaitパッケージも作成しました.Babel設定に追加できます.

// babel.config.js

module.exports = {
  plugins: [
    "@babel/plugin-syntax-top-level-await"
  ]
}

最上階ではawaitを使ってモジュールバンドルプログラム中のサポートと想定しています.Babel自体は変換されていません.まとめを使うとexperimentalTopLevel Awaitオプションが有効になります.webpack 5はexperiments.topLevel Awaitオプションがサポートされています.
これからバージョンを開始します.サポートすれば、@babel/preset-envを自動的に有効にします.
解像度エラーリカバリ(＃10633)
多くの他のJavaScript解析器のように、@babel/parserはいくつかの無効な文法に出会うたびに、エラーを引き起こします.このような行為はBabelにとって非常に効果的です.JavaScriptプログラムを別のプログラムに変換するには、まず入力が有効であることを確認しなければなりません.
Babelの流行に鑑みて、他の多くのツールが@babel/parserに依存しています.まずbabel-eslintとPretierです.この2つのツールに対して、最初のエラーが発生した時には使えない時もあります.
以下のコードを考慮して、繰り返します.プロト.属性、このコードは無効です.

let a = {
  __proto__: x,
  __proto__: y
}

let a = 2;

ESLintとPretierの現在の作業の流れは以下の通りです.

Pretierファイルをフォーマットできませんでした.

ESLINE報告Redefinition of __proto__ property解析器エラー

第二の__proto__属性

を削除します.

Pretierファイルをフォーマットできませんでした.

ESLINEレポートIdentifier 'a' has already been declaredエラー

第二のletキーワード

を削除します.

Pretierフォーマットファイルフォーマット

もっとこのようにすればいいですか?

Pretierフォーマットファイルフォーマット

ESLINEは2つのエラーを報告しました.Redefinition of __proto__ propertyと

です.

第二のIdentifier 'a' has already been declared属性と第二の__proto__キーワード

を削除します.
このバージョンでは、@babel/parser:errorRecoveryを追加します.trueに設定されている場合、生成されたASTは、@babel/parserのすべてが以下から回復できるエラーを含むerrors属性を持つ.

const input = `
let a = {
  __proto__: x,
  __proto__: y
}
  
let a = 2;
`;

parser.parse(input); // Throws "Redefinition of __proto__ property"

const ast = parser.parse(input, { errorRecovery: true });
ast.errors == [
  SyntaxError: "Redefinition of __proto__ property",
  SyntaxError: "Identifier 'a' has already been declared",
];

@babel/parserはまだ投げられます.すべてのエラーが今回復できるわけではないからです.これらの状況を改善し続けます.
新しいプロファイル拡張子(＃10501、＃10599)
Babel 6は1つのプロファイルしかサポートしていません.Babelrcの内容はJSON指定を使用しなければなりません.
Babel 7は.Babelrcesの意味を変えて、2つの新しい構成ファイルを紹介しました.babel.co.nfig.jsと.babelrc.jsです.JavaScriptを使って設定ファイルを追加しました.プラグイン/オプションを有効/無効にする時に自分の論理を定義することができます.
しかし、JSONファイルの大きな利点はキャッシュしやすいことです.二回の呼び出しでは、同じJavaScriptファイルは異なる値を生成することができますが、JSONファイルは常に同じオブジェクトに対して値を求めることができます.さらに、JSON構成は、関数またはJavaScriptオブジェクトのような陰的データまたは関係序列化JavaScript値を使用することができません.
Babelは、JavaScriptに基づく構成を使用する際にも変換をキャッシュするが、キャッシュがまだ有効であるかどうかを確認するために、configファイルを評価し、docs中キャッシュする必要がある.
これらの理由から、Babel 7.0は、新しいプロファイルのサポートを導入しています.Babel.co.nfig.jsonは、その行為は同じbabel.co.fig.jsと同じです.
また、2つの異なる構成ファイルのサポートを追加しました.Babel.co nfig.cjsと.babelrc.cjsでnodeの手動設定オプションを使う時は、package.jsonを使用しなければなりません.この「type」:「module」の違い以外に、彼らの行為はbabel.co.nfig.jsと全く同じです.babelrc.js.
Type Script 3.7(let、＃10533)
＃10455は、オプションのリンク、無効なマージ演算子、断言関数、タイプフィールド宣言、および多くの他のタイプに関連する機能をサポートする.
7.0.0からBabelのオプションチェーン(a?b)と無効結合(a?b)を両方サポートします.babel/plugin-proposal-optional-chainingと@babel/plugin-nullish-coalescing-operator
Babel 7.0では、現在、断言関数とdeclareクラスフィールドで使用できます.

function assertString(x): assert x is string {
  if (typeof x !== "string") throw new Error("It must be a string!");
}

class Developer extends Person {
  declare usingBabel: boolean;
}

重大な変更を避けるために、私達はdeclareをサポートするために、シンボルの背後にあるクラスのフィールドを紹介しました.「allowDeclare Fields」、双方は@babel/plugin-trans form-typescriptと@babel/prest-typescriptをサポートします.これはデフォルトの行動になりますので、設定を変更して使用することをお勧めします.

{
  "presets": [
    ["@babel/preset-typescript", {
      "allowDeclareFields": true
    }]
  ]
}

コンパイルされたJSX中をオブジェクトを使用して伝搬する(Type Script 3.7 RC)
JSX元素に伝播属性を使用すると、Babelはデフォルトで運転時のヘルププログラムを注入します.

// 

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

React.createElement("a", _extends({
  x: true
}, y));

2016年、ローカルES 6へのサポートが改善されるにつれて、私たちはuseBuitInsオプションを追加しました.@babel/plugin-transform-react-jsxこのオプションはコンパイル後の出力が直接Object.assignを使用して、余分なコードを削除することができます.

// 

React.createElement("a", Object.assign({
  x: true
}, y));

しかし、オブジェクトのローカルサポートを考慮して、より多くの最適化されたコードを生成することができます.

//
React.createElement("a", { x: true, ...y });

このuseSpreadオプションを使用または有効にしてもいいです.@babel/prest-react@babel//plugin-tranform-react-jsx

{
  presets: [
    ["@babel/react", { useSpread: true }]
  ]
}

メモリ使用率の改善(＃10532)
最初から、私たちはずっと頑張って(＃10480、＃433、＃3475など)性能を向上させます.Babel 7.0現在使用されているメモリは20%減少しています.7.6.0に比べて、大型ファイルの変換速度は8%アップしました.
これらの結果を得るために、生存期間NodePathオブジェクト(各ASTノードをラッピングするための)で達成された異なる動作を最適化した.

今は、それらが必要とされるまで、いくつかの少ないオブジェクト属性を初期化することを避けます.これにより、ほぼすべてのASTノードにリソースを割り当てることができます.

は、一般的ではない属性をbookeepingで置き換えることによって、@babel/traverseは、更新をスキップすることができ、私たちは、個々のノードにアクセスするたびに作業量を削減する.

は、ノード遍歴(すなわち、スキップ、停止または削除)の状態を表すいくつかのブール属性圧縮＃7028を通じてメモリ使用を最適化する.

これらのすべての改良は、変換性能とメモリ使用において以下の違いがある:
上のグラフの所定の配列内も検出できます.このテーマに関する情報をもっと知りたいなら、元のデータを読んで、これらの改善のための彼の変更についてjiàngを読むことができます.