Webpack 2模块解析式rootDirs打字稿

Question

对于以下目录结构：

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

我已经使用rootDirs设置了我的打字本。这是相当方便，因为我可以有一个共享文件夹的前端和后端。

这允许我重写一个长而丑陋的导入语句。

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

到这个

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

这是很好的工作，我的TypeScript服务是快乐的，能够解决所有模块等。这个问题来自Webpack。

它似乎没有查看tsconfig文件以获得模块解析。所以去Webpack 2文献吧。我为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和打字稿保持同步。如果我使用长的相对进口路径，那么webpack和打字本都很高兴。

查看我的配置文件的要旨。

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

未找到./src/app/environment.ts .38模块中的错误:错误:无法解析‘./模型/用户’中的‘./src/前端/src/app’@ ./src/app/environment.ts .38 4:0-38 @/src/main.Browser.ts

Answer 1

您可以在webpack中使用“别名”属性，在tsconfig.json中使用“路径”属性。

在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";