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

Pre version 2.0 TypeScript将尝试使用node_modules目录中的绝对路径加载模块。这是因为TypeScript的模块结果默认设置为＆＃34; node＆＃34;。这意味着它就像节点的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

Webpack resolve.root和TypeScript加载器

1 个答案: