Typescript ModuleNotFound webpack中に例外が発生しました

Question

Webpack - typescriptおよびnpmについてのこの質問。 マイフォルダ構造：../../../node_modules/parse-json/index「からと*

インポート：TemplateInvestage Main.tsで

. 
-src 
--apps 
---TemplateInvestigate  
    Main.ts 
-node_modules 
--parse-json 
    index.js 
---vendor  
    parse.js  
    unicode.js 

は、JSONパーサーをインポートしよう.js ";

マイWebPACKの構成は次のとおりです。

var ES5to3OutputPlugin = require("es5to3-webpack-plugin"); 
module.exports = { 
    entry: { 

     'TemplateInvestigate':"./src/apps/TemplateInvestigate/Main.ts" 
    }, 

    output: { 
    filename: './dist/[name].jsx' 
    }, 
    resolve: { 
    extensions: [ '.ts'] 
    }, 
    module: { 
    loaders: [ 
     { test: /\.ts$/, loader: 'ts-loader' } 
    ] 
    } 
    ,plugins : [ 
    new ES5to3OutputPlugin() 
    ] 
} 

のTSconfig：用のnopタイプ定義ファイルがあります：私はWebPACKのを実行すると

"compilerOptions": { 
// "module": "commonjs", 
    "noImplicitAny": false 
    , "noEmitOnError": true 
    , "removeComments": false 
    ,"moduleResolution": "node" 
    ,"allowJs" : true 
    ,"baseUrl": "." 
    } 



} 

私はエラー

ModuleNotFoundError: Module not found: Error: Can't resolve './vendor/parse' 
in 'K:\projectFolder\node_modules\parse-json' 
    at factoryCallback (C:\AppData\Roaming\npm\node_modules\webpack\ 
lib\Compilation.js:259:39) 
    at C:\AppData\Roaming\npm\node_modules\webpack\lib\NormalModuleF 
actory.js:234:19 
    at onDoneResolving (C:\AppData\Roaming\npm\node_modules\webpack\ 
lib\NormalModuleFactory.js:59:20) 
    at C:\AppData\Roaming\npm\node_modules\webpack\lib\NormalModuleF 
actory.js:126:20 
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\asyn 
c\dist\async.js:3694:9 
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\asyn 
c\dist\async.js:359:16 
    at iteratorCallback (C:\AppData\Roaming\npm\node_modules\webpack 
\node_modules\async\dist\async.js:933:13) 
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\asyn 
c\dist\async.js:843:16 
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\asyn 
c\dist\async.js:3691:13 
    at apply (C:\AppData\Roaming\npm\node_modules\webpack\node_modul 
es\async\dist\async.js:21:25) 
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\asyn 
c\dist\async.js:56:12 
    at C:\AppData\Roaming\npm\node_modules\webpack\lib\NormalModuleF 
actory.js:121:22 
    at onResolved (C:\AppData\Roaming\npm\node_modules\webpack\node_ 
modules\enhanced-resolve\lib\Resolver.js:70:11) 
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w 
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 
    at afterInnerCallback (C:\AppData\Roaming\npm\node_modules\webpa 
ck\node_modules\enhanced-resolve\lib\Resolver.js:138:10) 
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w 
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 
    at Resolver.applyPluginsAsyncSeriesBailResult1 (C:\AppData\Roami 
ng\npm\node_modules\webpack\node_modules\tapable\lib\Tapable.js:181:46) 
    at innerCallback (C:\AppData\Roaming\npm\node_modules\webpack\no 
de_modules\enhanced-resolve\lib\Resolver.js:125:19) 
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w 
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\tapa 
ble\lib\Tapable.js:283:15 
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\enha 
nced-resolve\lib\UnsafeCachePlugin.js:38:4 
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w 
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 
    at afterInnerCallback (C:\AppData\Roaming\npm\node_modules\webpa 
ck\node_modules\enhanced-resolve\lib\Resolver.js:138:10) 
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w 
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 
    at Resolver.applyPluginsAsyncSeriesBailResult1 (C:\AppData\Roami 
ng\npm\node_modules\webpack\node_modules\tapable\lib\Tapable.js:181:46) 
    at innerCallback (C:\AppData\Roaming\npm\node_modules\webpack\no 
de_modules\enhanced-resolve\lib\Resolver.js:125:19) 
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w 
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\tapa 
ble\lib\Tapable.js:283:15 
    at innerCallback (C:\AppData\Roaming\npm\node_modules\webpack\no 
de_modules\enhanced-resolve\lib\Resolver.js:123:11) 
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w 
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 
resolve './vendor/parse' in 'K:\projectFolder\node_module 
s\parse-json' 
**using description file: K:\projectFolder\node_modules\p 
arse-json\package.json (relative path: .) 
    Field 'browser' doesn't contain a valid alias configuration 
    after using description file: K:\projectFolder\node_mod 
ules\parse-json\package.json (relative path: .) 
    using description file: K:\projectFolder\node_modules 
\parse-json\package.json (relative path: ./vendor/parse) 
     as directory 
     K:\projectFolder\node_modules\parse-json\vendor\parse doesn't exist 
     no extension 
     Field 'browser' doesn't contain a valid alias configuration 
     K:\projectFolder\node_modules\parse-json\vendor\parse doesn't exist 
     .ts 
     Field 'browser' doesn't contain a valid alias configuration 
     K:\projectFolder\node_modules\parse-json\vendor\parse.ts doesn't exist** 

注意を以下ましたparse-jsonパッケージをインストールします。

Answer 1

parse-jsonはJavaScriptモジュールであり、./vendor/parseなどのインポートを使用するのは非常に一般的で、Nodeによって自動的に./vendor/parse.jsに解決されます。ウェブパックの設定では、webpackに.tsの拡張子のみを解決するように指示しました。

あなたがNPMによってインストールされたモジュールからインポートするサイドノート、オン

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

は、あなたが正確な相対パスを指定する必要はありませんが、ちょうど：その問題を解決するにはあなたにも.jsresolve.extensionにを追加する必要がありますその名前は、そのように（私もそれをaより良い名前を与えた）：それはあなたがインポート相対パスではありませんとき

import * as parseJson from "parse-json"; 

は基本的に、それは現在のディレクトリとすべての親ディレクトリに（node_modulesの内側になります）、あなたのプロジェクトの最上位ディレクトリに到達します。ここで、node_modulesにはparse-jsonが含まれています。また、index.jsからインポートする場合は、parse-json/index.jsにインポートすることを指定しないでください。モジュールがインポート時に使用されるエントリポイントを定義しているためです（実際はこの場合はindex.js）。 https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders