Introduction à cinq utilisations de require

Cet article présente principalement l'explication détaillée de webpack : les cinq utilisations de require, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

webpack Vous pouvez écrire la syntaxe de synchronisation require. au format commonjs, vous pouvez écrire la syntaxe de rappel require au format AMD, il y a aussi un require.ensure et le propre require.include défini par webpack, plus la syntaxe d'importation d'ES6, il y en a tellement ça ne va pas pour confondre les gens. Cet article triera les caractéristiques de ces exigences et les scénarios dans lesquels elles sont utilisées.

Syntaxe de synchronisation commonjs

La syntaxe de synchronisation commonjs classique est la suivante :

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

À ce stade Time Webpack regroupera a.js dans un fichier qui le référence. Il s’agit de la situation la plus courante et il n’est pas nécessaire d’entrer dans les détails.

chargement asynchrone commonjs

Il existe une spécification Modules/Async/A dans commonjs, qui définit la syntaxe require.ensure. Webpack l'implémente et sa fonction est de fragmenter le code lors de l'empaquetage et de charger le code fragmenté de manière asynchrone. L'utilisation est la suivante :

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

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

  list.show();

});

À ce stade, list.js sera regroupé dans un fichier de bloc séparé, qui peut ressembler à ceci :

1.fb874860b35831bc96a8

a une mauvaise lisibilité. J'ai également mentionné à la fin de l'article précédent que la façon de le nommer est de passer le troisième paramètre à require.ensure, tel que :

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

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

  list.show();

}, 'list');

De cette façon, vous pouvez obtenir le nom de fichier souhaité :

list.fb874860b35831bc96a8.js

Vous pouvez également transmettre un nom hiérarchique comme "question/list", afin que le webpack suive la hiérarchie crée des dossiers pour vous.

Il est à noter que si vous référencez plus de deux modules dans la fonction de require.ensure, webpack les empaquetera ensemble, comme par exemple :

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

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

  list.show();

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

  edit.display();

}, 'list_and_edit');

list.js et edit.js seront regroupés dans un seul fichier et nommé list_and_edit.js. Cela doit être mesuré en fonction de votre situation réelle. Si vous ne souhaitez pas les regrouper ensemble, vous ne pouvez écrire que deux require.ensure pour référencer respectivement ces deux fichiers.

Encore une chose, je n'aime pas ce genre de réflexion. Devoir prendre des décisions concernant l'emballage pendant la phase de codage viole évidemment le principe de séparation des tâches.

commonjs préchargement exécution paresseuse

Dans l'utilisation ci-dessus, nous avons passé un tableau vide au premier paramètre de require.ensure, ce qui est en fait acceptable ici La fonction du Le nom du module consiste à implémenter le préchargement et l'exécution paresseuse. L'utilisation est la suivante :

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

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

  list.show();

});

passe ['./list'] au premier paramètre de require.ensure Lorsqu'il est exécuté ici, list.js sera. Le navigateur le télécharge, mais il n'exécutera pas le code dans le module list.js, comme le dit le site officiel du webpack, et il ne l'évaluera pas. Lorsqu'il s'agit d'évaluer réellement, il s'agit de la phrase suivante var list = require('./list'); C'est ce qu'on appelle l'exécution paresseuse.

Plusieurs modules écrits en fonctions seront regroupés ensemble, ce qui n'est pas différent de ce qui précède. De plus, les modules écrits dans le tableau seront également empaquetés avec eux, que vous les exécutiez manuellement ou non.

Cette façon d'écrire est aussi un peu maladroite, comme une combinaison de commonjs et AMD, et un nom de module doit être écrit deux fois, ce qui n'est vraiment pas élégant. Webpack définit donc sa propre méthode pour implémenter le préchargement.

Le require.include fourni avec webpack

require.include est fourni par webpack lui-même. Il n'y a pas de spécification pour le backend, il joue donc un petit rôle. Il peut réaliser la fonction de préchargement ci-dessus sans écrire le module dans un tableau. L'utilisation est la suivante :

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

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

});

Selon le document du site officiel du webpack, require.include. a également une fonction consiste à extraire les parties publiques du sous-module dans le module parent. Par exemple, child1 et child2 font référence au module list.js. Ensuite, si list.js est inclus dans le parent, alors le contenu du sous-module. sera inclus. Le supprimer équivaut à le promouvoir au module parent. (La relation dite père-fils fait ici référence à la relation de référence)

Cette méthode a également été brièvement évoquée par le responsable. Elle semble être une chose inutile et de peu d'utilité. Parce que j'ai trouvé que la valeur de retour de require.include n'est pas définie, c'est-à-dire que si vous souhaitez utiliser le module, la posture est comme ceci :

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

Chargement asynchrone AMD

webpack prend en charge à la fois la spécification commonjs et la spécification AMD, ce qui signifie que la syntaxe classique d'AMD peut être utilisée normalement, telle que :

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

  list.show();

});

Bien sûr, s'il est écrit comme ceci, list.js sera également regroupé dans un fichier séparé. Semblable à ce qui précède, si vous écrivez plusieurs modules ici, ces modules seront regroupés dans un seul fichier, tel que :

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

  list.show();

  edit.display();

});

list.js et modifiés. seront emballés ensemble. La différence est que la méthode AMD ne peut pas transmettre le troisième paramètre comme nom de fichier, vous ne pouvez donc pas obtenir un fichier de bonne apparence.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!