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

Yaa*_*ver 5 npm typescript

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

import {Something} from '../../../../root-level-module';
Run Code Online (Sandbox Code Playgroud)

而是写

import {Something} from 'root-level-module';
Run Code Online (Sandbox Code Playgroud)

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

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}
Run Code Online (Sandbox Code Playgroud)

在我的tsconfig.json

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

npm 包还.d.ts包括.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' {
  ...
}
Run Code Online (Sandbox Code Playgroud)

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

那么,我在这里错过了什么吗?编写 TypeScript 库(作为 NPM 包)的正确方法是什么:

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