Webpack cantはTypeScriptモジュールを解決できません

私は中継用の小さなwebpackとtypescriptデモを作ります。私はこの問題は何ができるか見当もつかないWebpack cantは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

：私はwebpack.config.jsとのWebPACKを実行した場合は、私はこのエラーを取得します。モジュールのエクスポートは正しいはずです。

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

あなたのapp.tsに関して./MyModuleのMyModuleモジュールが見つかりません。ディレクトリ構造はどのようなものですか？これが機能するには、app.tsと同じディレクトリにMyModule.tsファイルが必要です。 –

はいsrc/app.jsはsrc/app.tsです –

Webpackは、デフォルトでは.tsファイルを検索しません。 .tsを探すようにresolve.extensionsを設定することができます。デフォルト値も追加することを忘れないでください。そうしないと、ほとんどのモジュールは、.jsという拡張子が自動的に使用されるという事実に依存するため、破損します。

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

出典

2017-04-24 19:59:05

ありがとうございました:) webpackがモジュールを見つけようとする前にts-loaderがファイルを書き換えていたというのが私の考えでした。 –

tsconfig.js - "module"： "commonjs"で使用しますが、コードではes6モジュールを使用します。私は、あなたは "モジュール"を変更する必要があると思います： "ES6"。

出典

2017-04-24 19:08:30

変更なし私は "モジュール"はモジュールのタイプと考えています。Typescriptはes6モジュールから生成します –

Webpack cantはTypeScriptモジュールを解決できません

答えて

関連する問題