Webpack resolve.root 和 TypeScript 加载器

Question

我们的项目使用 webpack resolve.root 选项来导入具有绝对路径的模块。（避免类似 ../../../module）
在目前的状态下，该项目正在使用 babel-loader，它工作得很好。
我的任务是将应用程序迁移到 Angular 2.
因此，我目前正在过渡到 TypeScript。
不知何故，ts-loader 似乎无法与 webpack 配置的 resolve.root 选项结合使用。

示例 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-and-tracing

Webpack resolve.root 和 TypeScript 加载器

Webpack resolve.root and TypeScript loader

javascript

typescript

ecmascript-6

webpack

ts-loader