时间戳

首页 > 解决方案 > 如何在开发过程中设置 NPM Typescript 包以维护导入语法？

node.js - 如何在开发过程中设置 NPM Typescript 包以维护导入语法？

问题描述

我正在开发一个 NPM typescript 包来从我的主应用程序中进行代码拆分。

这两个项目共享一个根目录，即：

- mylib
  - package.json
  - tsconfig.json
  - src/
  - dist/
- myapp
  - package.json
  - tsconfig.json
  - src/

如果myapp/package.json尝试链接mylib为file:../mylib，则npm install成功......但我可以成功导入的唯一方法是使用... from mylib/src/（否则，tsc编译器无法识别路径）。但是，此导入语法不同于包的生产版本（不包括src）。

另外，我还需要能够针对未启用打字稿mylib的第二个应用程序进行开发。在这种情况下，在导入路径中包含将不起作用，因为当应用程序由 CI 构建时，此路径不会针对已发布的 NPM 包进行解析。src

我遇到了一种在技术上可行的解决方案：

cd mylib
cp package.json dist/
cd dist
npm link

cd ../../myapp
npm link mylib

因此，将npm link创建到dist文件夹。但它需要复制package.json，否则链接只会转到mylib而不是mylib/dist。

不幸的是，这很快就崩溃了，因为 mymylib/package.json有相对的导入路径：

"react": "file:../myapp/node_modules/react",

为了只保留一个 React 包的实例，这是必要的。将 复制package.json到dist/文件夹中以创建链接会导致这些导入无法解析。使用绝对路径不适用于我项目中的其他开发人员。此外，将 复制package.json到 中dist/似乎是一种反模式。

编辑 1

根据评论，我尝试切换到yarn。在这方面，它表现出与 NPM 完全相同的行为。即，该yarn link命令始终指向带有package.json. 同样，这迫使我src/在我的导入中使用该文件夹，这在指向生产 NPM 包的生产构建中不起作用。

标签： node.jsreactjstypescriptnpm

解决方案

首先工作区不需要链接一个简单的方法来解决你的问题

// packages/project-a/index.ts
// for development
export * from src/index.ts;

// packages/project-a/index.js
// for production
module.exports = require('dist/index.js');

在你的模块中创建一个 index.js，index.ts，当使用 ts-node 运行你的项目时，程序会自动加载 index.ts 当你使用 node 运行你的项目时，程序会自动加载 index.js 一个更好的方法是编译根目录下的项目，请参阅 https://github.com/vuejs/vue-next

推荐阅读