关于webpack中的nodejs路径，webpack如何在typescript中找到模块？

Question

我使用 webpack-dev-server 来解析一些打字稿。

我的配置文件：

module.exports={
entry: "./src/index.ts",
output: {
    filename: "main.js"
},
resolve:{
    extensions: ['.ts', '.tsx', 'js'],
    modules: [path.resolve(__dirname, 'src'), "node_modules"]
}
...
}

然后命令行的output：

> cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js
i ｢wds｣: Project is running at http://localhost:8089/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from ./dist
× ｢wdm｣:
ERROR in (webpack)-dev-server/client?http://localhost:8089
Module not found: Error: Can't resolve './overlay' in 'F:\workspace\tslearn\node_modules\webpack-dev-server\client'
@ (webpack)-dev-server/client?http://localhost:8089 10:14-34
@ multi (webpack)-dev-server/client?http://localhost:8089 ./src/index.ts

webpack-dev-server\client.js 中的 index.js 是：

var stripAnsi = require('strip-ansi');

var socket = require('./socket');

var overlay = require('./overlay');

var _require = require('./utils/log'),

./overlay.js 位于路径“F:\workspace\tslearn\node_modules\webpack-dev-server\client”下

但是js还是找不到。

vscode给我的指示是：

Could not find a declaration file for module './socket'. 'f:/workspace/tslearn/node_modules/webpack-dev-server/client/socket.js' implicitly has an 'any' type.

如何解决？ Typescript 和 JavaScript 有什么不同？

Answer 1

背景
Webpack itself doesn't deal with Typescript, it uses a helper such as ts-loader or other depending on the webpack configuration file webpack.config.js . 配置示例：

      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'ts-loader',
              options: {
                transpileOnly: true,
                happyPackMode: true,
                configFile: path.resolve(__dirname, 'tsconfig.json'),
              },
            }
          ],
        },
        ...
        other rules
        ...
      ]

ts-loader 将使用 tsconfig.json 中的配置设置tsconfig.json 。

如何解决？ Typescript 和 JavaScript 有什么不同？

tsconfig.json应该有"allowJs": true否则 Typescript 编译器在解析导入时不会考虑.js 文件。 此外 Typescript 编译器应该能够找到overlay.js和 other.js 文件。 它将在TypeScript 如何解析模块标题下记录的几个地方进行搜索。

最后，为了摆脱与声明相关的错误，编写声明文件，例如overlay.d.ts并将其放在相应的.js 文件旁边。