Babel 7 へのアップグレード (API)

Babel 7 へアップグレードする際に、このドキュメントを参照するようにユーザーに指示してください。

その他のユーザーレベルの変更については、v7 マイグレーションガイドもご確認ください。

すべての Babel パッケージ

NodeJS のサポート

Node.js 0.10 および 0.12 は、両バージョンともメンテナンスが終了しているため、サポートが打ち切られました。

エクスポートの変更

Babel パッケージでの add-module-exports プラグインの使用を中止しました。これは以前、エクスポートの破壊的変更を防ぐために使用する必要がありました。ライブラリで Babel パッケージをインポートする場合は、import ではなく require を使用するときに .default を使用する必要がある場合があります。

`@babel/core`

パフォーマンス上の理由から (ほとんどのツールは使用していないため)、ast をデフォルトで false に変更しました babel/babel#7436。

公開されていたがドキュメント化されていなかった Pipeline クラスを削除しました。 @babel/core から公開されている変換メソッドを直接使用するのが最善です babel/babel#5376。

babel.util.* ヘルパーメソッドが削除され、util.EXTENSIONS が babel.DEFAULT_EXTENSIONS に移動しました babel/babel#5487。

ファイルが ignore パターンに一致した場合、または only パターンに一致しなかった場合、babel.transform またはその他の変換関数への呼び出しは null を返す場合があります babel/babel#5487。

state.file.opts で公開されていた opts.basename オプションが削除されました。必要な場合は、opts.filename から自分でビルドするのが最善です babel/babel#5467。

resolveModuleSource を削除しました。babel-plugin-module-resolver@3 の 'resolvePath' オプションを使用することをお勧めします babel/babel#6343。

babel.analyse は babel.transform のエイリアスにすぎなかったため、削除しました。

使用しておらず、独自のプラグインで実装できるため、path.mark() を削除しました。

生成されたプラグインメタデータは常に結果に含まれるため、babel.metadata を削除しました。

path.hub.file.addImport を削除しました。代わりに @babel/helper-module-imports モジュールを使用できます。

+  import { addDefault } from "@babel/helper-module-imports";
function importModule(pkgStore, name, path) {
-  return path.hub.file.addImport(resolvePath(pkgStore, name, path), 'default', name);
+  return addDefault(path, resolvePath(pkgStore, name, path), { nameHint: name });
}

設定の変更

設定検索の仕組みにいくつかの大きな変更を加えました

特定のファイルの .babelrc ファイルを検索する際、デフォルトでは package.json で停止します。

特定のファイルについて、Babel v6 は設定ファイルが見つかるまでディレクトリ階層を検索し続けます。これは、プロジェクトがホームディレクトリなど、パッケージルートの外で見つかった設定ファイルを使用しているために壊れる可能性があることを意味します。

Webpack と同様に babel.config.js ファイルのサポートを追加します

これがモノレポの動作方法 (Babel 自体を含む) を破壊するため、基本的に設定の階層構造を削除する新しい設定ファイルを導入しています。

ファイルを見つけるための現在の作業ディレクトリにデフォルト設定される root オプションが含まれています。また、相対的にロードされないため、シンボリックリンクを正しく処理します。以前は、Webpack でパスをハードコードする必要があった可能性があります。

詳細については、babel.config.js ドキュメントを参照してください: プロジェクト全体の設定

このファイルと新しい overrides プロパティと env を組み合わせることで、フォルダーごとに複数の設定ファイルではなく、プロジェクト内のすべてのファイルに対して機能する単一の設定ファイルを持つことができます。

また、デフォルトで node_modules を除外しており、"babelrcRoots": [".", "node_modules/pkgA"] のように .babelrcRoots オプションの配列を設定した場合を除き、ルートのみを検索します。

Babel バージョンのアサート #7450

プラグインは、特定のバージョンの Babel でロードされていることを確認できます。API は、セマンティックバージョニングを渡すことができる assertVersion メソッドを公開します。

declare ヘルパーは、v6 との下位互換性を維持するために使用されます。

JavaScript
import { declare } from "@babel/helper-plugin-utils";

export default declare(api => {
  api.assertVersion(7);
  // ...
});

Babel プラグイン/プリセット

現在、最初のパラメータとして babel オブジェクト、プラグイン/プリセットオプション、および dirname を受け取ります

JavaScript
module.exports = function(api, options, dirname) {};

`babel-parser` (Babylon として知られています)

* プラグインオプションを削除しました #301

これは最初に v6.14.1 (2016 年 11 月 17 日) で追加されたため、誰もこれを使用していなかった可能性は低いです。

この包括的なオプションは削除されました。代わりに、アクティブ化するプラグインを具体的に決定する必要があります。

ツールが設定を常に更新する必要がないようにするのは良いアイデアだと思いましたが、同時に破壊的変更を簡単に行うことができないことも意味します。

以前

JavaScript
babelParser.parse(code, {
  plugins: ["*"],
});

次のものを使用すると、古い動作を取得できます

JavaScript
babelParser.parse(code, {
  plugins: [
    "asyncGenerators",
    "classProperties",
    "decorators",
    "doExpressions",
    "dynamicImport",
    "exportExtensions",
    "flow",
    "functionBind",
    "functionSent",
    "jsx",
    "objectRestSpread",
  ],
});

Babylon のプラグインオプションを参照してください。

decorators プラグインの名前を decorators-legacy に変更しました

@babel/plugin-proposal-decorators の legacy オプションに合わせて名前が変更されました。新しい decorators プラグインが実装され、新しいデコレータ提案を実装しています。

提案の 2 つのバージョンには異なる構文があるため、Babel で新しいセマンティクスが実装されるまでは、decorators-legacy を使用することを強くお勧めします。

classConstructorCall プラグインを削除しました #291

`@babel/traverse`

Flow バインディングのサポートを削除しました babel/babel#6528

この変更の理由は、declare var foo は新しいローカルバインディングを導入するのではなく、グローバルなものを表すためです。

getFunctionParent は Program を返さなくなります。代わりに getProgramParent を使用してください #5923。

getFunctionParent という名前の関数が Program も返すのは意味がないため、削除されました。

同等の動作を取得するには、次のような変更を行う必要があります

- path.scope.getFunctionParent()
+ path.scope.getFunctionParent() || path.scope.getProgramParent()

パスの置換/削除 API は、新しいパスの配列を返すようになりました

たとえば、Path#insertBefore または Path#replaceWith を使用すると、新しく挿入/置換されたパスの配列が常に返されるようになります。

JavaScript
const node = t.nullLiteral();
const [replaced] = path.replaceWith(node);
replace.node === node; // => true

これは、いくつかのノードを上位スコープに挿入する場合に特に役立ちます。ノードの新しい Path で Path API をすぐに呼び出すことができるからです。

JavaScript
const parent = path.findParent(() => /* some selection criteria */);
const helperPaths = path.unshiftContainer("body", helpers);
// helperPaths can now be referenced, manipulated, etc.

AST の変更

`InterpreterDirective` ノードを追加 #7928

Babylon はすでに「シバン」(#!env node) を解析しますが、Program ノードのコメントに含めています。ここでは、実際のノードを作成するだけです。

Program ノードに新しい interpreter フィールドを追加します。

JavaScript
extend interface Program {
  interpreter: InterpreterDirective;
}

InterpreterDirective ノードを追加します

JavaScript
interface InterpreterDirective <: Node {
    type: "InterpreterDirective";
    value: string;
}

JSX* および TS* ノードビルダー (@babel/types パッケージから) の名前を変更

ケースが変更されました: jsx と ts は小文字になりました。

- t.jSXIdentifier()
+ t.jsxIdentifier()

一般的に、Flow の場合は TypeAnnotation、TypeScript の場合は TSTypeAnnotation でノード型を区別しているため、共有型ノードの場合、TypeScript には TS プレフィックスが付いています。

`ArrowFunctionExpression`から`.expression`フィールドを削除

expressionフィールドは、2つの異なる真実のソースが存在し、それらをプラグインで手動で同期させる必要があったため削除されました。関数本体がBlockStatementかどうかをチェックするだけでよくなりました。

  return {
    visitor: {
      ArrowFunctionExpression({ node }) {
-       if (node.expression) {
+       if (node.body.type !== "BlockStatement") {
          // () => foo;
        }
      }
    }
  };

トークンを削除

以前のバージョンでは、tokensは常にトップレベルのASTにアタッチされていました。@babel/parserの最新バージョンでは、この動作を削除し、パーサーのパフォーマンスを向上させるためにデフォルトで無効にしました。babel自体でのすべての使用は削除され、@babel/generatorは整形の目的でトークンを使用しなくなりました。

もしあなたのbabelプラグインが現在tokensを使用している場合、それがまだ必要かどうかを評価し、可能であれば使用を削除してみてください。もしあなたのプラグインが本当にトークンに依存している場合は、再有効化できますが、ユーザーのパフォーマンスを損なうため、他の方法がない場合にのみ検討してください。

有効化するには、babylonのtokensオプションをtrueに設定する必要があります。これはプラグインから直接行うことができます。

JavaScript
export default function() {
  return {
    manipulateOptions(opts, parserOpts) {
      parserOpts.tokens = true;
    },
    ...
  };
}

名称変更

以下のノードの名前が変更されました。

名前 6.x	名前 7.x	例	PR
ExistentialTypeParam	ExistsTypeAnnotation	`type A = B<*>;`	#322
NumericLiteralTypeAnnotation	NumberLiteralTypeAnnotation	`type T = 0;`	#332

ASTノードだけでなく、@babel/types内の対応する関数もすべて名前が変更されました。

 import * as t from "@babel/types";

 return {
-  ExistentialTypeParam(path) {
-    const parent = path.findParent((path) => path.isExistentialTypeParam());
-    t.isExistentialTypeParam(parent);
+  ExistsTypeAnnotation(path) {
+    const parent = path.findParent((path) => path.isExistsTypeAnnotation());
+    t.isExistsTypeAnnotation(parent);

-    return t.existentialTypeParam();
+    return t.existsTypeAnnotation();
   },
-  NumericLiteralTypeAnnotation(path) {
-    const parent = path.findParent((path) => path.isNumericLiteralTypeAnnotation());
-    t.isNumericLiteralTypeAnnotation(parent);
+  NumberLiteralTypeAnnotation(path) {
+    const parent = path.findParent((path) => path.isNumberLiteralTypeAnnotation());
+    t.isNumberLiteralTypeAnnotation(parent);

-    return t.numericLiteralTypeAnnotation();
+    return t.numberLiteralTypeAnnotation();
   }
 };

置換

以下のASTノードでは、フィールドvarianceの値が単純な文字列値から、Varianceという独自のASTノードに変更されました。#333

このフィールドは、babylonでflowプラグインを有効にした場合にのみ使用可能です。

ObjectProperty
ObjectMethod
AssignmentProperty
ClassMethod
ClassProperty
Property

新しいVarianceノードの型は次のようになります。

JavaScript
type VarianceNode = {
  type: "Variance",
  kind: "plus" | "minus",
};

 return {
   Property({ node }) {
-    if (node.variance === "plus") {
+    if (node.variance.kind === "plus") {
       ...
-    } else if (node.variance === "minus") {
+    } else if (node.variance.kind === "minus") {
       ...
     }
   }
 };

位置情報の変更

ObjectTypeIndexerの位置情報は、セミコロンを含まないように変更されました。これは、flow-parserと一致させ、同じ位置情報を持つようにするためです。#228

例

JavaScript
var a: { [a: number]: string };

 {
   "type": "ObjectTypeIndexer",
   "start": 9,
-  "end": 29,
+  "end": 28,
   "loc": {
     "start": {
       "line": 1,
       "column": 9,
     },
     "end": {
       "line": 1,
-      "column": 29
+      "column": 28
     }
   }
 }

削除

ForAwaitStatement

ASTノードForAwaitStatementは削除され、ForOfStatementノードのフィールドawaitに置き換えられました。#349

 interface ForOfStatement <: ForInStatement {
   type: "ForOfStatement";
+  await: boolean;
 }

 return {
-  ForAwaitStatement(path) {
-    ...
+  ForOfStatement(path) {
+    if (path.node.await) {
+      ...
+    }
   }
 };

RestProperty & SpreadProperty

2つのASTノードRestPropertyとSpreadPropertyは、RestElementとSpreadElementを再利用するために削除されました。#384

 return {
   SpreadElement(path) {
-    ...
-  },
-  SpreadProperty(path) {
-    ...
+    if (path.parentPath.isObjectExpression()) {
+      ...
+    } else if (path.parentPath.isArrayExpression()) {
+      ...
+    }
   },
   RestElement(path) {
-    ...
-  },
-  RestProperty(path) {
-    ...
+    if (path.parentPath.isObjectPattern()) {
+      ...
+    } else if (path.parentPath.isArrayPattern()) {
+      ...
+    }
   }
 };

詳細については、BabelのアップグレードPRとBabylon AST仕様を参照してください。

すべての Babel パッケージ​

NodeJS のサポート​

エクスポートの変更​

@babel/core​

設定の変更​

Babel バージョンのアサート #7450​

Babel プラグイン/プリセット​

babel-parser (Babylon として知られています)​

@babel/traverse​

AST の変更​

InterpreterDirective ノードを追加 #7928​

JSX* および TS* ノードビルダー (@babel/types パッケージから) の名前を変更​

ArrowFunctionExpressionから.expressionフィールドを削除​

トークンを削除​

名称変更​

置換​

位置情報の変更​

削除​

ForAwaitStatement​

RestProperty & SpreadProperty​