简介
在前端开发中，模块化是一个普遍存在的需求。而 AMD（Asynchronous Module Definition）是一种常用的模块化规范。针对 AMD 规范产生的 gulp-amd-dependency 插件能够自动解析代码中的依赖关系，实现模块化的打包和压缩。
安装
在项目中执行以下命令进行安装：
npm install gulp-amd-dependency --save-dev
使用
基本配置
gulp-amd-dependency 插件提供了一个 amdRequire 方法可以自动解析 AMD 模块的依赖关系，推荐在 gulpfile.js 文件中使用该方法。首先，我们需要创建一个 gulpfile.js 文件，然后进行基本的配置。
const gulp = require('gulp');
const amdDependency = require('gulp-amd-dependency');
gulp.task('scripts', function() {
return gulp.src('./src/**/*.js')
.pipe(amdDependency())
.pipe(gulp.dest('./dist'));
});上述代码定义了一个名为 scripts 的任务，在该任务中，我们读取了 ./src/**/*.js 目录下的所有 JS 文件，然后调用 amdDependency 方法，最后将结果输出至 ./dist 目录下。为了测试该方法，我们先创建一个简单的示例文件。
// ./src/app.js
define(['module1', 'module2'], function(module1, module2) {
console.log(module1, module2);
});// ./src/module1.js
define([], function() {
return 'module1';
});// ./src/module2.js
define([], function() {
return 'module2';
});在执行 gulp scripts 命令后，我们会发现在 ./dist 目录下生成了三个文件，其内容如下：
// ./dist/module1.js
define([], function() {
return 'module1';
});// ./dist/module2.js
define([], function() {
return 'module2';
});// ./dist/app.js
define('app', ['module1', 'module2'], function(module1, module2) {
console.log(module1, module2);
});参数配置
在默认情况下，amdDependency 方法会按照模块名的字典序进行排序。当模块名复杂时就会存在问题。此时可以使用参数进行自定义配置。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------- - -------------------------------
-------------------- ---------- -
------ -------------------------
---------------------
------- -------
-------- --------
----- ----------- -- -
--- --- - -
--------- --
---------- --
------- -
--
------ ------- -- ----------------- - ------- -- ------------------
-
---
---------------------------
---上述代码中，我们通过配置 prefix 参数使得所有文件都在 app/ 的命名空间下，配置 baseDir 参数指定源码根目录，配置 sort 参数可以自定义排序规则。在这里我们指定了 jquery 和 angular 模块的优先级，使得它们排在最前面，再按照字典序进行排序。
总结
gulp-amd-dependency 插件是一款解析 AMD 模块依赖的插件，支持自定义参数，可以使我们在前端开发中更加方便地进行模块化开发和打包压缩。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71100