如何從嵌套模塊導入？

我已經寫了一個Typescript庫，它正在發射如下。不過，我不知道如何從這個模塊導入。如何從嵌套模塊導入？

node_modules /我的模塊/ 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", 
    ... 
    } 
});

我期待能夠導入此cla SS如下...

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的完整路徑？

來源

2016-09-04 Josh M.

你的代碼庫可射出使用命名定義

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將寫入加載器註冊表中，但如果名稱不匹配，也會被視爲加載的模塊的值。這使得加載包含定義（ 'jQuery的' 模塊，....

PS您的瀏覽器嘗試加載

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

來自哪裏？

來源

2016-09-04 21:38:49 artem

感謝models 。你知道如何配置我的TS版本來創建「普通」模塊，這樣我就可以用'my-module/services/UserService'導入嗎？另外，「models」可能是一個錯字，將會確認。 –

知道是通過對源文件進行嚴格的佈局。假設你有帶UserService.ts和BaseService.ts的src/my-module/service文件夾。另外假設src和dist在頂層。要生成'正常'模塊，請在tsconfig.json中使用''rootDir「：」src「，」outDir「：」dist「。請注意，每個模塊將在單獨的文件中。要生成一個bundle，用outFile替換'outDir'：「dist/index.js」'。在這兩種情況下，都可以使用'from'my-module/services/UserService''進行導入。 – artem

如何從嵌套模塊導入？

回答

相關問題