Webpack resolve.root 和 TypeScript 加载器答案

【问题标题】：Webpack resolve.root and TypeScript loaderWebpack resolve.root 和 TypeScript 加载器
【发布时间】：2016-11-03 14:45:54
【问题描述】：

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

【问题讨论】：

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

标签： javascript typescript ecmascript-6 webpack ts-loader

【解决方案1】：

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

【讨论】：