webpack-streams 打破了@types/webpack答案

【问题标题】：webpack-streams breaks @types/webpackwebpack-streams 打破了@types/webpack
【发布时间】：2021-10-30 18:15:09
【问题描述】：

我有一个使用 typescript 构建的 gulpfile。一切正常，直到我添加 @types/webpack-stream，然后由于某种原因我得到一个非常丑陋的错误：

node_modules/@types/webpack-stream/index.d.ts:23:24 - error TS2694: Namespace 'exports' has no exported member 'Compiler'.

23     callback?: webpack.Compiler.Handler,
                          ~~~~~~~~

node_modules/@types/webpack/index.d.ts:32:3 - error TS2305: Module '"tapable"' has no exported member 'Tapable'.

32   Tapable,
     ~~~~~~~

node_modules/@types/webpack/index.d.ts:1081:23 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1081             resolver: SyncWaterfallHook;

...
[lots of other types not working here]
...

Found 90 errors.

下面是我的package.json

{
    "type": "module",
    "engines": {
        "node": "^16.12.0"
    },
    "scripts": {
        "dev": "tsc --watch",
        "gulp": "yarn gulp:build && yarn gulp:run",
        "gulp:build": "tsc --project gulp",
        "gulp:run": "gulp"
    },
    "dependencies": {
        "highlight.js": "^11.3.1"
    },
    "devDependencies": {
        "@babel/cli": "^7.15.7",
        "@babel/core": "^7.15.8",
        "@babel/plugin-transform-modules-amd": "^7.14.5",
        "@babel/plugin-transform-modules-commonjs": "^7.15.4",
        "@babel/plugin-transform-modules-systemjs": "^7.15.4",
        "@babel/plugin-transform-modules-umd": "^7.14.5",
        "@babel/preset-env": "^7.15.8",
        "@types/gulp": "^4.0.9",
        "@types/gulp-babel": "^6.1.30",
        "@types/gulp-if": "^0.0.34",
        "@types/gulp-rename": "^2.0.1",
        "@types/gulp-sourcemaps": "^0.0.35",
        "@types/gulp-terser": "^1.2.1",
        "@types/node": "^16.11.5",
        "@types/webpack-stream": "^3.2.12",
        "gulp": "^4.0.2",
        "gulp-babel": "^8.0.0",
        "gulp-cli": "^2.3.0",
        "gulp-if": "^3.0.0",
        "gulp-rename": "^2.0.0",
        "gulp-sourcemaps": "^3.0.0",
        "gulp-terser": "^2.1.0",
        "gulp-typescript": "^6.0.0-alpha.1",
        "rambda": "^6.9.0",
        "typescript": "^4.4.4",
        "webpack": "^5.61.0",
        "webpack-cli": "^4.9.1",
        "webpack-stream": "^7.0.0"
    }
}

在我添加该软件包之前一切正常，我正在考虑不添加它，但 TS 对我大喊大叫，因为：

Could not find a declaration file for module 'webpack-stream'. '/node_modules/webpack-stream/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/webpack-stream` if it exists or add a new declaration (.d.ts) file containing `declare module 'webpack-stream';`ts(7016)`

但是当我添加它时，它就是不想工作。我尝试在node_modules/@types/webpack-stream/index.d.ts:23:24 重新定义第一个错误，看看是否是这样的：

    callback?: Parameters<webpack.Compiler["run"]>[0] | Parameters<webpack.Compiler["watch"]>[1]

哪个确实修复了第一个错误，但其余的都留在那里。我不知道从哪里开始，我可以在 TS ig 中重新实现 webpack-streams...

【问题讨论】：

标签： typescript webpack webpack-stream

【解决方案1】：

找到了解决办法！

首先，转到@types/webpack-stream，在依赖项下我们得到@types/webpack 和@types/node。

我已经安装了 @types/node 出于不同的原因，所以：

删除@types/webpack-stream
已添加@types/webpack
再次添加 @types/webpack-stream（以确保 pnp 解析为我想要的 @types 版本）

除此之外，我还有gulp/ 目录，我在其中保存了我的gulpfile.ts，我确保tsconfig.json 具有以下内容：

{
    "compilerOptions": {
        "skipLibCheck": true
    }
}

【讨论】：