模块化构建工具（requirejs）

最新推荐文章于 2025-06-04 12:10:34 发布

lesrach

最新推荐文章于 2025-06-04 12:10:34 发布

阅读量660

点赞数

分类专栏：工具软件

工具软件专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用RequireJS优化前端项目中的JS文件加载流程。通过配置文件管理依赖关系，并利用define、require等API进行模块定义与加载。同时，对比了AMD、CMD与CommonJS等模块加载规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在日常的开发环境中，我们总是会引用到各种各样的外部的JS文件，有各种库，也有各个不同需求下的JS，如果我们把这一大堆乱七八糟的的JS代码依次写下来，不仅使得页面非常的难看，而且如果其中某些JS文件需要依赖到一些库或者其他的JS文件并且顺序写错的话就会报错，所以我们用到了requirejs来优化外部js文件的引入。

requirejs 是一个非常小巧的Javascript模块载入框架，其中的语法参照了Nodejs的语法，所以看起来有点相似，但实际区别还是很大的。

requirejs英文文档

菜鸟requirejs教程

一、使用

requirejs之中一共有3个API：define、require、requirejs，其中require = requirejs 。

define用作定义一个模块：

define(function(){
      funtion $(selector){
            return document.querySelectorAll(selector);
      }
})

require用作引用其他的模块，第一个参数为需要引用的模块，第二个参数是引用后需要执行的代码块。

require(["js/selector"],function($){
     console.log($("div"));
})

网络上面有很多的库都支持requirejs的使用（比如jQuery），但也有一些不支持，这个时候我们就需要对这些做一些设置。

新建一个设置文件config.js

require.config({
	baseUrl: "/",
	paths : {
		"jquery" : "lib/jquery/jquery-1.12.4.min",
		""fly" : "lib/jquery_plugins/jquery.fly.min",
		"template" : "lib/arttemplate/template-native",
	},
	shim : {
		"fly" : {
			deps : ["jquery"]
		}
	}
});

其中jquery和template模版引擎都支持requirejs，但依赖与JQ的fly组件不支持，所以需要在shim里面设置好fly的依赖文件。

这样加了设置文件后，主要用作处理页面操作的JS文件可以写作：

require(["config"], function(){
	require(["jquery", "template", "fly"], function($,  template){
		//代码区块
	});
});

而在HTML文件中引用时一句话就可以引用完毕：

<script src="js/require.js" data-main="js/index"></script>

二、不同的规范

现阶段的对模块定义的规范一般有三种，AMD ( requirejs )、CMD（seajs）、CommonJs。其中使用最多还是AMD规范，

AMD和CMD之间的区别具体可以参考CMD作者玉伯在知乎上面自己对于这两者区别的看法：AMD 和 CMD 的区别有哪些？