requirejs.config配置paths的时候,配置目录和配置文件的区别

假设我们的项目结构如下:

index.html
main.js
libs
	--haha.js
	--cores
		--cores1.js
		--core2.js
	--utils
		--util1.js
		--util2.js
	--services
		--service1.js
		--service2.js 

如果项目规模比较大,那么js文件将会非常多,通常我们会按照目录进行组织和分组。在上面的代码中如果我们想使用core1.js、core2.js、util1.js、util2.js、service1.js、service2.js这6个模块。那么我可以在main.js中做如下配置:

requirejs.config({
    baseUrl: 'libs',
    paths: {
        "core1": 'cores/core1',
        "core2": 'cores/core2',
        "util1": 'utils/util1',
        "util2": 'utils/util2',
        "service1": 'services/service1',
        "service2": 'services/service2',
    }
});

require(["core1","core2","util1","util2","service1","service2"], function() {
    
	var core1 = require("core1");
	var core2 = require("core2");
	var util1 = require("util1");
	var util2 = require("util2");
	var service1 = require("service1");
	var service2 = require("service2");

});

通过在paths中配置每个一个模块的模块id和文件路径的映射关系,requirejs能够正确的加载我们需要的模块。当js文件非常多的时候,这种配置方式显然非常繁琐,配置的工作量会非常大。


我们也可以使用下面配置目录的方式,来加载需要的模块。

requirejs.config({
    baseUrl: 'libs',
    paths: {
        "cores": 'cores',
        "utils": 'utils',
        "services": 'services'
    }
});

require(["cores/core1","cores/core2","utils/util1","utils/util2","services/service1","services/service2"], function() {
    
	var core1 = require("cores/core1");
	var core2 = require("cores/core2");
	var util1 = require("utils/util1");
	var util2 = require("utils/util2");
	var service1 = require("services/service1");
	var service2 = require("services/service2");

});
可以看到通过这种配置目录的方式,能够大大减少paths中配置项的数量。假如我们的core2.js依赖于模块util1.js,使用配置文件和配置目录的方式,core2.js代码如下:

//在main.js中配置了文件,要求一定要配置util1到模块文件的映射
define(["util1"],function(util) {  
	
	return {name:"haha:"+util.name};

});  

//在main.js中配置了目录,只需配置utils目录的映射即可
define(["utils/util1"],function(util) {  
	return {name:"haha:"+util.name};
}); 


可以看到配置目录的好处在于:不需要在main.js中配置每一个模块id和模块js文件的映射关系,能够减少main.js中配置的数量。配置文件的好处在于:模块id更加简单,"core1"显然比"cores/core1"更加简短。


再看下
面这段代码,如果将"cores/core1"当做是一个模块的名字,那么下面代码加载的将是haha.js;如果将"cores/core1"当成是目录+文件名,那么加载的将是core1.js。那requirejs加载的到底是哪儿一个js呢?

requirejs.config({
    baseUrl: 'libs',
    paths: {
        "cores": 'cores',
        "utils": 'utils',
        "services": 'services',
	"cores/core1":"haha"
    }
});

require(["cores/core1","cores/core2","utils/util1","utils/util2","services/service1","services/service2"], function() {
    
	var core1 = require("cores/core1");
	alert(core1.name);
	
});

很容易验证:"cores/core1"被当成是一个模块的名字,加载的是haha.js而不是core1.js。


现在我们可以总结下,requirejs是如何加载"path/module"这种格式的模块了。

1.首先看requirejs.config()中paths是否配置了"path/module"这个配置项。如果配置了,"path/module"会被认为是一个普通的模块名。如果没有配置,那么执行第二步。

2.将"path/module"看成是文件系统上的路径,通过目录和文件名来确定需要加载的模块。如果仍然没有找到,那么requirejs会报错。


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。