Webpack 无法解析 TypeScript 模块
Webpack cant resolve TypeScript modules
我构建了一个中继小型 webpack 和 typescript 演示来玩。
如果我使用 运行 webpack webpack.config.js 我得到这个错误:
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
我不知道问题出在哪里。模块导出应该是正确的。
Folder Structure
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 默认不查找 .ts
文件。您可以配置 resolve.extensions
来查找 .ts
。不要忘记也添加默认值,否则大多数模块都会崩溃,因为它们依赖于自动使用 .js
扩展这一事实。
resolve: {
extensions: ['.ts', '.js', '.json']
}
留在这里供后代使用,但我遇到了完全相同的问题,我的问题是我的进入路径不是相对的而是绝对的。我更改了条目:
entry: 'entry.ts'
至
entry: './entry.ts'
上面的所有建议都试过了,还是不行。
最终成为最微小的细节:
在webpack.js中,而不是:
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
顺序应该是:
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
不知道为什么这是必要的,老实说,我现在不关心...
我使用的是 tsconfig 而不是 webpack,它也将子模块编译成一个包 (index.js)。
我的问题是我在从外部引用它之前忘记编译子模块(即 运行 tsc
以生成 index.js)。
我来晚了一点,但最好使用:
resolve: {
extensions: ['.jsx', '.ts', '.tsx', '...']
}
...
意味着我们不会覆盖默认值,只会添加到它
我构建了一个中继小型 webpack 和 typescript 演示来玩。 如果我使用 运行 webpack webpack.config.js 我得到这个错误:
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
我不知道问题出在哪里。模块导出应该是正确的。
Folder Structure
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 默认不查找 .ts
文件。您可以配置 resolve.extensions
来查找 .ts
。不要忘记也添加默认值,否则大多数模块都会崩溃,因为它们依赖于自动使用 .js
扩展这一事实。
resolve: {
extensions: ['.ts', '.js', '.json']
}
留在这里供后代使用,但我遇到了完全相同的问题,我的问题是我的进入路径不是相对的而是绝对的。我更改了条目:
entry: 'entry.ts'
至
entry: './entry.ts'
上面的所有建议都试过了,还是不行。
最终成为最微小的细节:
在webpack.js中,而不是:
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
顺序应该是:
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
不知道为什么这是必要的,老实说,我现在不关心...
我使用的是 tsconfig 而不是 webpack,它也将子模块编译成一个包 (index.js)。
我的问题是我在从外部引用它之前忘记编译子模块(即 运行 tsc
以生成 index.js)。
我来晚了一点,但最好使用:
resolve: {
extensions: ['.jsx', '.ts', '.tsx', '...']
}
...
意味着我们不会覆盖默认值,只会添加到它