Einführung in fünf Verwendungsmöglichkeiten von require

In diesem Artikel wird hauptsächlich die detaillierte Erklärung von require vorgestellt, die einen bestimmten Referenzwert hat. Sie können sich auf die

Webpack-Syntax beziehen Im CommonJS-Format können Sie die Callback-Syntax „require“ im AMD-Format schreiben, es gibt auch „require.ensure“ und das von Webpack selbst definierte „require.include“ sowie die Importsyntax von ES6, es gibt so viele. Es geht nicht um die Leute zu verwirren. In diesem Artikel werden die Merkmale dieser Anforderungen und die Szenarien, in denen sie verwendet werden, erläutert.

CommonJS-Synchronisationssyntax

Die klassische CommonJS-Synchronisationssyntax lautet wie folgt:

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

Hier Zeit wird Webpack a.js in eine Datei packen, die darauf referenziert. Dies ist die häufigste Situation und es besteht keine Notwendigkeit, auf Einzelheiten einzugehen.

Asynchrones Laden von commonjs

Es gibt eine Modules/Async/A-Spezifikation in commonjs, die die require.ensure-Syntax definiert. Webpack implementiert es und seine Funktion besteht darin, den Code während des Packens zu fragmentieren und den fragmentierten Code asynchron zu laden. Die Verwendung ist wie folgt:

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

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

  list.show();

});

Zu diesem Zeitpunkt wird list.js in eine separate Blockdatei gepackt, die wie folgt aussehen kann:

1.fb874860b35831bc96a8. js

ist schlecht lesbar. Ich habe am Ende des vorherigen Artikels auch erwähnt, dass die Benennung darin besteht, den dritten Parameter an require.ensure zu übergeben, wie zum Beispiel:

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

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

  list.show();

}, 'list');

Auf diese Weise können Sie den gewünschten Dateinamen erhalten:

list.fb874860b35831bc96a8.js

Sie können auch einen hierarchischen Namen wie „Frage/Liste“ übergeben, damit das Webpack der Hierarchie folgt erstellt Ordner für Sie.

Es ist zu beachten, dass Webpack, wenn Sie in der Funktion von require.ensure auf mehr als zwei Module verweisen, diese zusammenpackt, z. B.:

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

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

  list.show();

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

  edit.display();

}, 'list_and_edit');

list.js und edit.js werden in eine Datei gepackt und mit dem Namen list_and_edit.js benannt. Dies muss anhand Ihrer tatsächlichen Situation gemessen werden. Wenn Sie sie nicht zusammenpacken möchten, können Sie nur zwei Anforderungen schreiben. Stellen Sie sicher, dass auf diese beiden Dateien verwiesen wird.

Noch etwas: Ich mag diese Art des Denkens eigentlich nicht. Entscheidungen über die Verpackung während der Codierungsphase treffen zu müssen, verstößt offensichtlich gegen den Grundsatz der Funktionstrennung.

commonjs lädt verzögerte Ausführung vor

In der obigen Verwendung haben wir ein leeres Array an den ersten Parameter von require.ensure übergeben, was hier tatsächlich akzeptabel ist. Die Funktion des Der Modulname dient dazu, das Vorladen und die verzögerte Ausführung zu implementieren. Die Verwendung ist wie folgt:

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

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

  list.show();

});

übergibt ['./list'] an den ersten Parameter von require.ensure. Bei der Ausführung wird list.js verwendet Der Browser lädt es herunter, führt jedoch den Code im list.js-Modul nicht aus, wie auf der offiziellen Webpack-Website angegeben, und führt keine Auswertung durch. Wenn es um die eigentliche Auswertung geht, kommt es zu folgendem Satz: var list = require('./list'); Dies ist die sogenannte Lazy Execution.

Mehrere in Funktionen geschriebene Module werden zusammengepackt, was sich nicht von den oben genannten unterscheidet. Darüber hinaus werden auch in das Array geschriebene Module mitgepackt, unabhängig davon, ob Sie sie manuell ausführen.

Diese Schreibweise ist auch etwas umständlich, wie eine Kombination aus CommonJS und AMD, und ein Modulname muss zweimal geschrieben werden, was wirklich nicht elegant ist. Daher definiert Webpack eine eigene Methode zum Implementieren des Vorladens.

Require.include, das mit dem Webpack geliefert wird

require.include wird vom Webpack selbst bereitgestellt. Es gibt keine Spezifikation für das Backend, daher spielt es eine kleine Rolle. Die obige Vorladefunktion kann erreicht werden, ohne das Modul in ein Array zu schreiben. Die Verwendung ist wie folgt:

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

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

});

Gemäß dem offiziellen Webpack-Website-Dokument ist require.include hat auch Eine Funktion besteht darin, die gemeinsamen Teile im Untermodul in das übergeordnete Modul zu extrahieren. Beispielsweise verweisen sowohl child1 als auch child2 auf das list.js-Modul. Wenn list.js dann im übergeordneten Modul enthalten ist. Das Löschen des Moduls entspricht der Heraufstufung in das übergeordnete Modul. (Die sogenannte Vater-Sohn-Beziehung bezieht sich hier auf die Referenzbeziehung)

Diese Methode wurde vom Beamten auch kurz erwähnt. Sie scheint eine nutzlose Sache und von geringem Nutzen zu sein. Weil ich festgestellt habe, dass der Rückgabewert von require.include undefiniert ist. Wenn Sie also das Modul verwenden möchten, sieht die Haltung wie folgt aus:

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

AMD async Loading

Webpack unterstützt sowohl die CommonJS-Spezifikation als auch die AMD-Spezifikation, was bedeutet, dass die klassische Syntax von AMD normal verwendet werden kann, wie zum Beispiel:

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

  list.show();

});

Wenn list.js so geschrieben wird, wird es natürlich auch in eine separate Datei gepackt. Ähnlich wie oben: Wenn Sie hier mehrere Module schreiben, werden diese Module in eine Datei gepackt, z. B.:

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

  list.show();

  edit.display();

});

list.js und edit js werden zusammen verpackt. Der Unterschied besteht darin, dass die AMD-Methode den dritten Parameter nicht als Dateinamen übergeben kann, sodass Sie keine gut aussehende Datei erhalten können.

ES6-Import

这年头不用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以模块为核心的打包方式的特点吧，仁者见仁，只要团队内做一个约定，也不会打的一塌糊涂。

Das obige ist der detaillierte Inhalt vonEinführung in fünf Verwendungsmöglichkeiten von require. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!