如何从多个 TypeScript 文件构建单个 ES6 模块（用于前端库）

Question

我的前端库的代码被拆分成几个源文件。

例子：

// a.ts
function a() {}

// b.ts
function b() {}

// main.ts
const myLib = {
    a: a,
    b: b
}

我需要构建一个仅导出 myLib 的 ES6 模块（即一个 JavaScript 文件），作为默认导出。

我看到两个选项。第一个：

1. 运行tsc将每个文件编译成JavaScript；
2. 将所有生成的JS文件拼接成一个文件my-lib.js;
3. 附加 ES6 所需的代码 (export …)。

第二个：

1. 将所有 TypeScript 文件连接成一个文件 my-lib.ts;
2. 附加导出：export default myLib;
3. 对连接的文件运行tsc。

这两个选项都很难看，并且会丢失 map 文件。

有更好的方法吗？

Answer 1

我添加一个答案是因为今天前端库的正确方法是使用 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 将代码编译为 JavaScript，并将选项 module 设置为 "es6"。

然后，让 Rollup 从 JavaScript 代码构建一个平面包。对于上面的代码，Rollup 会生成这个包：

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

另见：

• 汇总 REPL：https://rollupjs.org/repl
• 文章：Webpack and Rollup: the same but different

注意：构建定义文件 (.d.ts) 的definitive solution 尚未实施（2018 年 3 月）。 I still concatenate files 使用 Node.js 脚本在单个 TypeScript 定义文件中生成导出的类型。

Answer 2

正确的方法是创建一个桶文件来重新导出模块。

// 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();