javascript - 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”导入 * 作为 a;

我的 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()
  ]
}

ts配置:

 "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 之类的导入，它会自动解析为 ./vendor/parse.js 由 Node.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。而且您也不应该指定要从 parse-json/index.js 中的 index.js 导入，因为模块定义了使用的入口点当它被导入时，在本例中确实是 index.js。

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