`webpack/HashedModuleIdsPlugin` 编译期间的打字稿问题

Question

我遇到了关于 HashedModuleIdsPlugin 和 typescript 的编译问题:(

编译允许 JS 的 TS 项目时，需要 HashedModuleIdsPlugin 并使用 commonJS 导出它，它会引发错误并且无法生成正确的声明文件。

我在这里的一个超小项目中复制了它：https://github.com/raphaelboukara/test_ts_webpack。

在我的 src 文件夹中，我有 2 个文件：

index.ts: 导入webpack.js
webpack.js：出口require('webpack').ids.HashedModuleIdsPlugin

// ./src/index.ts
import "./webpack.js";

// ./src/webpack.js
const { ids: { HashedModuleIdsPlugin } } = require('webpack');
module.exports = HashedModuleIdsPlugin;

{
  "exclude": [
    "dist"
  ],
  "include": [
    "./src"
  ],
  "compilerOptions": {
    "declaration": true,
    "module": "commonjs",
    "allowJs": true,
    "outDir": "dist"
  }
}

当运行ning tsc 时，我收到错误：

src/webpack.js:1:1 - error TS9006: Declaration emit for this file requires using private name 'HashedModuleIdsPlugin' from module '"/Users/raphael.b/lab/test_ts_webpack/node_modules/webpack/types"'. An explicit type annotation may unblock declaration emit.

1 const { ids: { HashedModuleIdsPlugin } } = require('webpack');
  ~~~~~


Found 1 error in src/webpack.js:1

如何复制？

git 克隆 git@github.com:raphaelboukara/test_ts_webpack.git
nvm 使用
npm i
npm 运行构建

环境

节点：16.13.1
网络包：5.72.0
ts: 4.6.4

知道我做错了什么吗？

Answer 1

requires using private name 'HashedModuleIdsPlugin' from module '"/Users/raphael.b/lab/test_ts_webpack/node_modules/webpack/types"'

Typescript 正在抱怨，因为 HashedModuleIdsPlugin 没有明确地从 webpack 库中导出。它只是 re-exported 作为 ids 下的属性并且 ids 是从 webpack 显式导出的。这就是为什么 Typescript 说它是 private 的原因。它并没有明确规定可以直接从库中的类型访问，就像您在此处尝试做的那样

const { ids: { HashedModuleIdsPlugin } } = require('webpack');

所以你应该做的是从 ids 访问它并导出它

// webpack.js
const { ids } = require('webpack');
module.exports = ids.HashedModuleIdsPlugin;

如果您想执行

之类的操作，您可能希望通过在 tsconfig.json 中将其设置为 true 来启用 compilerOptions.esModuleInterop

// webpack.js
const { ids } = require('webpack');
module.exports = { HashedModuleIdsPlugin: ids.HashedModuleIdsPlugin }

// index.ts
import { HashedModuleIdsPlugin } from "./webpack.js";

`webpack/HashedModuleIdsPlugin` 编译期间的打字稿问题

Typescript issue during compilation around `webpack/HashedModuleIdsPlugin`

typescript

webpack

如何复制？

环境