組み込み swc-loader

builtin:swc-loader は、より優れたパフォーマンスを提供することを目的とした、swc-loader の Rust 版です。ローダーの設定は、JS 版の swc-loader と一致しています。

例

プロジェクトで builtin:swc-loader を使用する必要がある場合は、次のように構成します。

TypeScript トランスパイル

.ts ファイルをトランスパイルするには

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'typescript',
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
};

JSX トランスパイル

React の .jsx ファイルをトランスパイルするには

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
              transform: {
                react: {
                  pragma: 'React.createElement',
                  pragmaFrag: 'React.Fragment',
                  throwIfNamespace: true,
                  development: false,
                  useBuiltins: false,
                },
              },
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
};

構文の低減

SWC は、JavaScript 構文の低減のターゲットを指定するために、jsc.target および env.targets を提供します。

jsc.target

jsc.target は、es5、es2015、es2016などのECMAバージョンを指定するために使用されます。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              target: 'es2015',
            },
            // ...other options
          },
        },
      },
    ],
  },
};

env.targets

env.targets は、ブラウザーの範囲を指定するためにbrowserslist構文を使用します。例:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            env: {
              targets: [
                'chrome >= 87',
                'edge >= 88',
                'firefox >= 78',
                'safari >= 14',
              ],
            },
            // ...other options
          },
        },
      },
    ],
  },
};

ヒント

jsc.target と env.targets は同時に設定できません。必要に応じていずれかを選択してください。

ポリフィルインジェクション

プロジェクトで高バージョンの JavaScript 構文と API を使用する場合、コンパイルされたコードが低バージョンのブラウザーで実行できるようにするには、通常、構文のダウングレードとポリフィルインジェクションの 2 つの部分を実行する必要があります。

SWC は、API ポリフィルとして core-js のインジェクションをサポートしており、env.mode および env.coreJs を使用して設定できます。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            env: {
              mode: 'usage',
              coreJs: '3.26.1',
              targets: [
                'chrome >= 87',
                'edge >= 88',
                'firefox >= 78',
                'safari >= 14',
              ],
            },
            // ...other options
          },
        },
      },
    ],
  },
};

型宣言

@rspack/core によってエクスポートされた SwcLoaderOptions 型を使用して、型ヒントを有効にできます。

rspack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'builtin:swc-loader',
          /** @type {import('@rspack/core').SwcLoaderOptions} */
          options: {
            // some options
          },
        },
      },
    ],
  },
};

rspack.config.ts:

import type { SwcLoaderOptions } from '@rspack/core';

export default {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            // some options
          } satisfies SwcLoaderOptions,
        },
      },
    ],
  },
};

オプション

以下は、いくつかの SWC 設定と Rspack 固有の設定の紹介です。完全なオプションについては、SWC Configurations を参照してください。

jsc.experimental.plugins

安定性実験的

警告

Wasm プラグインは SWC のバージョンと密接に結合しているため、正常に機能するためには対応するバージョンの SWC と互換性のある Wasm プラグインを選択する必要があります。selecting-swc-core。

適切な Wasm プラグインバージョンを選択する方法に関する互換性情報については、こちらを参照してください。

Rspack は builtin:swc-loader で Wasm プラグインのロードをサポートしており、次のようにプラグイン名を指定できます。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              experimental: {
                plugins: [
                  [
                    '@swc/plugin-remove-console',
                    {
                      exclude: ['error'],
                    },
                  ],
                ],
              },
            },
          },
        },
      },
    ],
  },
};

これは Wasm プラグインの使用例の例です。

rspackExperiments

rspack が提供する実験的な機能。

rspackExperiments.import

安定性実験的

babel-plugin-import から移植されました。設定は基本的に同じです。

customName や customStyleName など、関数は設定で使用できません。これらの関数は Rust から呼び出す必要があるため、パフォーマンスのオーバーヘッドが発生します。modularize_imports に触発され、いくつかの単純な関数はテンプレート文字列で置き換えることができます。したがって、customName、customStyleName などの関数型の設定は、関数を置き換えてパフォーマンスを向上させるために、テンプレートとして文字列で渡すことができます。

例:

import { MyButton as Btn } from 'foo';

次の設定を適用します。

rspack.config.js

module.exports = {
  module: {
    rules: [
      {
        use: 'builtin:swc-loader',
        options: {
          ...
          rspackExperiments: {
            import: [{
               libraryName: 'foo',
               customName: 'foo/es/{{ member }}',
            }]
          }
        }
      }
    ]
  }
};

{{ member }} は、インポートされた指定子に置き換えられます。

import Btn from 'foo/es/MyButton';

テンプレート customName: 'foo/es/{{ member }}' は customName: (member) => `foo/es/${member}` と同じですが、テンプレート文字列には Node-API のパフォーマンスオーバーヘッドがありません。

ここで使用されているテンプレートは handlebars です。いくつか便利な組み込みヘルパーがあります。上記のインポートステートメントを例にとると、

rspack.config.js

module.exports = {
  module: {
    rules: [
      {
        use: 'builtin:swc-loader',
        options: {
          ...
          rspackExperiments: {
            import: [{
               libraryName: 'foo',
               customName: 'foo/es/{{ kebabCase member }}',
            }]
          }
        }
      }
    ]
  }
};

変換後:

import Btn from 'foo/es/my-button';

kebabCase に加えて、camelCase、snakeCase、upperCase、lowerCase、legacyKebabCase/legacySnakeCase も同様に使用できます。

legacyKebabCase/legacySnakeCase は、1.13.7 より前の babel-plugin-import バージョンとして機能します。

その他の設定については、babel-plugin-import のドキュメントを確認してください。

ant-design のクラシックな 4.x バージョンを例にとると、次のように設定するだけで済みます。

rspack.config.js

module.exports = {
  module: {
    rules: [
      {
        use: 'builtin:swc-loader',
        options: {
          ...
          rspackExperiments: {
            import: [
              {
                libraryName: 'antd',
                style: '{{member}}/style/index.css',
            },
            ]
          }
        }
      }
    ]
  }
};

上記の設定では、import { Button } from 'antd' が次のように変換されます。

import Button from 'antd/es/button';
import 'antd/es/button/style/index.css';

すると、スタイルファイルが自動的にインポートされ、ページに適用されることがわかります。

もちろん、less のサポートをすでに設定している場合は、次の設定を単純に使用できます。

rspack.config.js

module.exports = {
  module: {
    rules: [
      {
        use: 'builtin:swc-loader',
        options: {
          ...
          rspackExperiments: {
            import: [
              {
                libraryName: 'antd',
                style: true,
            },
            ]
          }
        }
      }
    ]
  }
};

上記の設定では、import { Button } from 'antd'; が次のように変換されます。

import Button from 'antd/es/button';
import 'antd/es/button/style';

このページについて

組み込み swc-loader#

例#

TypeScript トランスパイル#

JSX トランスパイル#

構文の低減#

jsc.target#

env.targets#

ポリフィルインジェクション#

型宣言#

オプション#

jsc.experimental.plugins#

rspackExperiments#

rspackExperiments.import#

組み込み swc-loader

例

TypeScript トランスパイル

JSX トランスパイル

構文の低減

jsc.target

env.targets

ポリフィルインジェクション

型宣言

オプション

jsc.experimental.plugins

rspackExperiments

rspackExperiments.import