时间戳

首页 > 解决方案 > 创建一个 Typescript NPM 库

node.js - 创建一个 Typescript NPM 库

问题描述

我的项目中有一个models目录 ( my-models)，其中包含我的应用程序的一些重要的打字稿类。

我一直在应用程序中毫无问题地使用它，现在我想把它做成一个 npm 包，这样我就可以将它导入另一个项目。

这就是我试图做的：

  1. 目录中的 npm init my-models（包含我所有模型和类的目录）
  2. 目录中的 npm 链接my-models（包含我所有的模型和类的那个）
  3. my-models另一个“客户端”项目的根目录中的npm 链接
  4. 在客户端项目的某些文件中导入 * from "my-models"

我遇到的问题是，无论我做什么，我都找不到一种方法来共享我所有的 Typescript 类并在另一个项目中使用它们。我在编译我的库时遇到了麻烦，然后当我编译它时，我无法在我的客户端项目中导入类。我收到此错误：

`File '.../services/my-models/index.d.ts' 不是 module.ts(2306)

这是 package.json 的my-models：

{
    "name": "my-models",
    "version": "0.9.0",
    "description": "API Client and models",
    "main": "dist/main.js",
    "types": "index.d.ts",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "dependencies": {
        "axios": "^0.19.0",
        "@types/axios": "^0.14.0"
    },
    "devDependencies": {
        "typescript": "^3.9.5"
    }
}

这是我的客户项目中的一个导入，我尝试导入我的一个模型：

import { Student } from 'my-models'

但是等等，我有点让它工作：

import { Student } from 'my-models/dist/main'

为什么？我在my-modelspackage.json 中说 dist/main.js 是主文件，为什么我不能只从“my-models”导入 *？

顺便说一句，这是 my-models/dist 目录：

在此处输入图像描述

所以不确定我是否做错了什么或如何正确地做。感谢任何帮助

标签： node.jsreactjstypescriptnpm

解决方案

我使用 Angular CLI 来构建 NPM 库，即使它们不是 Angular 项目。您只需从 package.json 文件中删除 Angular 依赖项，就可以为您设置一个世界级的 TypeScript 项目，并提供一个很棒的测试管道。

npm install --global @angular/cli
ng new my-lib --create-application=false

cd my-lib
ng generate library my-lib

生成库后，您可以进入 projects/my-lib/src 目录打开 package.json 文件并摆脱 Angular 依赖项。现在你有一个空白的 TypeScript 项目。

ng build my-lib将建造它

ng test my-lib将运行单元测试

cd 进入 dist/my-lib 文件夹，你可以npm publish直接进入 npm。

当您可以利用 Angular 团队的工作时，为什么还要手动构建 TypeScript？

推荐阅读