编辑1:将GitHub URL添加到项目中
编辑2:从baseUrl
中删除tsconfig.json
可以解决所有问题,并且使用相对导入效果很好。
链接:Github
如何生成带有相对路径而不是alias
的打字稿声明文件?
我正在以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
};
答案 0 :(得分:1)
您不走运:TypeScript不会重写导入路径。参见this declined suggestion。除非您也在使用项目中配置别名,否则您将需要避免在库中使用别名。
答案 1 :(得分:0)
好吧,如果没有重大技巧,它似乎无法工作,但最终,我想通了。所以问题是需要重写类型声明路径。为此,您需要一些捆绑程序/编译器来为您完成。我想有各种软件包可以用于基于 tsc
的编译,但在我的情况下,我使用的是 Rollup,所以没有那么多。嗯,我只找到了一个 https://github.com/zerkalica/zerollup/tree/master/packages/ts-transform-paths
那里有帮助您使用它的说明。但基本上你需要做的是:
yarn add -D @zerollup/ts-transform-paths ttypescript
rollup.config.js
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()
],
}
答案 2 :(得分:-2)