javascript - 如何在构建期间不创建 404/不匹配匿名模块的情况下在 amd 兼容性检查中声明依赖项？

Question

我正在努力使用以下 AMD 兼容性设置向我的应用程序添加插件:

有问题的 foo.js 片段:

(function (dependencies, module) {
  "use strict";
  if (typeof define === 'function' && define.amd) {
    return define(dependencies, module);
  }
  if (typeof exports === 'object') {
    return module(exports);
  }
  window.foo = {};
  module(window.foo, {hex_sha256: hex_sha256});
}(['exports', 'sha256'], function (exports, sha256) {

 // foo

 }));

我将 foo 设置为另一个名为 bar 的模块的依赖项，如下所示:

define(["jquery", "foo", "sha256", "c", "d"], function() {
   // stuff
});

在 r.js 优化器中，我将 bar 定义为:

  {
      name: "bar"
    , include: ["foo", "sha256", "c", "d"]
    , exclude: ["jquery"]
  },

这会生成包含上述文件的 bar.js 文件。

然而，当我加载我构建的应用程序时，仍然有两个请求被触发到 foo.js 和 sha256.js，它们都是 404(优化器清理构建文件)以及我的 bar.js 构建层中的人员。

问题:
我对模块 amd check 有点迷茫，我怀疑它是造成不受欢迎的电话的原因。谁能阐明我应该在 AMD 检查中修改哪些内容，以便在构建层内制作 foo 可调用表单？

谢谢!

编辑:
我试过 shimming 像这样:

shim: {
  'foo':              { deps: ['sha256'] }
},

它处理 404，但返回:

Mismatched anonymous define() module: function (exports, sha256) {....

错误，所以我仍然假设我的 AMD 检查中对 sha256 的硬编码依赖是罪魁祸首。也许这有帮助。

编辑:
我很确定我的问题源于 AMD 兼容性检查中的依赖声明。

Answer 1

下面的两个解决方案需要修改foo 的源代码。由于您可以控制它，因此它们都是可行的:

1. (快速而肮脏)在定义调用中对模块名称进行硬编码:

   // foo.js
   if (typeof define === 'function' && define.amd) {
       return define("foo", dependencies, module);
   }
   

2. (Cleaner) 查看 Knockout.js 的代码一开始。我在一个项目中使用它，它似乎与 r.js 编译得很好。我尝试了一个像您一样的简单项目设置，并且可以正常工作；所以你必须按如下方式替换 AMD 兼容性代码:

   (function(factory) {
       // Support three module loading scenarios
       if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
           // [1] CommonJS/Node.js
           var target = module['exports'] || exports; // module.exports is for Node.js
           var hex_sha256 = require("sha256");
           factory(target, hex_sha256);
       } else if (typeof define === 'function' && define['amd']) {
           // [2] AMD anonymous module
           define(['exports','sha256'], factory);
       } else {
           // [3] No module loader (plain <script> tag) - put directly in global namespace
           factory(window['foo'] = {}, hex_sha256);
       }
   }(function(exports, sha256){
   
       // same foo
   
   }));
   

我不知道 r.js 内部发生了什么魔法，但它有效...