angular - 使用 Typescript 創建模組

我想為我們的函式庫創建模組，所以每次我們呼叫時，我們可以使用 import {Api, Map} from "ourlibrary"

我目前正在使用以下的。

import {Api} from "../../Library/Api";
import {MapPage} from "../map/map";

我如何可以建立我自己的套件來得到以下結果？

import {Api, Map} from "OurLib"

答案＃1

建立一個頂層的 ES6 風格 JavaScript 檔案，將你的匯入作為單一檔案匯出，並將其命名為 OurLib。

exports.Api = require('../../Library/Api').Api;
exports.Map = require('.../map/map').Map;

這種方法的好處是它不會將你綁定到單一的模組加載器系統。由於它是直接使用 ES6 功能（require/export），因此可以被 SystemJS、Webpack、Typescript 等使用。

如下面評論中所提到的，require 語句末尾的 .Api 和 .Map 的原因是因為你通常從文件中導入的是類。在以下情況下，你會使用這樣的語法

export class Api {}

和

export class Map {}

在各自的檔案中。這樣你只指派你想要匯出的類別，而不是整個所需的檔案。這給你對打包後、公開的模組更多的控制權。

答案＃2

我看到做那件事有兩個步驟：

• 在你的 SystemJS 配置的 map 區塊中建立一個條目：

  System.config({
    map: {
      'OurLib': 'path-to-ourlib'
    },
    packages: {
      'OurLib': {
        main: 'index.js',
        defaultExtension: 'js'
      }
    }
  });
  

• 建立一個 TypeScript 檔案（例如，index.ts）作為入口點模組，用來匯入/匯出你想對外部使用的內容：

  export {Api} from "../../Library/Api";
  export {MapPage} from "../map/map";