モジュール変数#

CommonJs#

module.loaded#

false はモジュールが実行中であることを、true は同期実行が完了したことを意味します。

module.id#

現在のモジュールID。

module.id === require.resolve('./src/main.js'); // true

module.hot#

ホットモジュール置換が有効かどうかを示し、プロセスへのインターフェースを提供します。詳細はHMR API ページを参照してください。

global#

詳細はnode.js globalを参照してください。

Rspack は global をプロキシオブジェクトに置き換え、その中の互換性の問題を処理します。

global['property']

__webpack_require__.g['property'];

// webpack/runtime/global
__webpack_require__.g = (function () {
  // compatibility code
})();

__filename#

設定 node.__filename に依存します。

• false: undefined
• mock: '/index.js' と等しい
• true: NodeJs __filename

パーサーによって解析される式内で使用される場合、設定オプションはtrueとして扱われます。

__filename

'src/main.js';

__dirname#

設定 node.__dirname に依存します。

• false: undefined
• mock: '/index.js' と等しい
• true: NodeJs __dirname

パーサーによって解析される式内で使用される場合、設定オプションはtrueとして扱われます。

__dirname

'src';

import.meta (ESM)#

import.meta は、モジュールのURLなどのコンテキスト固有のメタデータをJavaScriptモジュールに公開します。ESMでのみ使用できます。

Rspackはimport.metaへの直接アクセスをサポートしていないことに注意してください。代わりに、そのプロパティにアクセスするか、デストラクチャリング代入を使用する必要があります。例：

import.meta
typeof import.meta

{
} // Warning: Direct access to import.meta is not supported (only property access or destructuring is supported)
('object');

import.meta.url#

モジュールの絶対file: URLを返します。

import.meta.url
typeof import.meta.url

'file://project_root/src/main.js';
'string';

import.meta.webpackContext#

import.meta.webpackContextは、一連のモジュールを動的にインポートできるwebpack固有の関数です。

コードでimport.meta.webpackContextを使用でき、Rspackはビルドプロセス中に一致するモジュールを解析して参照します。

• 型

function webpackContext(
  /**
   * A directory to search.
   */
  request: string,
  options?: {
    /**
     * Whether subdirectories should be searched.
     * @default true
     */
    recursive?: boolean;
    /**
     * A regular expression to match files.
     * @default /^\.\/.*$/ (any file)
     */
    regExp?: RegExp;
    /**
     * Module loading mode.
     * @default 'sync'
     */
    mode?: 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once';
    include?: RegExp;
    exclude?: RegExp;
    preload?: boolean | number;
    prefetch?: boolean | number;
    chunkName?: string;
    exports?: string | string[][];
  },
): Context;

• 例

// Create a context, with files from the test directory that
// can be required with a request ending with `.test.js`.
const context = import.meta.webpackContext('./test', {
  recursive: false,
  regExp: /\.test\.js$/,
});

// Create a context with all files in the parent folder and
// descending folders ending with `.stories.js`.
const context = import.meta.webpackContext('../', {
  recursive: true,
  regExp: /\.stories\.js$/,
});

// If mode is set to 'lazy', the underlying modules will be loaded asynchronously
const context = import.meta.webpackContext('./locales', {
  recursive: true,
  regExp: /\.json$/,
  mode: 'lazy',
});

context API#

import.meta.webpackContext()によって返されるコンテキストは、request引数（モジュールパス）を受け取る関数です。

この関数には、resolve、keys、idの3つのプロパティがあります。

• resolveは関数であり、解析されたリクエストのモジュールIDを返します。
• keysは、コンテキストモジュールが処理できるすべてのリクエストの配列を返す関数です。
• idはコンテキストモジュールのモジュールIDです。module.hot.acceptに役立つ場合があります。

これは、ディレクトリ内のすべてのファイル、またはパターンに一致するファイルをrequireする場合に役立ちます。

次のようなフォルダ構造があるとします。

import.meta.webpackContext()を使用して、フォルダ内のすべてのコンポーネントファイルを動的にインポートできます。

const componentsContext = import.meta.webpackContext('./components', {
  recursive: false,
  regExp: /\.js$/,
});

componentsContext.keys().forEach(fileName => {
  const componentModule = componentsContext(fileName);

  // Here you can use your module, for example console.log
  console.log(componentModule);
});

import.meta.webpackContext()は、特に多くのファイルを管理する必要がある場合に、モジュールのインポートプロセスを簡素化します。使用する場合、不要なファイルの一致を避けてください。これにより、ビルド時間と出力サイズが大幅に増加する可能性があります。

import.meta.webpackHot#

module.hotのエイリアスですが、import.meta.webpackHotは厳密なESMで使用できますが、module.hotは使用できません。

ランタイム#

__webpack_hash__#

コンパイルのハッシュへのアクセスを提供します。

__webpack_hash__

__webpack_require__.h();

// webpack/runtime/get_full_hash
__webpack_require__.h = function () {
  return '9210c6f859a51c6f9a62';
};

__webpack_runtime_id__#

現在のエントリのランタイムIDにアクセスします。

__webpack_runtime_id__

__webpack_require__.j;

// webpack/runtime/runtime_id
__webpack_require__.j = '909';

__webpack_public_path__#

設定オプションのoutput.publicPathと等しくなります。

__webpack_public_path__

__webpack_require__.p;

// output.publicPath !== "auto"
__webpack_require__.p = 'output.publicPath';
// output.publicPath === "auto"，
__webpack_require__.p = 'calculated from document/location';

__webpack_base_uri__#

ランタイムでベースURIを取得または変更します。

__webpack_base_uri__

__webpack_require__.b;

// chunk loading
__webpack_require__.b = document.baseURI || self.location.href;

__webpack_nonce__#

Rspackは、ロードするすべてのスクリプトにnonceを追加できます。この機能を有効にするには、__webpack_nonce__変数を設定し、エントリスクリプトに含めます。

__webpack_nonce__ = 'your_nonce_code';

__webpack_require__.nc = '2312312';

// webpack/runtime/load_script
if (__webpack_require__.nc) {
  script.setAttribute('nonce', __webpack_require__.nc);
}

モジュール#

__webpack_modules__#

すべてのモジュールの内部オブジェクトへのアクセス。

__webpack_modules__

var __webpack_modules__ = {
  'main.js': function () {
    __webpack_require__.m;
  },
};
__webpack_require__.m = __webpack_modules__;

__webpack_module__#

現在のmoduleへのアクセスを提供します。moduleは厳密なESMでは使用できません。

__webpack_module__

"main.js": function(renamed_module) {
  renamed_module
}

__webpack_module__.id#

現在のモジュールのID（module.id）へのアクセスを提供します。moduleは厳密なESMでは使用できません。

__webpack_module__.id

"main.js": function(renamed_module) {
  renamed_module.id
}

__webpack_require__#

生のrequire関数。この式は、依存関係のパーサーによって解析されません。

__webpack_require__('./dep.js')

"main.js": function(_, __, renamed_require) {
  renamed_require('./dep.js')
}

__non_webpack_require__#

webpackによって解析されないrequire関数を生成します。グローバルなrequire関数が使用可能な場合、それを用いて高度な処理を行うために使用できます。

__non_webpack_require__('outer.js')

"main.js": function(_, __, __webpack_require__) {
  require('outer.js')
}

__webpack_is_included__#

指定されたモジュールがwebpackによってバンドルされているかどうかをテストします。

if (__webpack_is_included__('./dep.js')) {
  // do something
}

if (true) {
  // do something
}

__resourceQuery#

現在のモジュールのリソースクエリ。次のrequire呼び出しが行われた場合、クエリ文字列はfile.jsで使用できます。

require('file.js?test');

__resourceQuery

'?test';

__webpack_exports_info__#

モジュールにおいて、エクスポートのイントロスペクションを可能にするために__webpack_exports_info__が利用可能です。

• __webpack_exports_info__は常にtrueです。
• エクスポートが未使用であることがわかっている場合、__webpack_exports_info__.<exportName>.usedはfalseとなり、それ以外の場合はtrueとなります。
• __webpack_exports_info__.<exportName>.useInfoは次のようになります。
  • エクスポートが未使用であることがわかっている場合false
  • エクスポートが使用されていることがわかっている場合true
  • エクスポートの使用が実行時条件に依存する可能性がある場合null
  • 情報が利用できない場合undefined
• __webpack_exports_info__.<exportName>.provideInfoは次のようになります。
  • エクスポートが提供されていないことがわかっている場合false
  • エクスポートが提供されていることがわかっている場合true
  • エクスポートの提供が実行時条件に依存する可能性がある場合null
  • 情報が利用できない場合undefined
• ネストされたエクスポートからの情報へのアクセスも可能です。例：__webpack_exports_info__.<exportName>.<exportProperty1>.<exportProperty2>.used
• __webpack_exports_info__.<exportName>.canMangleを使用して、エクスポートを難読化できるかどうかを確認します。

if (__webpack_exports_info__.someUsedExport.used) { }
if (__webpack_exports_info__.someUnusedExport.used) { }

if (true) {
}
if (false) {
}

チャンク#

__webpack_chunkname__#

現在のチャンク名を取得します。

__webpack_chunkname__

__webpack_require__.cn;

// webpack/runtime/chunk_name
__webpack_require__.cn = 'main';

__webpack_chunk_load__#

内部チャンク読み込み関数です。1つの引数を取ります。

• chunkId: 読み込むチャンクのID。

__webpack_chunk_load__

__webpack_require__.e;

// webpack/runtime/ensure_chunk
__webpack_require__.e = function (chunkId) {
  // return chunk loading promise
};

1つのチャンクの読み込みに失敗した場合に、代替パブリックパスからチャンクを読み込む例

const originalLoad = __webpack_chunk_load__;
const publicPaths = ['a', 'b', 'c'];
__webpack_chunk_load__ = async id => {
  let error;
  for (const path of publicPaths) {
    __webpack_public_path__ = path;
    try {
      return await originalLoad(id);
    } catch (e) {
      error = e;
    }
  }
  throw error;
};
import('./module-a').then(moduleA => {
  // now webpack will use the custom __webpack_chunk_load__ to load chunk
});

__webpack_get_script_filename__#

IDからチャンクのファイル名を提供します。

__webpack_get_script_filename__

__webpack_require__.u;

// webpack/runtime/get_chunk_filename
__webpack_require__.u = function (chunkId) {
  // ...
};

代入可能であり、ランタイムで使用されるファイル名を変更できます。たとえば、チャンクを読み込む際の最終的なパスを決定するために使用できます。

const oldFn = __webpack_get_script_filename__;

__webpack_get_script_filename__ = chunkId => {
  const filename = oldFn(chunkId);
  return filename + '.changed';
};

Module Federation#

__webpack_share_scopes__#

このオブジェクトはリモートコンテナで共有スコープとして使用され、ホストから提供されたモジュールで満たされます。

__webpack_init_sharing__#

このメソッドは、ホストコンテナで共有スコープのモジュールを初期化するために使用されます。

System.js#

__system_context__#

output.libraryTarget="system"の場合のSystem.jsからのコンテキスト。

Rspack#

__rspack_version__#

現在のRspackバージョン。デフォルトは@rspack/core/package.jsonのバージョンですが、experiments.rspackFuture.bundlerInfo.versionで変更できます。

__rspack_version__

__webpack_require__.rv;

// webpack/runtime/rspack_version
__webpack_require__.rv = '0.7.4';

__rspack_unique_id__#

現在のバンドラのID。値はbundler={bundler}@{version}です。- bundler: デフォルトは"rspack"で、experiments.rspackFuture.bundlerInfo.bundlerで変更できます。

• version: デフォルトは@rspack/core/package.jsonのバージョンで、experiments.rspackFuture.bundlerInfo.versionで変更できます。

__rspack_unique_id__

__webpack_require__.ruid;

// webpack/runtime/rspack_unique_id
__webpack_require__.ruid = 'bundler=rspack@0.7.4';