typescript - Webpack 无法找到 TypeScript(显然)找到的导入

Question

背景:我从(对我来说效果很好)ASP.NET Core example of SignalR and webpack开始。 我的目标是使用this TypeScript library为服务器端权威的多人游戏进行客户端插值。

我认为该问题与 webpack 相关的原因是 VisualStudio 对 box2d.ts 库具有智能感知，并且 tsc 在单独运行时不会报告错误。

这是我第一个使用 webpack 和 TypeScript 的项目，所以如果我错过了一些明显的东西，我深表歉意。

webpack报错:

ERROR in ./src/index.ts
Module not found: Error: Can't resolve 'Box2D' in 
'C:\Users\nathan.b\Desktop\Gamey\Gamey\src'
 @ ./src/index.ts 2:0-31 3:14-26

更新:详细输出错误:

ERROR in ./src/index.ts
Module not found: Error: Can't resolve 'Box2D' in 'C:\Users\nathan.b\Desktop\Gamey\Gamey\src'
resolve 'Box2D' in 'C:\Users\nathan.b\Desktop\Gamey\Gamey\src'
  Parsed request is a module
  using description file: C:\Users\nathan.b\Desktop\Gamey\Gamey\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\Users\nathan.b\Desktop\Gamey\Gamey\src\src doesn't exist or is not a directory
      C:\Users\nathan.b\Desktop\Gamey\Gamey\src\node_modules doesn't exist or is not a directory
      C:\Users\nathan.b\Desktop\Gamey\src doesn't exist or is not a directory
      C:\Users\nathan.b\Desktop\Gamey\node_modules doesn't exist or is not a directory
      C:\Users\nathan.b\Desktop\src doesn't exist or is not a directory
      C:\Users\nathan.b\Desktop\node_modules doesn't exist or is not a directory
      C:\Users\nathan.b\src doesn't exist or is not a directory
      C:\Users\nathan.b\node_modules doesn't exist or is not a directory
      C:\Users\src doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\src doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\nathan.b\Desktop\Gamey\Gamey\src
        using description file: C:\Users\nathan.b\Desktop\Gamey\Gamey\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
      looking for modules in C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules
        using description file: C:\Users\nathan.b\Desktop\Gamey\Gamey\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\nathan.b\Desktop\Gamey\Gamey\package.json (relative path: ./src/Box2D)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\nathan.b\Desktop\Gamey\Gamey\package.json (relative path: ./node_modules/Box2D)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D is not a file
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D.js doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D.js doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D.ts doesn't exist
              C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D.ts doesn't exist
            as directory
              C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D doesn't exist
            as directory
              existing directory
                using path: C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index
                  using description file: C:\Users\nathan.b\Desktop\Gamey\Gamey\package.json (relative path: ./src/Box2D/index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index.js doesn't exist
                    .ts
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index.ts doesn't exist
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\src]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\node_modules]
[C:\Users\nathan.b\Desktop\Gamey\src]
[C:\Users\nathan.b\Desktop\Gamey\node_modules]
[C:\Users\nathan.b\Desktop\src]
[C:\Users\nathan.b\Desktop\node_modules]
[C:\Users\nathan.b\src]
[C:\Users\nathan.b\node_modules]
[C:\Users\src]
[C:\Users\node_modules]
[C:\src]
[C:\node_modules]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D.js]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D.js]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D.ts]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\node_modules\Box2D.ts]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index.js]
[C:\Users\nathan.b\Desktop\Gamey\Gamey\src\Box2D\index.ts]
 @ ./src/index.ts 2:0-31 3:14-26

index.ts:
足以确保没有编译出任何内容。

import * as signalR from "@aspnet/signalr";
import * as box2d from "Box2D";

const g: box2d.b2Vec2 = new box2d.b2Vec2(0, -10)
console.log(g);

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/hub")
    .build();

tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "Box2D": [ "./Box2D/Box2D" ]
    }
  }
}

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, "wwwroot"),
        filename: "[name].[chunkhash].js",
        publicPath: "/"
    },
    resolve: {
        extensions: [".js", ".ts"]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader"
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(["wwwroot/*"]),
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].[chunkhash].css"
        })
    ]
};

项目结构:

Answer 1

所以我终于让它工作了。我必须明确引用 Box2D 库路径。没有 glob 变体起作用(/* 或 **/*)，但也许我在那里遗漏了一些东西。

变化:

resolve: {
    modules: ['./src/Box2D', 'node_modules'],
    extensions: [".js", ".ts"]
},