require の 5 つの使い方の紹介

この記事では主に webpack の詳細な説明と require の 5 つの使用法を紹介します。興味のある方は参考にしてください。webpack では、commonjs 形式の require 同期構文を記述することができます。 format require コールバック構文、require.ensure、および webpack 独自に定義された require.

include

もあり、ES6 インポート構文と組み合わされるため、多くのことが人々を混乱させます。この記事では、これらの要件の特徴と、それらが使用されるシナリオを整理します。

commonjs同期構文

古典的なcommonjs同期構文は次のとおりです:

var a = require('./a');
a.show();

この時点で、webpackはa.jsを

参照するファイルにパッケージ化します

。これは最も一般的な状況であり、詳細に説明する必要はありません。

commonjs の非同期読み込み

commonjs には、require.ensure 構文を定義する

Module

s/Async/A 仕様があります。 Webpack はこれを実装しており、その機能はパッケージ化中にコードを断片化し、断片化されたコードを非同期にロードすることです。使用法は次のとおりです:

require.ensure([], function(require){

  var list = require('./list');

  list.show();

});

この時点で、list.js は次のような別のチャンク ファイルにパッケージ化されます:

1.fb874860b35831bc96a8.js

可読性は比較的悪いです。また、前の記事の最後で、名前を付ける方法は、次のような 3 番目のパラメーターを require.ensure に渡すことであると述べました。

list.fb874860b35831bc96a8.js

「question/list」のような階層名を渡すこともできるので、webpack は階層に従ってフォルダーを作成します。

require.ensure の

function

で 3 つ以上のモジュールを参照する場合、webpack はそれらをまとめてパッケージ化します。例:

require.ensure([], function(require){

  var list = require('./list');

  list.show();

}, 'list');

list.js と edit.js は次のようになります。ファイルにパッケージ化され、list_and_edit.js という名前が付けられます。これは、実際の状況に基づいて判断する必要があります。これらを一緒にパッケージ化したくない場合は、これら 2 つのファイルをそれぞれ参照する 2 つの require.ensure を記述するだけです。

もう 1 つ、私はこの種の考え方が実は嫌いです。コーディング段階でパッケージ化について決定しなければならないのは、明らかに職務分離の原則に違反しています。

commonjs のプリロードと遅延実行

上記の使用法では、require.ensure の最初のパラメーターに空の配列を渡しました。実際には、ここでモジュール名を受け取ることができ、その機能はプリロードと遅延実行を実装することです。実行。使い方は以下の通りです:

require.ensure([], function(require){

  var list = require('./list');

  list.show();

  var edit = require('./edit');

  edit.display();

}, 'list_and_edit');

はrequire.ensureの第一引数に['./list']を渡します。ここで実行するとブラウザでlist.jsがダウンロードされますが、リストは実行されません。 . js モジュール内のコード (webpack 公式 Web サイトに記載されている内容) は評価されません。実際に評価すると次のような文になります var list = require('./list'); これがいわゆる遅延実行です。

関数で書かれた複数のモジュールは一緒にパッケージ化されますが、これは上記と変わりません。さらに、手動で実行するかどうかに関係なく、配列に書き込まれたモジュールもパッケージ化されます。

この書き方も、commonjs と AMD を組み合わせたような少しぎこちないもので、モジュール名を 2 回書かなければならず、あまりエレガントではありません。そのため、webpack はプリロードを実装するための独自のメソッドを定義します。

webpack に付属する require.include

require.include は webpack 自体によって提供されるため、バックエンドの仕様はありません。そのため、小さな役割を果たします。モジュールを配列に書かずに上記のプリロード機能を実現できます。 使い方は以下の通りです。

require.ensure(['./list'], function(require){

  var list = require('./list');

  list.show();

});

webpack公式サイトのドキュメントによると、require.includeにはサブモジュールの公開部分をロードする機能もあります。たとえば、child1 と child2 の両方が list.js モジュールを参照している場合、子モジュールのコンテンツは削除されます。これは、子モジュールに昇格することと同じです。親モジュール。 (ここで言ういわゆる父子関係とは参照関係のことです)

この方法は公式でも簡単に言及されていますが、無駄であまり役に立たないようです。 require.include の戻り値が未定義であることがわかったので、つまりモジュールを使用したい場合は次のようになります:

require.ensure([], function(require){

  require.include('./list');//此处只加载不执行

});

AMD 非同期読み込み

webpack は commonjs の両方をサポートしますこれは、次のような AMD の古典的な構文が通常に使用できることを意味します。

require.ensure([], function(require){
  require.include('./preview'); //加载
  let p = require('./preview'); //执行
  p.getUrl(); //使用
}, 'pre');

もちろん、このように記述すると、list.js も別のファイルにパッケージ化されます。上記と同様に、ここで複数のモジュールを記述すると、これらのモジュールは 1 つのファイルにパッケージ化されます (例:

require(['./list'], function(list){

  list.show();

});

list.js と edit.js が一緒にパッケージ化されます)。違いは、AMD のメソッドでは 3 番目のパラメーターをファイル名として渡すことができないため、見栄えの良いファイルを取得できないことです。

ES6インポート

这年头不用ES6都不好意思跟人打招呼。所以我们的代码中，又会多一种模块引入语法，那就是import。import会被转化为commonjs格式或者是AMD格式，所以不要把它认为是一种新的模块引用方式。babel默认会把ES6的模块转化为commonjs规范的，你也不用费劲再把它转成AMD了。

所以如下写法是等价的：

import list from './list';

//等价于

var list = require('./list');

不过这两种写法只需选一种，避免在代码中同时使用两种，否则会造成混淆。

总结

以上把require的用法捋了一遍，明白了各自用法的区别之后，我们就可以在项目中进行选择了。我觉得最佳选择是往commonjs方向靠拢，想尝试ES6的话就用import代替commonjs同步语法即可。

因此，代码中保持以下两种风格就好：

//可打包在一起的同步代码，使用import语法

import list from './list';

 

//需要独立打包、异步加载的代码，使用require.ensure

require.ensure([], function(require){

  var list = require('./list');

});

很显然，你在写代码的时候还是需要对打包结果进行决策，这是我不喜欢webpack的原因。gulp那样多好，编码就是编码，编译就是编译，分开来。不过这就是webpack以模块为核心的打包方式的特点吧，仁者见仁，只要团队内做一个约定，也不会打的一塌糊涂。

以上がrequire の 5 つの使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。