Introduction to five uses of require

This article mainly introduces the detailed explanation of webpack and the five usages of require, which has certain reference value. Interested friends can refer to

webpack. You can write require synchronization syntax in commonjs format, you can write require callback syntax in AMD format, there is also a require.ensure, and webpack's own defined require.include, plus the import syntax of ES6, there are so many It's not going to confuse people. This article will sort out the characteristics of these requirements and the scenarios in which they are used.

commonjs synchronization syntax

The classic commonjs synchronization syntax is as follows:

##

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

At this time webpack will .js is packaged into a file that

references it. This is the most common situation and there is no need to go into details.

commonjs asynchronous loading

There is a

Modules/Async/A specification in commonjs, which defines the require.ensure syntax. Webpack implements it, and its function is to fragment the code during packaging and load the fragmented code asynchronously. The usage is as follows:

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

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

  list.show();

});

At this time list.js will be packaged into a separate chunk file, which may look like this:

1.fb874860b35831bc96a8.js

The readability is relatively poor. I also mentioned at the end of the previous article that the way to name it is to pass the third parameter to require.ensure, such as:

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

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

  list.show();

}, 'list');

You can get the file name you want:

list.fb874860b35831bc96a8.js

You can also pass in a hierarchical name like "question/list", so that webpack will give it according to the hierarchical level. You create folders.

It should be noted that if you reference more than two modules in the

function of require.ensure, webpack will package them together, such as:

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

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

  list.show();

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

  edit.display();

}, 'list_and_edit');

list.js and edit.js will be packaged into one file and named list_and_edit.js. This needs to be measured based on your actual situation. If you don't want to package them together, you can only write two require.ensure to reference these two files respectively.

One more thing, I actually dislike this kind of thinking. Having to make decisions about packaging during the coding stage obviously violates the principle of separation of duties.

commonjs preloading lazy execution

In the above usage, we passed an empty array to the first parameter of require.ensure, which is actually acceptable here. The function of the module name is to implement preloading and lazy execution. The usage is as follows:

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

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

  list.show();

});

Pass ['./list'] to the first parameter of require.ensure. When executing here, list.js will be deleted by the browser. After downloading, the code in the list.js module will not be executed, which is what the webpack official website says, and it will not be evaluated. When it comes to actually evaluating, it comes to the following sentence var list = require('./list'); This is the so-called lazy execution.

Multiple modules written in functions will be packaged together, which is no different from the above. In addition, modules written in the array will also be packaged with them, regardless of whether you execute them manually.

This way of writing is also a bit awkward, like a combination of commonjs and AMD, and a module name has to be written twice, which is really not elegant enough. So webpack defines a method of its own to implement preloading.

The require.include that comes with webpack

require.include is provided by webpack itself. There is no specification for the backend, so it plays a small role. It can achieve the above preloading function without writing the module in an array. The usage is as follows:

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

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

});

According to the webpack official website documentation, require.include also has another function It can extract the common parts in the sub-module into the parent module. For example, both child1 and child2 refer to the list.js module. Then if list.js is included in the parent, the sub-module will be deleted. , which is equivalent to being promoted to the parent module. (The so-called father-son relationship here refers to the reference relationship)

This method has also been briefly mentioned by the official. It seems to be a useless thing and of little use. Because I found that the return value of require.include is undefined, that is to say, if you want to use the module, the posture is like this:

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

AMD Asynchronous Loading

webpack supports both commonjs specifications and AMD specifications, which means that AMD’s classic syntax can be used normally, such as:

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

  list.show();

});

Of course, if written like this, list.js will also be packaged into a separate file. Similar to the above, if you write multiple modules here, then these modules will be packaged into one file, such as:

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

  list.show();

  edit.display();

});

list.js and edit.js will being packaged together. The difference is that AMD's method cannot pass in the third parameter as the file name, so you cannot get a good-looking file.

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

The above is the detailed content of Introduction to five uses of require. For more information, please follow other related articles on the PHP Chinese website!