无法使用 Webpack、Typescript、自定义模块目录找到模块

Question

我想做什么

我写了一个虚拟模块 my-component ，它基本上导出一个类 Something 。我把它放在 app/modules/ 中。现在我想使用 app/app.js 的导入语法来访问它：

 import { Something } from 'my-component';

期望：根据我当前的 Webpack 配置（如下），我希望它能工作。

实际：这会引发错误：

 ERROR in [default] /<project_dir>/app/app.ts:1:26
Cannot find module 'my-component/Something'.

我试图解决的问题

我知道模块本身定义正确，因为

1. 我可以使用相对路径导入它： import { Something } from './my-component'
2. 如果我将模块移动到 node_modules/my-component ，我可以按原样导入它。

唯一失败的组合是在没有我的 模块/ 目录的相对路径的情况下导入它。所以我认为问题可能出在我的 Webpack 配置上。

设置细节

正如您在下面看到的，我将两个目录列为 resolve.root ：

• project_dir/app
• project_dir/node_modules

它似乎设法从 node_modules 解决，而不是从 app 解决。

项目布局

                               Webpack
project_dir/
 ├── app/                      context, resolve.root
 │    ├── app.ts
 │    └── my-component/
 │         ├── index.ts
 │         └── Something.ts
 ├── webpack.config.js
 ├── node_modules/             resolve.root
 │    ├── ...
 │    ├── ...
 │    └── ...
 └── dist/
      └── ...

应用程序/应用程序.ts

 import { Something } from 'my-component/Something';

应用程序/我的组件/index.ts

 export { Something } from './Something'

应用程序/我的组件/Something.ts

 class Something {
}

export { Something };

webpack.config.js

 var path = require('path'),
  ROOT = path.resolve(__dirname, '.');

module.exports = {
  context: path.resolve(ROOT, 'app'),
  entry: 'app.ts',
  output: {
    path: path.resolve(ROOT, 'dist'),
    filename: '[name]-[hash].js'
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'awesome-typescript' }
    ]
  },
  resolve: {
    root: [
      path.resolve(__dirname, 'app'),
      path.resolve(__dirname, 'node_modules')
    ],
    extensions: [
      '', '.ts', '.js'
    ]
  }
};

编辑 修复了项目布局。

原文由 marius 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

找不到模块

如果您在使用 ESNEXT 加载动态模块 时遇到此问题，

您必须将 "moduleResolution": "node" 添加到您的 tsconfig.json 。

原文由 Legends 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我找到了一个比以前接受的解决方案更简单的解决方案：

在您的打字稿配置中，在 baseUrl 中设置 compilerOptions ：

tsconfig.json ：

 {
  "compilerOptions": {
    "baseUrl": "./app",
    ...
  },
  ...
}

---

解释：

Webpack 和 Typescript 默认使用节点模块解析，这很好。但是，在设置自定义模块文件夹时，您需要在 Webpack 和 Typescript 配置中配置它们。对 Webpack 模块解析配置的更改不会传播到 Typescript 编译器。

原文由 marius 发布，翻译遵循 CC BY-SA 3.0 许可协议