如何从多个 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 和 Rollup：相同但不同

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