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语句：

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

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

查看我的gist配置文件。

使用＆＃39; ../ models / User＆＃39;

时出错

./src/app/environment.ts中的错误找不到模块：错误：无法解决解决＆＃39; ../ models / User＆＃39;在＆＃39; ... / src目录/前端/ src目录/应用＆＃39; @ ./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: {
    ...
    "shared": path.resolve(__dirname, 'src/shared/src')
  }
}

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

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

使用Typescript rootDirs的Webpack 2模块解析

1 个答案: