webpack期间发生Typescript ModuleNotFound异常

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

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

Answer 1

问题在于 parse-json 是一个 JavaScript 模块，使用诸如 ./vendor/parse 之类的导入非常常见，它会自动解析为 Node.js 中的 ./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 包含 @987654334 @。而且你不应该在parse-json/index.js中指定你想从index.js导入，因为一个模块定义了一个在导入时使用的入口点，在这种情况下确实是index.js。

有关模块分辨率的更多信息，请查看：https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders