Javascript 网页打包期间发生Typescript ModuleNotFound异常

这个问题是关于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”导入*

我的网页包配置为：

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

---

注意：通过npm安装的parse json包有nop类型定义文件。

问题是，

parse json

是一个JavaScript模块，通常使用导入，如

/vendor/parse

，它会按节点自动解析为

/vendor/parse.js

。在webpack配置中，您告诉webpack仅解析

.ts

扩展名。要解决此问题，您还必须将

.js

添加到：

另一方面，当您想从npm安装的模块导入时，不应该指定确切的相对路径，而应该指定它的名称，就像这样（我给它的名称也比

a

好）：

基本上，当它不是您从中导入的相对路径时，它将查看

节点_模块

（在当前目录和所有父目录中），然后将到达项目的顶级目录，其中

节点_模块

包含

解析json

。另外，您不应该指定要从

parse json/index.js

中的

index.js

导入，因为模块定义了一个在导入时使用的入口点，在本例中实际上就是

index.js

有关模块分辨率的更多信息，请参阅：

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

import * as parseJson from "parse-json";