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

Question

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

示例：

// a.ts
function a() {}

// b.ts
function b() {}

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

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

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

运行 tsc 将每个文件编译为 JavaScript;
将所有生成的 JS 文件连接成一个文件 my-lib.js;
追加ES6需要的代码(export …)。

第二个：

将所有 TypeScript 文件连接成一个文件my-lib.ts；
附加导出：export default myLib；
运行 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 代码构建一个平面包。对于上面的代码，Rollup 生成了这个包：

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

另请参阅：

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

注意：definitive solution to build the definition file (.d.ts) is not implemented yet (March, 2018). I still concatenate files 使用 Node.js 脚本在单个 TypeScript 定义文件中生成导出类型。

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

How to build a single ES6 module from several TypeScript files (for a frontend library)

typescript

ecmascript-6

es6-modules