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

Question

我使用 webpack-dev-server 来解析一些 typescript 。

我的配置文件:

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

然后命令行输出:

> 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 给我的指示是:<​​/p>

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 本身不处理 Typescript，它使用 ts-loader 或其他依赖于 webpack 配置文件 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 中的配置设置来转译 Typescript。

How to fix it? what is different between Typescript and JavaScript on this?

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

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