エンタープライズアプリケーション向けデータグリッドとチャート
webpack
webpackとのパートナーシップを誇りに思います

モジュールメソッド

このセクションでは、webpackでコンパイルされたコードで使用可能なすべてのメソッドについて説明します。 webpackを使用してアプリケーションをバンドルする場合、ES6、CommonJS、AMDなど、さまざまなモジュール構文スタイルから選択できます。

webpackは複数のモジュール構文をサポートしていますが、一貫性を保ち、予期しない動作やバグを回避するために、単一の構文に従うことをお勧めします。実際、webpackは、最も近い親のpackage.jsonファイルに"type"フィールドがあり、その値が"module"または"commonjs"のいずれかの場合、.mjsファイル、.cjsファイル、または.jsファイルに対してこの推奨事項を適用します。先に進む前に、これらの適用事項に注意してください。

  • .mjsまたはpackage.jsonに"type": "module"を持つ.js
    • CommonJSは許可されません。たとえば、require、module.exports、またはexportsを使用することはできません。
    • インポート時にファイル拡張子が必須です。たとえば、import './src/App'ではなくimport './src/App.mjs'を使用する必要があります（Rule.resolve.fullySpecifiedを使用してこの適用を無効にできます）。
  • .cjsまたはpackage.jsonに"type": "commonjs"を持つ.js
    • importもexportも使用できません。
  • package.jsonに"type": "module"を持つ.wasm
    • wasmファイルのインポート時にファイル拡張子が必須です。

ES6（推奨）

バージョン2のwebpackはES6モジュール構文をネイティブにサポートしているため、babelなどのツールを使用せずにimportとexportを使用できます。他のES6+機能にはおそらくbabelが必要なことに注意してください。次のメソッドはwebpackでサポートされています。

import

別のモジュールのexportを静的にimportします。

import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';

Data URIをimportすることもできます。

import 'data:text/javascript;charset=utf-8;base64,Y29uc29sZS5sb2coJ2lubGluZSAxJyk7';
import {
  number,
  fn,
} from 'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==';

export

何かをdefaultまたは名前付きエクスポートとしてエクスポートします。

// Named exports
export var Count = 5;
export function Multiply(a, b) {
  return a * b;
}

// Default export
export default {
  // Some data...
};

import()

function(string path):Promise

モジュールを動的にロードします。import()への呼び出しは分割ポイントとして扱われ、要求されたモジュールとその子モジュールは別々のチャンクに分割されます。

if (module.hot) {
  import('lodash').then((_) => {
    // Do something with lodash (a.k.a '_')...
  });
}

import()における動的な式

import(foo)など、完全に動的なimportステートメントを使用することはできません。なぜなら、fooはシステムまたはプロジェクト内の任意のファイルへの任意のパスである可能性があるからです。

import()には、モジュールの場所に関する情報が少なくとも一部含まれている必要があります。バンドルは特定のディレクトリまたはファイルセットに制限できるため、動的な式を使用している場合、import()呼び出しで要求される可能性のあるすべてのモジュールが含まれます。たとえば、import(`./locale/${language}.json`)は、./localeディレクトリ内のすべての.jsonファイルが新しいチャンクにバンドルされる原因となります。ランタイム時に変数languageが計算されると、english.jsonやgerman.jsonなどのファイルが使用可能になります。

// imagine we had a method to get language from cookies or other storage
const language = detectVisitorLanguage();
import(`./locale/${language}.json`).then((module) => {
  // do something with the translations
});

マジックコメント

機能を動作させるためのインラインコメント。インポートにコメントを追加することで、チャンクに名前を付けたり、異なるモードを選択したりすることができます。これらのマジックコメントの完全なリストについては、以下のコードとその説明を参照してください。

// Single target
import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackExports: ["default", "named"] */
  /* webpackFetchPriority: "high" */
  'module'
);

// Multiple possible targets
import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  `./locale/${language}`
);
import(/* webpackIgnore: true */ 'ignored-module.js');
webpackIgnore

trueに設定すると、動的インポートの解析を無効にします。

webpackChunkName

新しいチャンクの名前。webpack 2.6.0以降、指定された文字列内にプレースホルダー[index]と[request]がサポートされ、それぞれインクリメントされた番号または実際に解決されたファイル名になります。このコメントを追加すると、個別のチャンクの名前が[id].jsではなく[my-chunk-name].jsになります。

webpackFetchPriority
5.87.0+

特定の動的インポートに対してfetchPriorityを設定します。module.parser.javascript.dynamicImportFetchPriorityオプションを使用して、すべての動的インポートに対するグローバルなデフォルト値を設定することも可能です。

import(
  /* webpackFetchPriority: "high" */
  'path/to/module'
);
webpackMode

webpack 2.6.0以降、動的インポートを解決するためのさまざまなモードを指定できます。次のオプションがサポートされています。

  • 'lazy'（デフォルト）：各import()されたモジュールに対して遅延ロード可能なチャンクを生成します。
  • 'lazy-once'：すべてのimport()呼び出しを満たすことができる単一の遅延ロード可能なチャンクを生成します。チャンクはimport()への最初の呼び出しでフェッチされ、後続のimport()呼び出しでは同じネットワーク応答が使用されます。これは、部分的に動的なステートメント（例：import(`./locales/${language}.json`)）の場合、つまり、要求される可能性のある複数のモジュールパスがある場合にのみ意味があります。
  • 'eager'：追加のチャンクは生成しません。すべてのモジュールは現在のチャンクに含まれ、追加のネットワークリクエストは行われません。Promiseは返されますが、既に解決されています。静的インポートとは異なり、モジュールはimport()が呼び出されるまで実行されません。
  • 'weak'：モジュール関数が他の方法（たとえば、別のチャンクがインポートした、またはモジュールを含むスクリプトがロードされた）で既にロードされている場合に、モジュールをロードしようとします。Promiseは返されますが、チャンクが既にクライアントにある場合にのみ正常に解決されます。モジュールが使用できない場合、Promiseは拒否されます。ネットワークリクエストは決して実行されません。これは、必要なチャンクが常に最初のリクエストで手動で提供される（ページに埋め込まれている）ユニバーサルレンダリングには役立ちますが、アプリのナビゲーションが最初に提供されていないインポートをトリガーする場合には役立ちません。
webpackPrefetch

ブラウザに、リソースは将来のナビゲーションに必要となる可能性が高いことを伝えます。webpackPrefetchの動作方法の詳細については、ガイドをご覧ください。

webpackPreload

ブラウザに、リソースは現在のナビゲーション中に必要になる可能性があることを伝えます。webpackPreloadの動作方法の詳細については、ガイドをご覧ください。

webpackInclude

インポート解決中に照合される正規表現。一致するモジュールのみがバンドルされます。

webpackExclude

インポート解決中に照合される正規表現。一致するモジュールはバンドルされません。

webpackExports: 動的に import() されたモジュールの指定されたエクスポートのみをバンドルするように webpack に指示します。これにより、チャンクの出力サイズを削減できます。 webpack 5.0.0-beta.18 以降で使用可能です。

CommonJS

CommonJS の目的は、ブラウザ以外の JavaScript のエコシステムを指定することです。Webpack は次の CommonJS メソッドをサポートしています。

require

require(dependency: String);

別のモジュールからエクスポートを同期的に取得します。コンパイラは、依存関係が出力バンドルで使用可能になるようにします。

var $ = require('jquery');
var myModule = require('my-module');

require に対してマジックコメントを有効にすることもできます。詳細は module.parser.javascript.commonjsMagicComments を参照してください。

require.resolve

require.resolve(dependency: String);

モジュールの ID を同期的に取得します。コンパイラは、依存関係が出力バンドルで使用可能になるようにします。不透明な値として扱い、require.cache[id] または __webpack_require__(id) とのみ使用する必要があります（このような使用は避けるのが最適です）。

詳細は module.id を参照してください。

require.cache

同じモジュールを複数回 require すると、モジュールの実行とエクスポートは1回だけになります。そのため、ランタイムにキャッシュが存在します。このキャッシュから値を削除すると、モジュールが新しく実行され、新しいエクスポートが生成されます。

var d1 = require('dependency');
require('dependency') === d1;
delete require.cache[require.resolve('dependency')];
require('dependency') !== d1;
// in file.js
require.cache[module.id] === module;
require('./file.js') === module.exports;
delete require.cache[module.id];
require.cache[module.id] === undefined;
require('./file.js') !== module.exports; // in theory; in praxis this causes a stack overflow
require.cache[module.id] !== module;

require.ensure

require.ensure(
  dependencies: String[],
  callback: function(require),
  errorCallback: function(error),
  chunkName: String
)

指定された dependencies を非同期的にロードされる別のバンドルに分割します。CommonJS モジュール構文を使用する場合、これは依存関係を動的にロードする唯一の方法です。つまり、このコードは実行時に実行でき、特定の条件が満たされた場合にのみ dependencies をロードします。

var a = require('normal-dep');

if (module.hot) {
  require.ensure(['b'], function (require) {
    var c = require('c');

    // Do something special...
  });
}

上記で指定された順序で、次のパラメータがサポートされています。

  • dependencies: callback の実行に必要なすべてのモジュールを宣言する文字列の配列。
  • callback: 依存関係がロードされると webpack が実行する関数。この関数には require 関数の実装がパラメータとして送信されます。この関数を使用して、実行に必要なモジュールをさらに require() することができます。
  • errorCallback: webpack が依存関係のロードに失敗した場合に実行される関数。
  • chunkName: この特定の require.ensure() によって作成されたチャンクに付けられた名前。さまざまな require.ensure() 呼び出しに同じ chunkName を渡すことで、それらのコードを単一のチャンクに結合し、ブラウザがロードする必要があるバンドルを1つだけにすることができます。

AMD

非同期モジュール定義 (AMD) は、モジュールの記述とロードのためのインターフェースを定義する JavaScript 仕様です。Webpack は次の AMD メソッドをサポートしています。

define (ファクトリ関数付き)

define([name: String], [dependencies: String[]], factoryMethod: function(...))

dependencies が指定されている場合、factoryMethod は各依存関係のエクスポート（同じ順序で）を使用して呼び出されます。dependencies が指定されていない場合、factoryMethod は require、exports、module を使用して呼び出されます（互換性のため！）。この関数が値を返す場合、その値はモジュールによってエクスポートされます。コンパイラは、各依存関係が使用可能になるようにします。

define(['jquery', 'my-module'], function ($, myModule) {
  // Do something with $ and myModule...

  // Export a function
  return function doSomething() {
    // ...
  };
});

define (値付き)

define(value: !Function)

これにより、指定された value がエクスポートされます。ここの value は、関数以外であればどのようなものでもかまいません。

define({
  answer: 42,
});

require (AMD バージョン)

require(dependencies: String[], [callback: function(...)])

require.ensure と同様に、これにより、指定された dependencies が非同期的にロードされる別のバンドルに分割されます。callback は、dependencies 配列内の各依存関係のエクスポートを使用して呼び出されます。

require(['b'], function (b) {
  var c = require('c');
});

ラベル付きモジュール

内部の LabeledModulesPlugin を使用すると、モジュール内で次のメソッドを使用してエクスポートと require を行うことができます。

export ラベル

指定された value をエクスポートします。ラベルは、関数宣言または変数宣言の前に置くことができます。関数名または変数名は、値がエクスポートされる識別子です。

export: var answer = 42;
export: function method(value) {
  // Do something...
};

require ラベル

依存関係からのすべてのエクスポートを現在のスコープで使用可能にします。require ラベルは文字列の前に置くことができます。依存関係は export ラベルを使用して値をエクスポートする必要があります。CommonJS または AMD モジュールは使用できません。

some-dependency.js

export: var answer = 42;
export: function method(value) {
  // Do something...
};
require: 'some-dependency';
console.log(answer);
method(...);

Webpack

上記で説明したモジュール構文に加えて、Webpack はいくつかのカスタムの Webpack 特有のメソッドも許可しています。

require.context

require.context(
  (directory: String),
  (includeSubdirs: Boolean) /* optional, default true */,
  (filter: RegExp) /* optional, default /^\.\/.*$/, any file */,
  (mode: String) /* optional, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once', default 'sync' */
);

directory へのパス、includeSubdirs オプション、モジュールの包含をより詳細に制御するための filter、ロード方法を定義するための mode を使用して、依存関係のグループ全体を指定します。その後、基礎となるモジュールを解決できます。

var context = require.context('components', true, /\.html$/);
var componentA = context.resolve('componentA');

mode が 'lazy' に設定されている場合、基礎となるモジュールは非同期的にロードされます。

var context = require.context('locales', true, /\.json$/, 'lazy');
context('localeA').then((locale) => {
  // do something with locale
});

使用可能なモードとその動作の完全なリストは、import() のドキュメントで説明されています。

require.include

require.include((dependency: String));

dependency を実行せずに含めます。これは、出力チャンク内のモジュールの位置を最適化するために使用できます。

require.include('a');
require.ensure(['a', 'b'], function (require) {
  /* ... */
});
require.ensure(['a', 'c'], function (require) {
  /* ... */
});

これにより、次の出力が生成されます。

  • エントリチャンク: file.js と a
  • 匿名チャンク: b
  • 匿名チャンク: c

require.include('a') を使用しないと、両方の匿名チャンクで重複します。

require.resolveWeak

require.resolve と似ていますが、これは module をバンドルにプルしません。「弱い」依存関係と考えられます。

if (__webpack_modules__[require.resolveWeak('module')]) {
  // Do something when module is available...
}
if (require.cache[require.resolveWeak('module')]) {
  // Do something when module was loaded before...
}

// You can perform dynamic resolves ("context")
// similarly to other require/import methods.
const page = 'Foo';
__webpack_modules__[require.resolveWeak(`./page/${page}`)];

警告

モジュールソースに静的に分析できない require が含まれている場合、重大な依存関係に関する警告が出力されます。

コード例

someFn(require);
require.bind(null);
require(variable);

さらに読む

このページを編集·このページを印刷
« 前へ
Loggerインターフェース
次へ »
モジュール変数

10 貢献者

skipjacksokrafadysamirsadekbyzykdebs-obrienwizardofhogwartsEugeneHlushkochenxsanjamesgeorge007WofWca