我想要做什么
我编写了一个虚拟模块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'.
我尝试修复的问题
我知道这个模块本身是正确定义的,因为:
- 我可以使用相对路径导入它:
import { Something } from './my-component'
- 如果我将该模块移动到
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/app.ts
import { Something } from 'my-component/Something';
app/my-component/index.ts
export { Something } from './Something'
app/my-component/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'
]
}
};
编辑 已修正项目布局。
import { Something } from './my-component/Something';
吗?相对路径必须以./开头,等等。如果没有,则假定为“node_modules”。 - Jason Kleban