如何从多个 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. 将所有打字稿文件连接成一个文件my-lib.ts;
2. 附加导出：export default myLib ;
3. 对串联文件运行tsc。

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

有没有更好的方法可以做到这一点？

Answer 1

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

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

Answer 2

我添加一个答案，因为今天前端库的正确方法是使用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 代码构建一个平面捆绑包。对于上面的代码，汇总会生成以下捆绑包：

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

另请参阅：

• 汇总REPL：https://rollupjs.org/repl
• 文章：Webpack 和 Rollup：相同但不同

注意：构建定义文件 （ .d.ts ） 的最终解决方案尚未实现（2018 年 3 月）。我仍然将文件与 Node.js 脚本连接起来，以在单个 TypeScript 定义文件中生成导出的类型。