javascript - Webpack 无法解析 TypeScript 模块

标签 javascript typescript webpack ts-loader

我构建了一个中继小型 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

我不知道问题出在哪里。模块导出应该是正确的。

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']
}

关于javascript - Webpack 无法解析 TypeScript 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43595555/

相关文章:

AngularFire2 - 使用 db.object 获取单个对象 - 数据来晚了

javascript - 带 Webpack 的 React-Bootstrap 无法在 React-starter-kit 中运行

javascript - Webpack 加载字体

javascript - 从 Mongoose 调用存储的 javascript 函数?

javascript - 结合正则表达式,匹配两者,两者都不匹配

javascript - 在 button_to click 上显示/隐藏 Rails 中的渲染

javascript - 如何获得整个可用空间的高度?

javascript - TypeScript + AMD + out 参数不起作用

angular - 在 ngFor 中插入标签属性值总是会出现 "Got interpolation ({{}}) where expression was expected"错误

typescript - 如何在出现错误时强制 TypeScript 不编译为 JS,使用 Webpack Encore 设置