用 TypeScript 编写 npm module

IT技术 javascript node.js npm typescript
2021-03-13 16:19:38

我正在开发我的第一个 npm module。我之前曾短暂地使用过 TypeScript,一个大问题是许多module没有可用的定义文件。所以我认为用 TypeScript 编写我的module是个好主意。

但是,我找不到有关执行此操作的最佳方法的任何信息。我发现了这个相关的问题“我可以在 CoffeeScript 中编写 npm 包吗? ”人们建议只发布 JavaScript 文件。但与 CoffeeScript 文件相比,如果在 TypeScript 应用程序中使用 TypeScript 文件,它们实际上可能很有用。

我应该在发布 npm module时包含 TypeScript 文件,还是应该只发布 JavaScript 文件并将生成的 .d.ts 文件提供给绝对类型?

6个回答

这是一个用 TypeScript 编写的示例节点module:https : //github.com/basarat/ts-npm-module

这是一个使用此示例module的示例 TypeScript 项目https://github.com/basarat/ts-npm-module-consume

基本上你需要:

  • commonjs编译declaration:true
  • 生成.d.ts文件

接着

  • 让您的 ide 读取生成的.d.ts.

Atom-TypeScript 只是提供了一个很好的工作流程:https : //github.com/TypeStrong/atom-typescript#packagejson-support

@basarat,在 ts-npm-module 中,您使用的是“版本”:“1.5.0-alpha”。我假设这是您正在使用的 Typescript 版本。忽略这个重要吗?(它不是由 Atom 插件自动完成的)。如果使用某个版本,这是否需要其他用户使用确切的版本(或仅使用较新的版本)进行转译?(或者可能是 tsconfig.json 的版本?)
2021-04-23 16:19:38
Atom-TypeScript 锚链接需要更新(锚不再有效)。
2021-04-28 16:19:38
您会在 2016 年第 4 季度继续提倡这种方法吗?
2021-05-03 16:19:38
您是否有依赖于其他库的module的用例?为了避免重复定义问题,您需要配置tsconfig.json,但在我看来这似乎太手动了。
2021-05-08 16:19:38
这是一个很好的操作方法 - tsmean.com/articles/how-to-write-a-typescript-library
2021-05-10 16:19:38

对于 TypeScript 4.x、TypeScript 3.x 或 TypeScript 2.x,以下步骤描述了使用 TypeScript 创建库(npm 包)必须执行的操作:

  • 像往常一样创建您的项目(包括测试和所有内容)
  • 添加declaration: truetsconfig.json以生成类型。
  • 通过一个导出 API index.ts
  • 在 中package.json,指向您生成的类型。例如,如果您outDirdist,则将其添加"types": "dist/index.d.ts"到您的包 json 中。
  • 在 中package.json,指向您的主入口文件。例如,如果您outDirdist并且主入口文件是index.js,则添加"main": "dist/index.js"到您的 package.json 中。
  • 在 中package.json,将您要发送到 npm: 的文件列入白名单files: ["/dist"]另一种方法是使用 将其列入黑名单.npmignore,但很难保持最新状态。
  • 发布到 npm npm publish使用 semver 规范进行更新(补丁/错误修复npm version patch、非破坏性添加、破坏性npm version minorAPI 更改npm version major

因为它让我一个同时通过所有过期的资源在互联网上关于这个主题(如一个在此页...)进行筛选,我决定把它包起来如何到写A-typescript库与最新的工作最小示例。

@Olian04 你告诉创建一个.npmignore文件来告诉 npm 在发布时要忽略哪些文件(.ts文件)和.gitignore告诉 git 要忽略哪些文件(dist/
2021-04-28 16:19:38
@Olian04 不,您不需要(并且 IMO 不应该)提交生成的 JS 文件。这些不是项目来源的一部分。
2021-05-05 16:19:38
我是否必须将 js 签入源代码管理?还是 npm 保留自己的代码版本?
2021-05-10 16:19:38

这是使用 TypeScript 1.8.10 的最新答案:

我的项目结构是:

|
|--- src
|--- test
|--- dist     <= My gulp file compiles and places the js, sourcemaps and .d.ts files here
|      |--- src
|      |--- test
|--- typings
.gitignore
.npmignore
gulpfile.js
package.json
README.md
tsconfig.json
tslint.json
typings.json

我添加了以下内容.npmignore以避免包含无关文件并保持最低限度让包导入和工作:

node_modules/
*.log
*.tgz

src/
test/
gulpfile.js
tsconfig.json
tslint.json
typings.json
typings
dist/test

我的.gitignore有:

typings

# ignore .js.map files
*.js.map
*.js
dist

我的package.json有:

"main": "dist/src/index.js",
"typings":  "dist/src/index.d.ts",

现在我运行: npm pack

生成的文件(解压缩时)具有以下结构:

|
|--- dist
|       |--- src
|              |
|              index.js
|              index.js.map
|              index.d.ts
|
package.json
README.md

现在我转到我想将其用作库的项目并键入: npm install ./project-1.0.0.tgz

它安装成功。

现在我index.ts在我刚刚安装了 npm 的项目中 创建了一个文件 import Project = require("project");

打字Project.给了我智能感知选项,这是整个练习的重点。

希望这有助于其他人在他们的大型项目中使用他们的 TypeScript npm 项目作为内部库。

PS:我相信这种将项目编译为可用于其他项目的npmmodule的方法让人联想.dll.NET世界上的。我可以想象在 VS Code 中的解决方案中组织项目,其中每个项目生成一个 npm 包,然后可以在解决方案中的另一个项目中作为依赖项使用。

由于我花了相当长的时间才弄明白这一点,所以我把它贴出来以防有人卡在这里。

我还在以下位置发布了一个已关闭的错误:https : //github.com/npm/npm/issues/11546


这个例子已经上传到Github:vchatterji/tsc-seed

它如何也用于非typescript项目?
2021-04-26 16:19:38
你能在github上上传一个例子吗?那会有很大帮助!:)
2021-05-13 16:19:38
示例已上传至 Github:github.com/vchatterji/tsc-seed
2021-05-15 16:19:38

您应该发布原始typescript源而不是类型定义。package.json让“类型”属性指向*的.ts文件。

*.d.ts 对现有的 JS 库进行注释是很好的,但作为消费者,我宁愿阅读typescript代码,也不愿在类型定义和下层生成的 JS 代码之间切换。

到目前为止,TypeScript 编译器似乎不适合这种情况。请参阅此问题github.com/Microsoft/TypeScript/issues/14479
2021-04-25 16:19:38
目前包括*.d.ts是推荐的方式,虽然我同意你的好处,包括*.ts文件,typescriptlang.org/docs/handbook/declaration- files/...
2021-05-14 16:19:38

我主要遵循Varun Chatterji的建议

但是,我想展示一个带有单元测试和代码覆盖率的完整示例,npm并使用javascripttypescript

该module是使用编写的,typescript 2.2并且在将其发布到 npm 之前配置prepublish钩子以编译使用的代码很重要tsc

https://github.com/sweetim/haversine-position

https://www.npmjs.com/package/haversine-position

截至 2017 年 7 月,这是我遇到的最好的项目结构。感谢 Tim 和 Varun Chatterji
2021-05-05 16:19:38
这是一个非常有用的例子,谢谢分享!我目前也在尝试以这种方式创建包。
2021-05-16 16:19:38