Webpack无法解析TypeScript模块

我构建了一个中继小型webpack和打字稿演示来玩。如果我运行与webpack.config.js的WebPack我得到这个错误：Webpack无法解析TypeScript模块

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>

来源

2017-04-24 Timo Paul

是src/app.js应该是文件名中的src/app.ts？ – waterfoul

它没有找到你的MyModule，模块在./MyModule与你的app.ts有关。你的目录结构是什么样的？您需要在与您的app.ts相同的目录中有一个MyModule.ts文件才能工作。 –

是src/app.js是src/app.ts对不起 –

默认情况下，Webpack不会查找.ts文件。您可以配置resolve.extensions以查找.ts。不要忘记添加默认值，否则大多数模块会中断，因为它们依赖于自动使用.js扩展的事实。

resolve: { 
    extensions: ['.ts', '.js', '.json'] 
}

来源

2017-04-24 19:59:05

谢谢:) 我的想法是，ts-loader在webpack尝试查找模块之前传输文件。 –

你在tsconfig.js中使用 - “module”：“commonjs”，但是在你的代码中使用es6模块。我想，你应该改变“模块”：“ES6”。

来源

2017-04-24 19:08:30

没有变化。我认为“模块”是模块Typescript从es6模块生成的类型 –

Webpack无法解析TypeScript模块

回答

相关问题