webpack require.ensureとrequire AMDの違いを詳しく説明します。
4318 ワード
概要
require-ensureとrequire-amdの違い:
require-amd
説明:AMD仕様のrequire関数と同じです。使用時にモジュール配列とコールバック関数を伝達します。モジュールは全部ダウンロードされて、全部実行された後、コールバック関数を実行します。
文法:require(dependencies:String[],[calback:function])
パラメータ dependencies:モジュール依存配列 calback:コールバック関数 require-ensure
説明:require.ensureは必要な時に依存するモジュールをダウンロードします。パラメータ指定のモジュールは全部ダウンロードしました。(ダウンロードしたモジュールはまだ実行していません。)実行します。
パラメータで指定されたコールバック関数です。require.ensureはchunkを作成し、このchunkの名前を指定できます。このchunk名が既に存在しているなら、今回依存したモジュールを既に存在しているchunkに統合して、最後にこのchunkはwebpack構築時に単独でファイルを生成します。
文法:require.ensure(dependencies:String[],calback:function([require]),[chunkName:String]) dependencies:依存するモジュール配列 calback:コールバック関数は、呼び出し時にrequireパラメータ を伝えます。 chunkName:モジュール名は、構築時にファイルを生成する際に を使用して命名されます。
注意点:requi.ensureのモジュールはダウンロードされても実行されません。レプリカ関数がrequire(モジュール名)を使用した場合にのみ、このモジュールは実行されます。
例
require-amd
ソースコード
webpack.co.nfig.amd.js
命令行でwebpack--config webpack.co nfig.amd.jsを実行します。
-main.bundle.js
-example.amd.js
-1.hunnk.js
-module 1.js
-module 2.js
実行結果
ブラウザでamd/index.を実行し、コンソール出力:
ソースコード
webpack.co nfig.ensure.js
同上
module 2.js
同上
構築結果
命令行でwebpack--config webpack.co.nfig.ensure.jsを実行します。
-main.bundle.js
-example.amd.js
-1.hunnk.js
-module 1.js
-module 2.js
実行結果
ブラウザでensure/index.を実行し、コンソール出力:
aa
module 2
bb
module 1
require-ensure-chunk
ソースコード
webpack.co nfig.ensure.chunnk.js
同上
module 2.js
同上
構築結果
命令行でwebpack--config webpack.co.nfig.ensure.jsを実行します。
-main.bundle.js
-example.amd.js
-1.hunnk.js
-module 1.js
-module 2.js
実行結果
ブラウザでensure/index.を実行し、コンソール出力:
aa
module 1
bb
ccc
1 module 2
dd
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
require-ensureとrequire-amdの違い:
require-amd
説明:AMD仕様のrequire関数と同じです。使用時にモジュール配列とコールバック関数を伝達します。モジュールは全部ダウンロードされて、全部実行された後、コールバック関数を実行します。
文法:require(dependencies:String[],[calback:function])
パラメータ
説明:require.ensureは必要な時に依存するモジュールをダウンロードします。パラメータ指定のモジュールは全部ダウンロードしました。(ダウンロードしたモジュールはまだ実行していません。)実行します。
パラメータで指定されたコールバック関数です。require.ensureはchunkを作成し、このchunkの名前を指定できます。このchunk名が既に存在しているなら、今回依存したモジュールを既に存在しているchunkに統合して、最後にこのchunkはwebpack構築時に単独でファイルを生成します。
文法:require.ensure(dependencies:String[],calback:function([require]),[chunkName:String])
注意点:requi.ensureのモジュールはダウンロードされても実行されません。レプリカ関数がrequire(モジュール名)を使用した場合にのみ、このモジュールは実行されます。
例
require-amd
ソースコード
webpack.co.nfig.amd.js
var path = require("path");
module.exports = {
entry: "./example.amd.js",
output: {
path: path.join(__dirname, "amd"),
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
}
};
example.amd.js
require(["./module1"], function(module1) {
console.log("aaa");
var module2 = require("./module2");
console.log("bbb");
});
module 1.js
console.log("module1");
module.exports = 1;
module 2.js
console.log("module2");
module.exports = 2;
構築結果命令行でwebpack--config webpack.co nfig.amd.jsを実行します。
-main.bundle.js
-example.amd.js
-1.hunnk.js
-module 1.js
-module 2.js
実行結果
ブラウザでamd/index.を実行し、コンソール出力:
module1
aaa
module2
bbb
require-ensureソースコード
webpack.co nfig.ensure.js
var path = require("path");
module.exports = {
entry: "./example.ensure.js",
output: {
path: path.join(__dirname, "ensure"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
}
};
example.ensure.js
require.ensure(["./module1"], function(require) {
console.log("aaa");
var module2 = require("./module2");
console.log("bbb");
require("./module1");
}, 'test');
module 1.js同上
module 2.js
同上
構築結果
命令行でwebpack--config webpack.co.nfig.ensure.jsを実行します。
-main.bundle.js
-example.amd.js
-1.hunnk.js
-module 1.js
-module 2.js
実行結果
ブラウザでensure/index.を実行し、コンソール出力:
aa
module 2
bb
module 1
require-ensure-chunk
ソースコード
webpack.co nfig.ensure.chunnk.js
var path = require("path");
module.exports = {
entry: "./example.ensur.chunk.js",
output: {
path: path.join(__dirname, "ensure-chunk"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
}
};
example.ensur.chunk.js
require.ensure(["./module1"], function(require) {
console.log("aaa");
require("./module1");
console.log("bbb");
}, 'common');
require.ensure(["./module2"], function(require) {
console.log("ccc");
require("./module2");
console.log("ddd");
}, 'common');
module 1.js同上
module 2.js
同上
構築結果
命令行でwebpack--config webpack.co.nfig.ensure.jsを実行します。
-main.bundle.js
-example.amd.js
-1.hunnk.js
-module 1.js
-module 2.js
実行結果
ブラウザでensure/index.を実行し、コンソール出力:
aa
module 1
bb
ccc
1 module 2
dd
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。