javascript - 如何为用户构建高兼容性的 Typescript 库？

Question

我想做的事

我想创建一个可用作 JS 开发人员和 Typescript 开发人员（前端，无 nodejs）的库。这意味着 JS 开发人员可以将该库用作内联脚本：<script type="text/javascript" src="mylib.js">var myLib = new MyLib();</script>Typescript 开发人员可以通过导入使用该库。

我需要的

我想在 Typescript 中开发这个库，这就是为什么我需要一个满足以下要求的（构建）解决方案：

1. 该库应使用 Typescript 开发。
2. 构建应该自动包含所有声明。Typescript 开发人员应该能够导入该库的部分内容。
3. 对于 Javascript 用户，该库应使用“老式方式”作为<script>-Tag中的内联代码
4. npm run build如果调用，则应自动生成构建。
5. 一般来说，这个库对旧浏览器的兼容性应该尽可能高。

到目前为止我尝试了什么

• 我创建了一个打字稿库并在 tsconfig.json 中尝试了一些设置。我发现的唯一方法是将“模块”属性设置为“无”，但是我不能在我的代码中使用导入、导出，并且必须将我的所有 Typescript 文件合并到一个文件中。这将使开发更加困难。
• 我查看了例如 Konva.js 的存储库，它可以做我想做的事情。但我不明白它是如何工作的。似乎开发人员将代码转换为 umd，然后使用 rollup.js，并且在构建结束时，只要需要所有 Typescript 代码，就会存在一个 javascript 文件。

评论

几天来我一直在寻找解决方案，但很难找到代表我正在寻找的完美术语。这就是为什么我在这里问它并希望有人可以帮助我。

标签： javascripttypescriptnpmtsc

Answer 1

浏览器不直接理解 typescript，所以为什么使用 typescript 编译器我们将 typescript 代码转换为 javascript。因此，当我们构建一个 typescript 项目或模块时，我们通常有一个 typescript 配置文件 tsconfig.json，typescript 编译器在将 typescript 编译为 javascript 时使用该文件。

这只是 tsconfig.json 文件中一些配置的快照。首先，你想定位大部分浏览器，所以你需要将 target 属性设置为 es5。因为大多数新旧浏览器都对它有很好的支持。现在您的 typescript 编译器将在 es5 版本中生成 javascript。还有另一个属性调用 outDir ，它将包含您输出的 javascript 代码，您可以将其直接导入生产中的其他 javascript 文件中，或者其他人可以使用标签导入它。

在您的 package.json 文件中，您可以设置构建脚本，以便它应该运行 typescript 编译器来编译 typescript 代码。

关于第 2 点，你可以做的是你可以指定你的 typescript 模块的入口点，比如它可以是 package.json 中的 main.ts 或 index.ts 所以当其他 typescript 开发人员使用这个库时，构建工具会自动得到在库的入口点中定义的导入。那么这个入口点文件中的内容是一个问题？它将包含库的所有模块的导出。这样，您库的所有模块都可供其他打字稿用户使用。

您还可以检查 konvasjs tsconfig 文件。他们在做什么他们在生产中使用的 lib 目录中输出他们的 javascript 文件。对于开发，他们正在使用普通的打字稿文件。