webpack中require的用法

最新推荐文章于 2024-06-04 23:25:11 发布

zhanglir333

最新推荐文章于 2024-06-04 23:25:11 发布

阅读量2.7k

点赞数

分类专栏： webpack 文章标签： webpack require

本文链接：https://blog.csdn.net/zhanglir333/article/details/78343488

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、require() 的基本用法

分析源码之前，先介绍 require 语句的内部逻辑。如果你只想了解 require 的用法，只看这一段就够了。

下面的内容翻译自《Node使用手册》。

当 Node 遇到 require(X) 时，按下面的顺序处理。

（1）如果 X 是内置模块（比如 require('http'）)
　　a. 返回该模块。
　　b. 不再继续执行。

（2）如果 X 以 "./" 或者 "/" 或者 "../" 开头
　　a. 根据 X 所在的父模块，确定 X 的绝对路径。
　　b. 将 X 当成文件，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。

X
X.js
X.json
X.node

　　c. 将 X 当成目录，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。

X/package.json（main字段）
X/index.js
X/index.json
X/index.node

（3）如果 X 不带路径
　　a. 根据 X 所在的父模块，确定 X 可能的安装目录。
　　b. 依次在每个目录中，将 X 当成文件名或目录名加载。

（4）抛出 "not found"

请看一个例子。

当前脚本文件 /home/ry/projects/foo.js 执行了 require('bar') ，这属于上面的第三种情况。Node 内部运行过程如下。

首先，确定 x 的绝对路径可能是下面这些位置，依次搜索每一个目录。


/home/ry/projects/node_modules/bar
/home/ry/node_modules/bar
/home/node_modules/bar
/node_modules/bar

搜索时，Node 先将 bar 当成文件名，依次尝试加载下面这些文件，只要有一个成功就返回。


bar
bar.js
bar.json
bar.node

如果都不成功，说明 bar 可能是目录名，于是依次尝试加载下面这些文件。


bar/package.json（main字段）
bar/index.js
bar/index.json
bar/index.node

如果在所有目录中，都无法找到 bar 对应的文件或目录，就抛出一个错误。

二·webpack中可以写commonjs格式的require同步语法，可以写AMD格式的require回调语法，还有一个require.ensure，以及webpack自己定义的require.include，再加上ES6的import语法，下面梳理一下这些require各自的特点，以及都在什么场景下使用。

commonjs同步语法

经典的commonjs同步语法如下：

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

此时webpack会将a.js打包进引用它的文件中。这是最普遍的情形，不必赘述。

commonjs异步加载

在commonjs中有一个Modules/Async/A规范，里面定义了require.ensure语法。webpack实现了它，作用是可以在打包的时候进行代码分片，并异步加载分片后的代码。用法如下：

 
         require.ensure([], function(require){ 
        
         var  
         list = require( 
         './list' 
         ); 
        
         list.show(); 
        
         });

此时list.js会被打包成一个单独的chunk文件，大概长这样：

1.fb874860b35831bc96a8.js

可读性比较差。我在上一篇结尾也提到了，给它命名的方式，那就是给require.ensure传递第三个参数，如：

 
         require.ensure([], function(require){ 
        
         var  
         list = require( 
         './list' 
         ); 
        
         list.show(); 
        
         },  
         'list' 
         );

这样就能得到你想要的文件名称：

list.fb874860b35831bc96a8.js

你也可以传入像"question/list"这样带层级的名字，这样webpack会按照层级给你创建文件夹。

需要注意的是，如果你在require.ensure的函数中引用了两个以上的模块，webpack会把它们打包在一起，比如：

 
         require.ensure([], function(require){ 
        
         var  
         list = require( 
         './list' 
         ); 
        
         list.show(); 
        
         var  
         edit = require( 
         './edit' 
         ); 
        
         edit.display(); 
        
         },  
         'list_and_edit' 
         );

list.js和edit.js将会被打包成一个文件，并命名为list_and_edit.js。这就需要根据你的实际情况来衡量了，如果你不希望打包在一起，只能写两个require.ensure分别引用这两个文件。

多说一句，这种思维其实我是很不喜欢的，在编码阶段却要对打包的事情做出决策，明显违背了职责分离原则。

commonjs预加载懒执行

在上面的用法中，我们给require.ensure的第一个参数传了空数组，实际上这里是可以接收模块名称的，作用就是实现预加载懒执行。用法如下：

 
         require.ensure([ 
         './list' 
         ], function(require){ 
        
         var  
         list = require( 
         './list' 
         ); 
        
         list.show(); 
        
         });

给require.ensure的第一个参数传了['./list']，执行到这里的时候list.js会被浏览器下载下来，但是并不会执行list.js模块中的代码，也就是webpack官网说的，不会进行evaluate。真正进行evaluate的时候是到了后面这句var list = require('./list');这就是所谓的懒执行。

写在函数中的多个模块会被打包在一起，这一点和上面没有区别。另外，写在数组中的模块也会跟他们打包在一起，不管你有没有手动执行。

这种写法也是有点别扭的，像是commonjs和AMD的结合体，而且一个模块名称还要写两次，真是不够优雅。所以webpack自己定义了一个方法，能够实现预加载。

webpack自带的require.include

require.include是webpack自己提供的，并没有什么规范做后台，所以是个小角色。它可以实现上面是预加载功能，而不用把模块写在数组中，用法如下：

 
         require.ensure([], function(require){ 
        
         require.include( 
         './list' 
         ); 
         //此处只加载不执行 
        
         });

据webpack官网文档介绍，require.include还有一个作用是能把子模块中的公共部分，提取到父模块中，比如child1和child2都引用了list.js这个模块，那么如果在parent中include了list.js，那么子模块中的就会被删掉，相当于提升到了父模块中。（这里所谓的父子关系是指引用关系）

这个方法官方也是一笔带过，看来也是一个鸡肋的东西，用处不大。因为我发现require.include的返回值是undefined，也就是说，如果你想使用模块，姿势是这样的：

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

AMD异步加载

webpack既支持commonjs规范也支持AMD规范，这就意味着AMD的经典语法是可以正常使用的，如：

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

当然，这样写的话list.js也是被单独打包成一个文件的。与上面类似，如果你在这里写了多个模块，那么这些模块都会被打包成一个文件，如：

 
         require([ 
         './list' 
         ,  
         './edit' 
         ], function(list, edit){ 
        
         list.show(); 
        
         edit.display(); 
        
         });

list.js和edit.js会被打包在一起。不同的是，AMD的方式无法传入第三个参数当文件名，所以得不到很好看的文件。

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' 
         ); 
        
         });