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

您的库代码是使用named define

发出的

define("services/UserService",

看起来index.js文件中定义了几个这样的模块，也就是说，index.js是一个包。

使用SystemJS导入此类模块的唯一方法是

import {UserService} from "services/UserService";

也就是说，导入的模块名称必须与define的名称完全匹配。在您的情况下，文件的位置不会以任何方式影响模块名称。

现在，必须将SystemJS配置为在看到导入时加载库文件node_modules/my-module/dist/index.js。对于捆绑包，首选方法是通过bundles config：

  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 module format docs中找到有关命名定义的更多信息，特别是

支持命名定义，并将直接写入加载器注册表。



单个命名的define将写入loader注册表，但如果名称不匹配，也会被视为加载的模块的值。这样可以加载包含define（'jquery'，....

的模块

P.S。您的浏览器尝试加载

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

models来自哪里？

如何从嵌套模块导入？

1 个答案: