带有 Typescript rootDirs 的 Webpack 2 模块解析

Question

对于以下目录结构：

..src/frontend/...
..src/frontend/src/...
..src/frontend/config/webpack.common.js
..src/shared/src/models/User.ts

我已经使用 rootDirs 设置了我的 Typescript。这非常方便，因为我可以为前端和后端创建一个共享文件夹。

这让我可以重写一个又长又丑的导入语句

import {User} from "../../../shared/src/models/User";

到这里

import {User} from "../models/User";

这很好用，我的 TypeScript 服务很高兴并且能够解决所有模块等问题。问题出在 Webpack 上。

它似乎没有查看 tsconfig 文件来进行模块解析。所以去Webpack 2 documentation。我为 resolve.modules 找到了以下内容。

告诉 webpack 解析时应该搜索哪些目录 模块。

绝对路径和相对路径都可以使用，但请注意它们 行为会有所不同。

我已尝试配置模块：

 modules: [helpers.root('src'), helpers.root('node_modules') , helpers.root( '../shared/src')]

这允许我使用导入语句：

 import {User} from "models/User"; //Note the missing ../

但是现在 TypeScript 不再知道它是什么类型，因为它脱离了 rootDirs 配置。理想情况下，我希望 Webpack 和 Typescript 保持同步。如果我使用长的相对导入路径，那么 webpack 和 typescript 都很高兴。

查看我的配置文件gist。

使用“../models/User”时出现错误

./src/app/environment.ts 中的错误模块未找到：错误：不能 解决 '../models/User' 在 '.../src/frontend/src/app' @ ./src/app/environment.ts 4:0-38 @ ./src/main.browser.ts

Answer 1

您可以在 webpack 中使用“alias”属性，在 tsconfig.json 中使用“paths”属性。

在 tsconfig.json 中：

{
  "compilerOptions": {
     ....
     "baseUrl": ".",
     "paths": {
       "shared/*": "src/shared/src/*"
     }
  }
}

在 webpack.config.js 中：

module.exports = {
  ...
  resolve: {
    ...
    alias: {
        "shared": path.resolve(__dirname, 'src/shared/src')
    }
  }
}

在您的 .ts 文件中，您可以像这样导入：

import {User} from "shared/models/User";