如何從嵌套模塊導入？

Question

我有一個我編寫的Typescript庫，它的發出方式如下。 不過，我不知道如何從這個模塊導入。

node_modules / my-module / dist / index.js （部分）

define("services/UserService", ["require", "exports", ..., "services/BaseService"], function (require, exports, ..., BaseService_31) {
    "use strict";
    var UserService = (function (_super) {
        // ... stuff here ...

        return UserService;
    }(BaseService_31.BaseService));
    exports.UserService = UserService;
});

我已經用npm安裝了這個包並配置了JSPM，如下所示：

config.js （部分）

System.config({
  defaultJSExtensions: true,
  transpiler: "none",
  paths: {
    "*": "dist/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*",
    "npm-ext:*": "node_modules/*"
  },
  map: {
    ...
    "my-module": "npm-ext:my-module/dist/index.js",
    ...
  }
});

我期待能夠導入這個類如下...

import {UserService} from "my-module/services/UserService";

我希望SystemJS解析my-module的路徑，然后找到services/UserService模塊，並獲取單個導出UserService 。 但在Chrome控制台中，我看到這是正在加載的路徑：

node_modules/my-module/dist/index.js/models/UserService.js

導入這樣的模塊的正確方法是什么？

額外獎勵：我如何解決包括index.js的完整路徑？

Answer 1

您的庫代碼是使用命名定義發出的

define("services/UserService",

看起來index.js文件中定義了幾個這樣的模塊，也就是說，index.js是一個bundle。

使用SystemJS導入此類模塊的唯一方法是

import {UserService} from "services/UserService";

也就是說，進口的模塊名稱必須給予名稱匹配define 。 在您的情況下，文件的位置不會以任何方式影響模塊名稱。

現在，SystemJS必須配置為在看到導入時加載庫文件node_modules/my-module/dist/index.js 。 對於bundle，首選方法是通過bundle配置 ：

  bundles: {
    "npm-ext:my-module/dist/index.js": ["services/UserService.js"]
  }

這里的模塊名稱services/UserService.js必須具有.js擴展名，因為在應用defaultJSExtesions:true后它必須匹配導入的模塊名稱。

如果要將模塊導入為my-module/services/UserService.js ，則需要確保使用該名稱注冊該模塊。 最簡單的方法是在編譯庫時擁有相應的源文件結構 - 也就是說，在my-module/services文件夾中有UserService.ts。

您可以在SystemJS模塊格式docs中找到有關命名define的更多信息，特別是說

• 支持命名定義，並將直接寫入loader注冊表。

• 單個命名的define將寫入loader注冊表，但如果名稱不匹配，也會被視為加載的模塊的值。 這樣就可以加載一個包含define的模塊（'jquery'，....

PS您的瀏覽器嘗試加載

node_modules/my-module/dist/index.js/models/UserService.js

models來自哪里？