Question

我开发了通过npm分发的组件库，并在tsconfig中主动使用baseUrl设置。这真的很棒，所以我可以轻松写出

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

而不是可怕的

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

另外，我分发的不是编译的bundle，而是纯粹的单独的es6模块。我有主index.ts个文件，像这样重新导出

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

现在是时候构建软件包并将其发布到npm - TS不会将路径替换为相对路径。用户会收到错误，例如＆＃34;找不到模块＆＃39;组件＆＃34;＆＃34;，因为他们的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 {}

我会得到

file.js 即可。 TS启动所有类型（例如import { SomeInterface }），然后Babel转换代码并替换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';
...

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

0 个答案: