Webpack resolve.root和TypeScript加载器

Question

我们的项目使用webpack resolve.root选项导入具有绝对路径的模块.(避免类似的东西../../../module)
在目前的状态下,该项目正在使用babel-loader,它可以很好地工作.
我的任务是将应用程序迁移到Angular 2.
因此,我目前正在转换到TypeScript.
不知何故,似乎ts-loader与resolve.rootwebpack配置的选项不兼容.

所述的实施例webpack.config.js

resolve: {
    root: [
        path.resolve('./node_modules'),
        path.resolve('./app'),
        path.resolve('./app/lib'),
    ]
},

模块导入示例
import AbstractListState from 'states/abstract_list_state';

该states目录位于app/lib目录中.

执行时出错 webpack

ERROR in ./app/mainViews/panel/panel.controller.ts
Module not found: Error: Cannot resolve module 'states/abstract_list_state' in C:\Users\...\Project\app\mainViews\panel
 @ ./app/mainViews/panel/panel.controller.ts 4:28-65

Answer 1

2.0 版本之前的 TypeScript 将尝试从node_modules目录中使用绝对路径加载模块。这是因为 TypeScript 的模块结果默认设置为“node”。这意味着它的工作方式类似于节点的 require 方法。因此，即使您使用 webpack 来构建应用程序，TypeScript（及其编译器）仍然需要加载文件。

为了让 webpack 使用绝对路径导入模块，你必须返回并使用该require方法。这样 TypeScript 就会让 webpack 导入东西。但当然你不会得到任何类型推断、自动完成......

或者，您更新到 TypeScript 2.0 beta 并尝试一下： https: //github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#module-resolution-enhancements-baseurl-path-mapping -rootdirs-和跟踪