typescript - 複数の TypeScript ファイルから単一の ES6 モジュールを構築する方法 (フロントエンドライブラリ用)

Question

score 3 · Accepted Answer

正しい方法は、モジュールを再エクスポートするバレルファイルを作成することです。

// foo/a.ts
export function a() {}

// foo/b.ts
export function b() {}

// foo/index.ts
export {a} from './a';
export {b} from './b';

次に、コンシューマーで:

import {a, b} from './foo';

a();
b();

score 1 · Accepted Answer

今日、フロントエンドライブラリの正しい方法はRollupを使用することであるため、回答を追加します。

まず、ES6 モジュールを作成importしexportます。

// file-a.ts
export function a() {}

// file-b.ts
export function b() {}

// main.ts
export { a } from "./file-a"
export { b } from "./file-b"

tsc次に、オプションmoduleをに設定して、コードを JavaScript にコンパイルします"es6"。

次に、Rollup で JavaScript コードからフラットバンドルを構築します。上記のコードの場合、Rollup は次のバンドルを生成します。

function a() {}
function b() {}
export { a, b };

以下も参照してください。

注意:定義ファイル( )をビルドするための決定的なソリューションはまだ実装されていません (2018 年 3 月)。私は今でも Node.js スクリプトを使用してファイルを連結し、単一の TypeScript 定義ファイルでエクスポートされた型を生成しています。.d.ts

typescript - 複数の TypeScript ファイルから単一の ES6 モジュールを構築する方法 (フロントエンド ライブラリ用)