BT

InfoQ ホームページ ニュース Babel 7.10リリース、より良くなったReact Tree-shaking

Babel 7.10リリース、より良くなったReact Tree-shaking

ブックマーク

原文(投稿日:2020/05/29)へのリンク

Babelチームは先頃、Reactコードのツリーシェイクサポートを改善したBabel 7.10をリリースした。Babel 7.10はさらに、オブジェクト内の特定のプライベートフィールドの存在のチェックをサポートし、オプションチェーン ?. オペレータの人間工学を改善する。

Babel 7.10は、一部のReact関数呼び出しに /*#__PURE__*/ アノテーションを挿入して、ツリーシェイクで安全であることをマークする。これにより、Reactを使用してアプリケーションを構築するときに、React.forwardRef 呼び出しが未使用のコンポーネントのツリーシェイクを防ぐという事実が緩和される。多くのトップレベルのReact純粋関数呼び出しの前に /*#__PURE__*/ アノテーションを追加すると、そのような関数をterserやその他のミニファイアによってツリーシェイク/デッドコード除去できる。

次のコード:

import React from 'react';
const SomeComponent = React.lazy(() => import('./SomeComponent'));

次のコードに変換される:

import React from 'react';
const SomeComponent = /*#__PURE__*/React.lazy(() => import('./SomeComponent'));

それらのフィールドが定義されていないオブジェクトのプライベートフィールドにアクセスすると、例外がスローされる。Babelの新しいリリースでは、開発者は、例外処理を避けながら、特定のオブジェクトに特定のプライベートフィールドがあるかどうかを静的にチェックすることもできる。構文 #private_field in object を使用した例は次のとおりである。

class Person {
  #name; // private field
  
  hug(other) {
    if (#name in other) console.log(`${this.#name}  ${other.#name}`);
    else console.log("It's not a person!")
  }
}

Babel 7.10は、オプションチェーンの一部のエッジケースのセマンティクスをTypeScript 3.9で提供されるセマンティクスに合わせる:

foo?.bar!.baz

前のコードは、TypeScript 3.9とBabel 7.10の両方で foo?.bar.baz と同様に動作する。Babel 7.10は、o?.Foo.#x のようなプライベートフィールドとオプションチェーン ?. の混合もサポートしている。

新しいBabelリリースでは、新しいステージ1 Module Attributesプロポーザルのパーササポートが追加されている(import a from "./a.json" with type: "json"). @babel/preset-env now compiles ES2015-style Unicode escapes (\u{Babe1}) を同等のレガシー構文 (\uDAAA\uDFE1) にコンパイルするようになった。Babelチームは7.10で、Babelの新しいポリフィル互換性アーキテクチャの最初の実験バージョンもリリースした。

Babelには、Babelのユーザーに大きな影響を与える変更について話し合うための公式のbabel/rfcs RFCプロセスが追加された。新しいプロセスは、特に次の場合に価値がある:

  • 新しいAPIのサーフェイスエリアを作成する新機能であり、導入された場合に構成オプションが必要になる。
  • 重大な変更またはすでに出荷されている機能の削除。
  • Babel自体へのコード変更が含まれていない場合でも、新しい慣用的な使用法または規則を導入する。

変更ログ全体はGitHubにあり、Babel 7.10で出荷された変更の完全なリストが含まれている。Babelは、MITオープンソースライセンスの下で利用できる。フィードバックや質問を歓迎する。フィードバックや質問は専用のGitHub Discussionsリポジトリに記録できる。Babel GitHub organizationによる貢献は歓迎されており、Babelの貢献ガイドライン行動規範に従う必要がある。プロジェクトを支援するための寄付は、Open Collectiveを介して行うこともできる。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。