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

Tutorial for creating custom typescript libraries

我是 node.js 和打字稿的新手,正在寻找为打字稿构建自定义库的教程和示例。我目前正在从事一个项目(切换到 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 文件夹,依赖代码是否仍然能够访问它,还是我必须将所有文件转译到根目录?

3) 在我成功转译所有文件并将其移动到正确位置后,如果它们是本地的并且不在 npm 或 Definitely Typed 等上,我该如何将它们安装到依赖项目?

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

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

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

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

好吧,如果你想看一个我目前正在做的示例项目,可以用 npm 安装它是 binary-type-tree. There are some things I need to fix but overall the project is working great. You can see my setup for Jest in my package.json。以及如何设置类型和主要内容。

根据您的图书馆关注的重点,您需要选择合适的模块系统。现在 commonJS 是 npm 包中最常见的。虽然你只能用system或者amd编译成一个文件。

至于编译你不需要gulp/grunt你可以使用Webstorms IDE来编译你的文件。只需打开 Webstorm 设置 "Languages and Frameworks" 和 select "Typescript",您就会看到启用 Typescript 编译器。

The example given is very old. Typescript had a major update to how typings work back in October of 2016, they moved to Typescript 2 I think, or maybe it was November. Anyway when you google search Typescript I would set the filter to not before that time.

1.

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

2.

我相信这取决于您的构建。在我的构建示例中,我使用模块系统 es6,如您在我的 tsconfig.json 文件中所见。这使用了 ES6 模块系统。

if you would like to use commonjs the structure of my project will still work properly except you will need something like Systemjs or Babel on the front end.

3.

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

Make sure that the src of all your TS files is declared in the includes section of the tsconfig if your files are not compiled to root. Otherwise your project will have to require in files in an odd format like import * as BTT from "lib/basic-node/avl-tree";. Which is not what I wanted, once I added this it became import * as BTT from 'binary-type-tree';.

您必须考虑几件事:

package.json 中,您必须设置一些东西 (example)

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

这取决于构建过程,可以使用模块打包器来完成,例如 RollupJS or Webpack。他们可以生成源映射等等。

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

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

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

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