找不到带有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.

唯一失败的组合是导入它而没​​有来自我的modules /目录的相对路径.所以我认为问题可能是我的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/
      ??? ...

应用程序/ app.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'
    ]
  }
};

编辑 修复了项目布局.

Answer 1

找不到模块

如果您遇到此问题与动态模块加载使用ESNEXT,

你必须添加"moduleResolution": "node"到你的tsconfig.json.

Answer 2

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

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

tsconfig.json：

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

说明：

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