使用SystemJS加載捆綁的AMD模塊

Question

我有幾個使用TypeScript的--outFile選項編譯成單個文件的AMD模塊：

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上的文檔說：

加載此模塊之前的依賴項。 經歷常規路徑並進行地圖歸一化。 僅支持cjs，amd和全局格式。

看起來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設置，並按以下方式設置bundle：

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

粗略地講，這告訴SystemJS“當您尋找模塊partA ，獲取並執行名為my-bundle.js的模塊，您將在其中找到partA 。”

---

您使用meta方法行不通。 您的meta設置不會說“不要嘗試獲取名為partA的模塊， 而是要獲取my-bundle.js ”，而是說“當您處理partA ， 除了已經擁有的依賴項之外，還要將my-bundle.js添加到依賴項列表。” SystemJS仍將獲取partA 。 它沒有理由等待它執行my-bundle.js才嘗試獲取它，因此它會立即啟動獲取並失敗。