Javascript Webpack 无法解析 TypeScript 模块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43595555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack cant resolve TypeScript modules
提问by Timo Paul
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:
我构建了一个中继小型 webpack 和 typescript 演示来玩。如果我使用 webpack.config.js 运行 webpack，我会收到此错误：
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
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
源代码/应用程序.js
import { MyModule } from './MyModule';
let mym = new MyModule();
console.log('Demo');
mym.createTool();
console.log(mym.demoTool(3,4));src/MyModule.ts
src/MyModule.ts
export class MyModule {
createTool() {
console.log("Test 123");
}
demoTool(x:number ,y:number) {
return x+y;
}
};src/index.html
源代码/索引.html
<html>
<head>
<title>Demo</title>
<base href="/">
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>回答by Michael Jungo
Webpack does not look for .tsfiles by default. You can configure resolve.extensionsto 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 .jsextension is automatically used.
Webpack.ts默认不查找文件。您可以配置resolve.extensions以查找.ts. 不要忘记添加默认值，否则大多数模块都会中断，因为它们依赖于.js自动使用扩展的事实。
resolve: {
extensions: ['.ts', '.js', '.json']
}
回答by Jonathan
Tried all the suggestions above and it still didn't work.
上面的建议都试过了，还是不行。
Ended up being the tiniest detail:
最终成为最微小的细节：
In webpack.js, instead of:
在 webpack.js 中，而不是：
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
The ordering should be:
顺序应该是：
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
Don't know why this is necessary, and to be quite honest, I'm beyond caring at this point...
不知道为什么这是必要的，老实说，我现在不在乎......
回答by Dana Woodman
Leaving this here for posterity, but I had this exact same issue and my problem was that my entry path was not relative but absolute. I changed entry from:
把这个留在这里给后代，但我有这个完全相同的问题，我的问题是我的进入路径不是相对的而是绝对的。我改变了条目：
entry: 'entry.ts'
to
到
entry: './entry.ts'
回答by Nic Scozzaro
I'm using tsconfig instead of webpack which also compiles the submodule to a bundle (index.js).
我正在使用 tsconfig 而不是 webpack，它也将子模块编译为一个包（index.js）。
The issue for me was that I had forgotten to compile the submodule (ie run tscto generate index.js) before referencing it from outside.
我的问题是我忘记tsc在从外部引用它之前编译子模块（即运行以生成 index.js）。
