使用 SystemJS 加载捆绑的 AMD 模块

Question

我有几个 AMD 模块使用 TypeScript 的 --outFile 选项编译到一个文件中：

define("partA", ["require", "exports"], function (require, exports) {
    "use strict";
    function partAFunc() {
        console.log('partAFunc');
        return 'partAFunc';
    }
    exports.partAFunc = partAFunc;
});
define("partB", ["require", "exports"], function (require, exports) {
    "use strict";
    exports.partB = 42;
});
define("partC", ["require", "exports"], function (require, exports) {
    ...
});

现在我只想加载 partA 模块并调用它的 partAfunc() 这样我就可以在 Node.js 中执行以下操作：

SystemJS.config({
  map: {
    'main': 'my-bundle.js',
  },
});

SystemJS.import('main').then((m) => {
  SystemJS.import('partA').then((m) => {
    m.partAFunc();
  });
});

第一个导入 SystemJS.import('main') 只是注册了所有模块，然后 SystemJS.import('partA') 起作用，因为模块 partA 已经注册了（或者至少我猜它是这样做的）。

但是，为什么我不能只使用 SystemJS.import('partA') 并将包设置为依赖项：

SystemJS.config({
  meta: {
    'partA': {
      deps: [ 'my-bundle.js' ],
    }
  }
});

SystemJS.import('partA').then((m) => {
  m.partAFunc();
});

meta 被完全忽略。 https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#meta 的文档说：

Dependencies to load before this module. Goes through regular paths and map normalization. Only supported for the cjs, amd and global formats.

看起来 SystemJS 首先检查文件 partA 是否存在（显然不存在）并抛出错误（我用现有文件测试它并且 meta 配置有效）：

(node:60981) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open '/Users/.../partA'
  Instantiating /Users/.../partA
  Loading partA

我希望当第一个变体与两个嵌套的 SystemJS.import 调用一起工作时，以下内容也应该起作用。

SystemJS.config({
  map: {
    'partA': 'my-bundle.js',
  },
});

SystemJS.import('partA').then((m) => {
  // m.partAFunc();
  console.log(m)
});

这将打印一个空对象。看起来当单个文件中有多个模块时它只是注册它们而不加载它们中的任何一个？

我阅读了 https://github.com/systemjs/systemjs/tree/master/docs 中的所有文档，但我觉得我还是迷路了。

Answer 1

您需要做的是使用 bundles 设置并像这样设置您的包：

    bundles: {
      'my-bundle.js': ['partA', 'partB', 'partC'],
    },

粗略地说，这告诉 SystemJS "when you look for module partA, fetch and execute the module named my-bundle.js and you'll find partA there."

您使用 meta 的方法行不通。你的 meta 设置没有说 "don't try to fetch a module named partA and instead fetch my-bundle.js" 它说 "when you process partA, in addition to the dependencies it already has, add my-bundle.js to the list of dependencies." SystemJS 仍然会获取 partA。它没有理由等到执行 my-bundle.js 后再尝试获取它，因此它立即启动获取但失败了。

使用 SystemJS 加载捆绑的 AMD 模块

Loading bundled AMD modules with SystemJS

javascript

node.js

systemjs

es6-module-loader

es6-modules