Typescript ModuleNotFound在webpack期間發生異常

Question

關於webpack - typescript和npm的這個問題。 我的文件夾結構：

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

在TemplateInvestage Main.ts試圖導入JSON解析器：

進口*爲從」 ../../../node_modules/parse-json/index .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：

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



} 

當我運行的WebPack我得到了以下錯誤

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類型定義文件通過npm安裝的parse-json軟件包。

Answer 1

問題是parse-json是一個JavaScript模塊，使用一個導入例如./vendor/parse，它很自然地被Node解析爲./vendor/parse.js。在你的webpack配置中，你告訴webpack只能解析.ts擴展。爲了解決這個問題，你必須添加.js到resolve.extension還有：

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

在一個側面說明，當你想通過NPM安裝的模塊導入，你不應該指定確切的相對路徑，只是它的名字，像這樣（我也把它比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