使用别名而非相对路径创建的Typescript声明文件

Question

编辑1：将GitHub网址添加到项目中。

编辑2：从tsconfig.json中删除baseUrl可以解决所有问题，并且使用相对导入工作正常。

链接：Github

如何生成一个具有相对路径而不是别名的typescript声明文件？

我正在UMD模式下创建一个库（samplelibrary），并在npm上发布它。打包的npm库只有build文件夹（带有类型定义）、package.json和README.md

当我尝试在另一个TypeScript应用程序中使用该库时，由于正在生成无效的类型声明文件，因此构建失败。类型声明文件包含别名而不是相对路径。

编译日志：

ERROR in /workspace/myproject/node_modules/samplelibrary/build/typings/src/foo.d.ts(403,17): TS2307: Cannot find module 'utils/bar'

如何解决这个问题？

实际创建的声明文件foo.d.ts：

declare const Foo: {
   bar: typeof import("utils/bar");
}

期望文件：

declare const Foo: {
   bar: typeof import("./utils/bar");
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "rootDir": "./",
    "baseUrl": "./src",
    "paths": {
      "@samplecompany/sampleproject": ["./"]
    },
    "outDir": "build",
    "removeComments": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "declaration": true,
    "declarationDir": "typings",
    "importHelpers": true
  },
  "files": ["types/untyped-modules.d.ts"],
  "include": [
    "src/**/*",
    "test/**/*",
    "build/**/*",
    "styleguide-renderer/**/*"
  ],
  "exclude": ["node_modules"]
}

文件夹结构：

root
  -src
    -utils
       -bar.ts
    -foo.ts

工具类/bar.ts

export const bar = {
   hello: "World"
}

src/foo.ts

import { bar } from "./utils/bar.ts

export default const Foo = {
    bar
};

- Sivasankar

---

请返回翻译后的文本：重复 https://dev59.com/SmgMtIcB2Jgan1znN8Uk - marko424

Answer 1

看起来如果不进行一些巧妙的处理，它可能无法正常工作，但最终我还是解决了问题。所以问题在于类型声明路径需要重写。为此，您需要一些打包器/编译器来为您完成此操作。我想有各种包可以用于基于tsc的编译，但在我的情况下，我正在使用Rollup，因此没有那么多选择。好吧，我只找到了一个：https://github.com/zerkalica/zerollup/tree/master/packages/ts-transform-paths

这里有一些指示可以帮助您使用它。但基本上您需要做的就是：

1. 安装yarn add -D @zerollup/ts-transform-paths ttypescript
2. 将其包含在您的rollup.config.js中
3. 在您的tsconfig.json中添加插件："plugins": [{ "transform": "@zerollup/ts-transform-paths" }]

现在我的路径已从例如@react重写为"../../react/file"。耶！

为了保险起见，这里是我的配置：

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "declaration": true,
    "declarationDir": "./dist",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@context/*": ["src/context/*"],
      "@pm/*": ["src/pm/*"],
      "@react/*": ["src/react/*"],
      "@typings/*": ["src/typings/*"]
    },
    "plugins": [{ "transform": "@zerollup/ts-transform-paths" }]
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

import alias from '@rollup/plugin-alias'
import typescript from 'rollup-plugin-typescript2'
import postcss from 'rollup-plugin-postcss'
import ttypescript from 'ttypescript'

import path from 'path'

import pkg from './package.json'

export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
    },
    {
      file: pkg.module,
      format: 'es',
    },
  ],
  external: [
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  plugins: [
    alias({
      entries: [
        { find: '@context', replacement: path.resolve(__dirname, 'src/context') },
        { find: '@pm', replacement: path.resolve(__dirname, 'src/pm') },
        { find: '@react', replacement: path.resolve(__dirname, 'src/react') },
        { find: '@typings', replacement: path.resolve(__dirname, 'src/typings') },
      ]
    }),
    typescript({
      typescript: ttypescript
    }),
    postcss()
  ],
}

- TeemuK

Answer 2

很抱歉，TypeScript不会重写导入路径。请参见这个被拒绝的建议。除非您在使用库的项目中也配置了别名，否则您需要避免使用别名。

- Matt McCutchen

---

虽然我理解，但我认为这是一个业余的决定！ - TacB0sS

是的，这很痛苦 - 你被迫在声明文件中使用别名 :-/ - Peter Ehrlich

Answer 3

为了修复这个问题，

• 从你的typescript配置中删除baseUrl使用。
• 项目中仅使用相对导入，如../somefile、./somefolder/file等。

已修复此处

- Sivasankar

---

不幸的是，这是开发基础设施包时唯一的方法！ - TacB0sS

我最终也做到了这件事。 - Sergiy Ostrovsky