javascript - 如何定义相对于某个根目录的 typescript 导入路径(使用 webpack)?

标签 javascript typescript webpack import

我正在编写一个 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 语句的文件?

最佳答案

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

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

关于javascript - 如何定义相对于某个根目录的 typescript 导入路径(使用 webpack)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47818316/

相关文章:

playframework - 如何从 SBT 运行 webpack

javascript - 在 Google Chrome 的隐身窗口中打开链接

javascript - 在宽度增加的元素中滚动时内容跳跃/不自然的移动

typescript - TypeScript 有像 Kotlin 这样的扩展吗?

typescript - 如何使用 Webpack 和 Angular2 包含外部 css 文件?

css - 使用 CSS 模块时无法在 Sass 中解析图像

javascript - 移动设备上的 HTML5 视频差距很大

javascript - 使用 Cycle2 的响应式轮播

javascript - 没有定义的 npm 包的 Typescript 导入

javascript - Angular2 - 具有 ng 风格的 SVG