Webpack解决.root和TypeScript加载器

Webpack resolve.root and TypeScript loader

本文关键字：加载 TypeScript 解决 root Webpack      更新时间：2023-09-26

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

2.0版本前的TypeScript会尝试用node_modules目录中的绝对路径来加载模块。这是因为TypeScript的模块结果默认设置为"node"。这意味着它像node的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

相关文章：