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 ";

내 웹팩 구성은 다음과 같습니다

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 :

"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** 

참고 : NOP 유형 정의 파일에 대한 있습니다 parse-json 패키지를 설치합니다.

Answer 1

parse-json은 JavaScript 모듈이며 ./vendor/parse과 같은 가져 오기를 사용하는 것이 일반적이며 이는 노드에 의해 ./vendor/parse.js으로 자동 해결됩니다. 귀하의 webpack 구성에서 webpack에만 .ts 확장을 해결하도록 지시했습니다.

당신이 NPM에 의해 설치된 모듈에서 가져올 보조 노트에

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

, 당신은 정확한 상대 경로를 지정하지 않아야하지만, 단지 : 그 문제를 해결하기 위해 당신은뿐만 아니라 .jsresolve.extension에 추가해야 다음은 현재 디렉토리에 (내부 node_modules를 볼 것이다 당신이 가져올 상대 경로 아니다 기본적으로

import * as parseJson from "parse-json"; 

모든 부모 디렉토리 : 그 이름은,과 같이 (나는 또한 그것을 a보다 더 좋은 이름을 준)) 그러면 프로젝트의 최상위 디렉토리 인 node_modules에는 parse-json이 포함됩니다. 또한 index.js에서 가져올 코드를 parse-json/index.js으로 지정하지 않아야합니다. 모듈이 가져올 때 사용되는 진입 점을 정의하기 때문입니다.이 경우 실제로는 index.js입니다.

모듈 해상도에 대한 자세한 내용은 다음을 참조하십시오. https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders