创建自定义打字稿库的教程答案

【问题标题】：Tutorial for creating custom typescript libraries创建自定义打字稿库的教程
【发布时间】：2017-09-09 23:52:14
【问题描述】：

我是 node.js 和 typescript 的相对新手，我正在寻找为 typescript 构建自定义库的教程和示例。我目前正在开发一个项目（切换到 WebStorm GUI），该项目需要我构建多个微服务，并且其中几个微服务需要共享某些代码，即基本存储库功能等。我的想法是移动他们拥有的代码对一系列单独的库（项目）通用，并将它们变成类型并拥有需要它们安装它们的项目。按照我在此处找到的示例，并使用 grunt:What is the story for creating and consuming TypeScript libraries?，我能够在项目的 dist 文件夹中生成 .js 文件和 .d.ts 文件。我对以下几个方面感到困惑：

1) 该示例引用了 jsconfig 文件中的 "main": "./dist/my.service.js" 部分，该文件的必要性有多大，应该放入什么？

2) 如果所有文件都被转译并添加到 dist 文件夹中，依赖代码是否仍然能够访问它，还是我必须将所有文件转译到 root？

3) 在我将所有文件成功转译并移动到正确位置后，如果它们是本地的并且不在 npm 或绝对类型等上，我如何将它们安装到依赖项目？

【问题讨论】：

标签： node.js typescript typescript-typings

【解决方案1】：

如果您想查看我目前正在处理的示例项目，可以使用 npm 进行安装，binary-type-tree。我需要解决一些问题，但总体而言，该项目运行良好。你可以在我的package.json 中看到我对Jest 的设置。以及如何设置类型和主要。

根据您的库将关注的内容，您将需要选择合适的模块系统。现在 commonJS 是最常见的 npm 包。虽然只能用 system 或 amd 编译成一个文件。

至于编译你不需要 gulp/grunt 你可以使用 Webstorms IDE 来编译你的文件。只需打开 Webstorm 设置“语言和框架”并选择“Typescript”，您将看到启用 Typescript 编译器。

给出的例子很老了。 Typescript 在 2016 年 10 月对打字的工作方式进行了重大更新，我认为他们转移到了 Typescript 2，或者可能是在 11 月。无论如何，当您在谷歌搜索 Typescript 时，我会将过滤器设置为不在那之前。

1.

Typescript 项目的 package.json 中的 main 应该指向你的库的入口点，或者你的可执行文件。由于我的是一个库，它指向已编译文件夹的索引文件。该文件在我的存储库中不存在，但在编译时就在那里。

2.

我相信这取决于您的构建。在我的构建中作为示例，我使用模块系统 es6，正如您在我的 tsconfig.json 文件中看到的那样。这里使用 ES6 模块系统。

如果您想使用 commonjs，我的项目结构仍然可以正常工作，除非您需要在前端使用 Systemjs 或 Babel 之类的东西。

3.

这对我来说有点陌生，但我所做的仅用于测试是将我的目录复制到我正在处理的另一个项目的节点模块中。现在要求项目不需要@types，因为我的 tsconfig.json 文件中有"declaration": true。我的项目的 package.json 有一个 "types": 部分，它指向已编译的 .d.ts 文件。需要这个新 TS 包的项目，如果也是用 TS 编写的，则必须在 tsconfig.json 文件中有 typeRoots 和 types 部分。一旦这一切都设置好了，你应该能够要求它就好了。

如果您的文件未编译为根目录，请确保在 tsconfig 的 includes 部分中声明了所有 TS 文件的 src。否则，您的项目将需要以 import * as BTT from "lib/basic-node/avl-tree"; 之类的奇怪格式输入文件。这不是我想要的，一旦我添加了它就变成了import * as BTT from 'binary-type-tree';。

【讨论】：

【解决方案2】：

"main" field in your package.json 告诉 Node 的模块系统在调用require() 时需要什么文件，所以你肯定会需要它。您将该字段指向一个转译文件，该文件还将包含对您其他转译 TypeScript 文件的转译引用，因此您不必向根目录添加任何内容。

如果您尝试使用来自另一个项目的包，您只需使用 NPM 将其作为依赖项引用，就像使用任何其他 JS 项目一样。

{
  "name": "dependent-project",
  "dependencies": {
    "bar": "file:../typescript-project"
  }
}

同样，Node 将知道如何加载 TypeScript 项目，因为您已经在 main 字段中指定了转译的入口点。

【讨论】：

【解决方案3】：

您必须考虑几件事：

在package.json，你必须设置一些东西(example)：

main 属性指向您的 UMD 兼容包
module ES5 模块的属性。然后现代工作流程可以从中受益，例如应用Tree Shaking
typings 指向您的 .d.ts 文件（应该生成）

这取决于构建过程，可以使用模块捆绑器来完成，例如 RollupJS 或 Webpack。他们可以生成源地图等等。

根据问题 3：您可以从本地甚至 Git 存储库安装软件包。在您的package.json 中，例如：

"your-library": "git+https://github.com/alexjoverm/typescript-library-starter.git"

我建议你看看TypeScript Library Starter。你可以在那里找到你需要的一切。它已配置为开箱即用：

自动发布
Package.json 配置
通用模块包
源地图
自动生成的输入 (.d.ts)
使用 TypeDoc 的文档
测试和覆盖率

【讨论】：