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

【问题标题】：About nodejs path in webpack, how webpack find modules in typescript?关于 webpack 中的 nodejs 路径，webpack 如何在 typescript 中查找模块？
【发布时间】：2020-01-29 20:35:23
【问题描述】：

我使用 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"]
}
...
}

然后命令行的输出：

> 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 在这方面有什么不同？

【问题讨论】：

您正在尝试将 Javascript 文件 (socket.js) 导入 Typescript 文件 (index.ts) 并且 Javascript 文件没有类型。为 socket.js 添加类型声明，或在 tsconfig.json 中关闭 noImplicitAny。您没有为我们提供足够的信息来诊断其他问题：请提供您的目录结构。
如果我使用扩展名，你知道如何将 javascript fille 导入打字稿：['.ts', '.tsx', 'js']
再次，您发布了两条不同的错误消息。关于Could not find a declaration file for module './socket'. 的修复可以通过创建一个或关闭 tsconfig.json 选项中的 noImplicitAny 来修复。然后是Module not found: Error: Can't resolve './overlay'，你还没有给我们足够的解决方案。请至少提供所要求的信息。
@JaredSmith 是的，实际上，我有很多错误，我认为套接字和覆盖是同一种问题。

标签： javascript node.js typescript webpack resolve

【解决方案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。

如何解决？ Typescript 和 JavaScript 在这方面有什么不同？

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

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

【讨论】：