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