Webpack无法解析TypeScript模块 [英] Webpack cant resolve TypeScript modules
问题描述
我构建了一个继电器小型webpack和打字稿演示。
如果我使用webpack.config.js运行webpack我会收到此错误：
./js/中的错误app.ts
找不到模块：错误：无法解析'/ Users / timo / Documents / Dev / Web / 02_Tests / webpack_test / js'中的'./MyModule'
@ ./js/ app.ts 3：17-38
我不知道问题是什么。模块导出应该是正确的。
webpack.config.js
const path = require（'path'）; module.exports = {entry：'。/ js / app.ts'，output：{path：path.resolve（__ dirname，'dist'），filename：'bundle.js'} ，module：{rules：[{test：/\.ts$/,use：'ts-loader'}]}};
tsconfig.json
{compilerOptions：{ target：es5，suppressImplicitAnyIndexErrors：true，严格NullChecks：false，lib：[es5，es2015.core，dom]，module：commonjs，moduleResolution：node，outDir：dist}， include：[js / ** / *]}
src / app.js
从'./MyModule'导入{MyModule};'m mym = new MyModule（）;的console.log（ '演示'）; mym.createTool（）;的console.log（mym.demoTool（3,4））;
src / MyModule.ts
export class MyModule {createTool（）{console.log（Test 123）; } demoTool（x：number，y：number）{return x + y; }};
src / index.html
< html> < HEAD> <标题>演示< /标题> < base href =/> < /头> <身体GT; < script src =dist / bundle.js>< / script> < / body>< / html>
默认情况下，Webpack不会查找 .ts 文件。您可以配置 resolve.extensions 寻找 .ts 。不要忘记添加默认值，否则大多数模块都会中断，因为它们依赖于自动使用 .js 扩展名的事实。
解决：{
extensions：['。ts'，'。js'，'。json']
}
I build a relay small webpack and typescript demo to play with. If i run webpack with the webpack.config.js i get this error:
ERROR in ./js/app.ts
Module not found: Error: Can't resolve './MyModule' in '/Users/timo/Documents/Dev/Web/02_Tests/webpack_test/js'
@ ./js/app.ts 3:17-38
I have no clue what the problem could be. The module export should be correct.
webpack.config.js
const path = require('path');
module.exports = {
entry: './js/app.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{test: /\.ts$/, use: 'ts-loader'}
]
}
};
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"suppressImplicitAnyIndexErrors": true,
"strictNullChecks": false,
"lib": [
"es5", "es2015.core", "dom"
],
"module": "commonjs",
"moduleResolution": "node",
"outDir": "dist"
},
"include": [
"js/**/*"
]
}
src/app.js
import { MyModule } from './MyModule';
let mym = new MyModule();
console.log('Demo');
mym.createTool();
console.log(mym.demoTool(3,4));
src/MyModule.ts
export class MyModule {
createTool() {
console.log("Test 123");
}
demoTool(x:number ,y:number) {
return x+y;
}
};
src/index.html
<html>
<head>
<title>Demo</title>
<base href="/">
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
Webpack does not look for .ts files by default. You can configure resolve.extensions to look for .ts. Don't forget to add the default values as well, otherwise most modules will break because they rely on the fact that the .js extension is automatically used.
resolve: {
extensions: ['.ts', '.js', '.json']
}
这篇关于Webpack无法解析TypeScript模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![文件夹结构](\"https://i.stack.imgur.com/806CP.png\"){kind=link}
