什么是 gobble-requirejs？
gobble-requirejs 是一个基于 gobble 构建系统的插件，它可以把 RequireJS 模块打包成单个文件，并且还支持压缩、优化等功能。
安装 gobble-requirejs
安装 gobble-requirejs 可以通过 npm 命令：
npm install gobble-requirejs --save-dev
使用 gobble-requirejs
创建 gobblefile.js 文件
在项目根目录下创建 gobblefile.js 文件，这个文件是 gobble 的配置文件，用于描述构建流程。
-- -------------------- ---- -------
-- -------------
----- ------ - ------------------
----- --------------- - ----------------------------
-------------- - ---------------
-------------------------- -
------- - ----- - -
--
--------------------------- -
------ ----------
-------- ------
------ -
------- ---------
------- --------
-
--
----------------------------- -
---- ---------
--
----------------上面的代码中，我们使用了 3 个插件，分别是 gobble-buble（用于编译 ES6+ 代码）、gobble-requirejs 和 gobble-uglifyjs（用于压缩代码）。我们还指定了原始文件夹为 src，输出文件夹为 dist。
创建入口文件
在 src 文件夹下创建 main.js 文件，这个文件就是我们的入口文件，它定义了我们的项目需要加载的模块。
// src/main.js
require(['jquery', 'lodash'], function ($, _) {
console.log('jQuery version: ' + $.fn.jquery);
console.log('lodash version: ' + _.VERSION);
});上面的代码中，我们使用了 RequireJS 的 require 函数来加载 jQuery 和 Lodash 模块，并且输出它们的版本信息。
构建项目
在项目根目录下执行 npm run build 命令，便可以进行构建：
// package.json
{
"scripts": {
"build": "gobble"
}
}构建完成后，会在 dist 文件夹下生成一个 main.js 和一个 main.min.js 文件。其中，main.min.js 是已经压缩过的文件。
在 HTML 中使用单个文件
我们可以在 HTML 中引入单个文件 main.min.js，如下所示：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------------------- ------- ------ ------- -------------------------------- ------- -------
这个 HTML 文件会加载 main.min.js 文件，并且输出版本信息。
总结
gobble-requirejs 插件可以帮助我们打包出单个文件，并且还支持压缩、优化等功能。在使用中，我们需要创建 gobblefile.js 文件来配置构建流程，以及创建入口文件 main.js 来定义项目需要加载的模块。此外，我们还可以在 HTML 文件中引用单个文件来加载我们的项目代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e6f255dee6beeee7457