Question

关于webpack的问题 - 打字稿和npm。我的文件夹结构：

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

在试图导入json解析器的TemplateInvestage Main.ts中：

导入*作为来自＆＃34; ../../../ node_modules / parse-json / index.js＆＃34;;

我的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等导入的节点非常常见，导入会自动解析为./vendor/parse.js。在您的webpack配置中，您告诉webpack仅解析.ts个扩展名。要解决该问题，您还必须将.js添加到resolve.extension：

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

另一方面，当你想从npm安装的模块导入时，你不应该指定确切的相对路径，而只是指定它的名字，就像这样（我还给它一个比{{1}更好的名字}）：

基本上当它不是你导入的相对路径时，它会查看import * as parseJson from "parse-json";（在当前目录和所有父目录中），然后它将到达项目的顶级目录{{1}包含node_modules。此外，您不应指定要从node_modules中的parse-json导入，因为模块定义了导入时使用的入口点，在这种情况下确实是{{ 1}}。

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

Typescript ModuleNotFound在webpack期间发生异常

1 个答案: