typescript - TypeScript 库中的绝对导入打包为带有类型声明的 ES 模块

Question

我有一个用 TypeScript 编写的库，并在内部使用绝对导入来避免深度嵌套的相对导入语句，例如

import {Something} from '../../../../root-level-module';

而是写

import {Something} from 'root-level-module';

为了让它正确编译，我使用

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

在我的tsconfig.json.

我能够使用babel-plugin-module-resolver在发出的 ES 模块中正确转换这些导入语句。

.d.tsnpm包还包括.js使用tsc --emitDeclarationOnly.

问题是import声明文件中的语句没有被转换，所以这个包的消费者无法读取它们。

据我所知，TypeScript 本身并没有提供任何方式来发出其内部路径解析机制的结果：https ://www.typescriptlang.org/docs/handbook/module-resolution.html

我尝试了一些类型声明捆绑器和一些打字稿转换器，但无法使其正常工作。

这与我的库的另一个特定问题有关：它使用babel-plugin-inline-react-svg来转换SVG导入到 React 组件中的文件。这由类型声明 ( svg.d.ts) 支持：

declare module '*.svg' {
  ...
}

编译器正确理解诸如导入语句，import Icon from 'icon.svg';并且它们在发出的.js文件中由 babel 正确转换，但我无法以任何其他项目可以使用库的方式使类型声明文件正确。

那么，我在这里错过了什么吗？编写 TypeScript 库（作为 NPM 包）的正确方法是什么：

1. 被编译成 ES 模块而不是捆绑
2. 具有类型声明（捆绑或不捆绑）
3. 可以在内部使用绝对导入（以避免深度嵌套的相对导入）
4. 可以使用 babel 插件将 SVG 文件转换为 React 组件吗？

标签： typescriptnpm