如何从嵌套模块导入？

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来自哪里？