@babel/plugin-transform-runtime

あるプロジェクトのカーネルでの二次開発のプロセスで、非常に奇妙な問題に遭遇しました。フロントエンドプロジェクトでは Taro のサブパッケージを使用しており、WeChat 小プログラムでは各パッケージのサイズが 2M を超えてはいけません。自分でコンパイルした結果、メインパッケージには 1.7M の依存リソースファイルが含まれており、他のいくつかの依存関係もあるため、小プログラムのメインパッケージが大きすぎるという問題がありました。この問題にはかなりの時間がかかりましたが、最初はシステムの問題だと思って、Hackintosh をインストールしてみましたが、解決できませんでした。グループのメンバーの助けを借りて、ついに問題を解決することができました。解決策はなんと babel をアップグレードするだけでした。テストの結果、主な問題は @babel/plugin-transform-runtime の問題だとわかりました。

@babel/plugin-transform-runtime には 3 つの主な機能がありますが、そのうちの 1 つは、構文変換後にインラインのヘルパー関数（inline Babel helpers）を自動的に削除し、代わりに @babel/runtime/helpers のヘルパー関数を使用することです。これにより、コードの再利用と最終的なファイルサイズの問題が解決されます。

インストールと設定#

@babel/plugin-transform-runtime を開発依存関係としてインストールし、@babel/runtime を本番依存関係としてインストールします。

npm install --save-dev @babel/plugin-trabsform-runtime
npm install --save @babel/runtime

設定ファイル#

// デフォルトの設定
{
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
}

// 設定項目を指定する
{ 
    "plugins": [
      [
        "@babel/plugin-transform-runtime",
        {
          "helpers": true,
          "corejs": false,
          "regenerator": true,
          "useESModules": false,
          "absoluteRuntime": false,
          "version": "7.0.1-beta.0"
        }
      ]
    ]
}

helpers：この設定項目は、ヘルパー関数パッケージを自動的にインポートするかどうかを設定します。ブール値を取り、デフォルトは true です。
corejs：グローバル環境を汚染しないために API の変換を行うかどうかを設定します。corejs の値は false、2、3 のいずれかを選択できます。通常、corejs の値は false に設定し、Promise などの API を変換しません。ただし、JS ライブラリを開発する場合は、2 または 3 に設定します。
regenerator：corejs と一緒に、グローバル環境を汚染しないために API の変換を行うかどうかを設定します。regenerator の値はブール値で、デフォルトは true です。
useESModules：ES6 のモジュールの使用方法を設定します。ブール値を取り、デフォルトは fasle です。webpack などのパッケージングツールを使用する場合は、true に設定して静的解析を行うことができます。
absoluteRuntime：@babel/plugin-transform-runtime が @babel/runtime モジュールをインポートするためのパス規則をカスタマイズするための設定です。ブール値または文字列を取ります。特別な要件がない限り、デフォルトの false のままにしておく必要があります。
version：この項目は @babel/runtime およびその派生バージョンである @babel/runtime-corejs2、@babel/runtime-corejs3 のバージョンに関連しています。これらの 3 つのパッケージのうち、必要なものをインストールするだけです。インストールした npm パッケージのバージョンを version に設定します。