Webpack resolve.root和TypeScript loader

Question

我们的项目使用webpack的resolve.root选项来导入模块的绝对路径，避免像"../../../module"这样的写法。目前该项目正在使用babel-loader，工作得非常好。我的任务是将其迁移到Angular 2，并正在进行向TypeScript的过渡。但在使用webpack配置中的resolve.root选项时，ts-loader似乎无法正常工作。

下面是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

- Marc

---

请参见：https://github.com/Microsoft/TypeScript/issues/5039。在TypeScript 2中将实现使用tsconfig.json文件进行此操作的方法。显然，您今天已经可以使用typescript@next进行测试。 - Blackus

Answer 1

在2.0版本之前，TypeScript会尝试从`node_modules`目录以绝对路径加载模块。这是因为TypeScript的模块解析默认设置为“node”，这意味着它的工作方式类似于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-and-tracing

- Sebastian Sebald