9

我们的项目使用 webpackresolve.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
4

1 回答 1

2

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

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

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

于 2016-08-12T10:06:25.600 回答