如何使用 tsconfig 中的 baseUrl/paths 设置编译打字稿模块

Question

我通过开发新公共管理分布式组件库，并积极利用baseUrl设置在tsconfig。 这真的很棒，所以我可以轻松地写

// <prjRoot>/src/some/deeply/nested/module
import { Component } from 'components';

而不是可怕

// <prjRoot>/src/some/deeply/nested/module
import { Component } from '../../../src/components';

另外，我分发的不是编译包，而是纯粹的独立 es6 模块。 我有像这样index.ts主index.ts文件

export * from './src/components';
export * from './src/another-dir-components';

现在是构建包并将其发布到 npm 的时候了——TS 不会替换相对路径。 用户收到类似“无法找到模块‘组件’”的错误消息，因为他们的 TypeScript（或者他们可能根本不使用 TS）或 Webpack 对我的 baseUrl 设置一无所知。

通过 babel 有一个解决方案 - babel-plugin-module-resolver

它有效，但仅适用于代码。 如果我有这样的代码

import { Component } from 'components'; // actually <prjRoot>/src/components/index.ts
import { SomeInterface } from 'typings'; // <prjRoot>/src/typings/index.ts
...
export default Klass extends React.Component {}

我会得到

文件.js 。 TS 开始了所有关于类型（例如import { SomeInterface } ），然后 Babel 转译代码并from '../../../components'替换from 'components' from '../../../components' 。 伟大的：

import { Component } from '../../../components';
...
/*#__PURE__*/
var Klass = (function (React.Component) {...transpiled babel code...})(React.Component);
export { Klass as default }

file.d.ts （仍然不是相对路径，会出错）：

import { SomeInterface } from 'typings';
...