javascript - 如何优化作为 RequireJS 模块创建的 JavaScript 文件子集

Question

我有一个单页 Web 应用程序，它使用 RequireJS 来组织和构建 JavaScript 代码。 在应用程序内部，我有一些 JS 文件，我想使用 r.js 对其进行优化，因为它们属于将由我的客户使用的 API。所以，我只想优化这些文件并保持其余代码不变。

这是我的应用程序结构:

• 应用程序
  • main.js
  • 许多其他文件和文件夹
• 脚本
  • 我的API
    • app.js
    • 许多其他文件和文件夹
  • require.js
  • jquery.js
  • build.js
• index.htm

所有 JavaScript 代码都位于 app 和 scripts 文件夹下。正如我之前提到的，所有这些文件都被定义为 RequireJS 模块。这是 main.js 现在的样子:

require.config({
    baseUrl: 'scripts',
    paths: {
        base: 'myAPI/base',
        proxy: 'myAPI/proxyObject',
        localization: 'myAPI/localization',
        app: '../app',
    }

});
require(['myAPI/app'],
    function (app) {
        //app.init....
    }
);

如您所见，在路径配置中，我定义了一些指向myAPI(我要优化的文件夹)的别名。

这就是我从 index.htm 文件引用 RequireJS 的方式:

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

这是我为 r.js 创建的构建文件 (scripts/build.js):

({
   baseUrl: '.',
   out: 'build/myAPI.js',

   name: 'myAPI/app',
   include: ['some modules'],
   excludeShallow: ['some modules defined in the app folder'],

   mainConfigFile: '../app/main.js',
   optimize: 'uglify2',
   optimizeCss: 'none'
})

优化文件已生成，但我在尝试使用它时遇到一些挑战:

1. 如何从应用中引用该文件？
2. 对 myAPI 模块的依赖性现在已被破坏。 RequireJS 找不到 myAPI 中定义的模块。
3. 如何才能使 require.config.paths 中定义的别名保持正常工作？

对于这种情况，您能帮我提供一些建议或反馈吗？

谢谢!!

Answer 1

经过研究，我可以解决我的问题。我的解决方案基于 James Burke 创建的这个 Github 项目:https://github.com/requirejs/example-libglobal .

首先，我必须删除对 myAPI 各个模块的所有依赖项，并创建一个集中对任何内部依赖项的访问的对象。然后，我创建了一个 r.js 脚本来为 myAPI 生成单个文件。该文件将被其他 JS 文件使用。该单个文件可以作为全局对象或 AMD 模块进行引用，如 James Burke 在 Github 项目中所示。

不再需要 require.config.paths 中定义的别名。