如何定义相对于某个根目录的打字稿导入路径（使用 webpack）？答案

【问题标题】：How to define a typescript import path relative to some root (using webpack)?如何定义相对于某个根目录的打字稿导入路径（使用 webpack）？
【发布时间】：2018-05-28 20:03:39
【问题描述】：

我正在编写一个 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，这样我就可以始终指定我的组件相对于根 (src) 文件夹的导入路径，而不是定义一堆特定于使用 import 语句的文件？

【问题讨论】：

标签： javascript typescript webpack import

【解决方案1】：

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

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

【讨论】：