angular - 使用 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 找到了以下内容。

Tell webpack what directories should be searched when resolving modules.

Absolute and relative paths can both be used, but be aware that they will behave a bit differently.

我试过配置模块:

 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”时出现错误

ERROR in ./src/app/environment.ts Module not found: Error: Can't resolve '../models/User' in '.../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";