如何定义相对于某个根的打字稿导入路径(使用webpack)?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何定义相对于某个根的打字稿导入路径(使用webpack)?相关的知识,希望对你有一定的参考价值。

我正在编写一个Vue应用程序,它有许多嵌套在不同文件夹中的组件。我的文件夹结构如下所示:

src folder
+components folder 
++partA folder
+++A.vue
+++AA.ts
+++subA folder
++++AAA.ts
++partB
+++B.vue
+++BB.ts

在我的typeScript文件中,我有时需要引用其他组件之一,所以我最终得到的代码如下:

import { something } from '../../partB/BB'
import { another } from './subA/AAA'

有没有办法设置webpack,以便我总是可以指定相对于root(src)文件夹的组件的导入路径,而不是定义一组特定于使用import语句的文件的相对路径?

答案

我通过使用webpack的解析别名找到了一个解决方案:https://webpack.js.org/configuration/resolve/

与tsconfig.json(https://www.typescriptlang.org/docs/handbook/compiler-options.html)一起使用。我需要指定一个baseUrl和路径来匹配我在解析别名中设置的内容。

以上是关于如何定义相对于某个根的打字稿导入路径(使用webpack)?的主要内容,如果未能解决你的问题,请参考以下文章

打字稿无法解析导入中的非相对路径

将打字稿路径别名编译为 NPM 发布的相对路径?

打字稿路径在 Express 项目中不起作用

如何在打字稿中正确导入自定义类型

如何在没有参考路径的 angularjs 应用程序中使用打字稿定义文件(.d.ts)?

如何修复 eslint 抱怨打字稿的路径别名