使用别名而不是相对路径创建的打字稿声明文件

Posted 2023-03-13

【中文标题】使用别名而不是相对路径创建的打字稿声明文件

【英文标题】：Typescript declaration file created with alias instead of relative path

【发布时间】：2019-03-01 04:57:49

【问题描述】：

编辑 1：将 GitHub URL 添加到项目

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

链接：Github

如何生成带有相对路径而不是 alias 的 typescript 声明文件？

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

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

编译日志：

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

utils/bar.ts

export const bar = 
   hello: "World"

src/foo.ts

import  bar  from "./utils/bar.ts

export default const Foo = 
    bar
;

【参考方案1】：

你不走运：TypeScript 不会重写导入路径。见this declined suggestion。除非您也在使用项目中配置别名，否则您需要避免在库中使用别名。

【讨论】：

虽然我明白.. 我觉得这是一个很成熟的决定！

【参考方案2】：

为了解决这个问题，

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

固定here

【讨论】：

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

【参考方案3】：

好吧，如果没有重大的诡计，它似乎是行不通的，但最终，我想通了。所以问题是需要重写类型声明路径。为此，您需要一些捆绑器/编译器来为您完成。我想有各种软件包可以用于基于tsc 的编译，但在我的情况下，我使用的是 Rollup，所以没有那么多。好吧，我只找到了一个https://github.com/zerkalica/zerollup/tree/master/packages/ts-transform-paths

那里有帮助您使用它的说明。但基本上你需要做的是：

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

现在我的路径从@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()
  ],