Gulp 在 tsconfig.json 中使用 @rollup/stream 和 es6 目标时有 4 个任务无法完成

Question

我的应用程序依赖于公司内部的 TS 库，该库很少被编辑。我刚刚更新了它，现在用于构建它的 gulp 任务之一将失败。所有其他任务将单独工作或在 sequence/parallel 中使用，但使用 @rollup/stream 包的任务会导致 gulp 在声明自己完成后挂起。发现这一点是因为构建自动化最终终止了构建，因为它暂停了 2 小时以等待 gulp 任务完成。

我不得不更新我们的内部库，因为它由于以下问题导致构建失败。

'rollup' errored after 1.51 s
Error: '__spreadArray' is not exported by node_modules\tslib\tslib.es6.js, imported by src\ObjectUtils.ts

所以我将 tsconfig.json 文件从 "target": "es5", 更新为 "target": "es6",，这导致汇总挂起。

运行 gulp rollup 给出以下输出


Using gulpfile path/to/gulp/file
Starting 'rollup'...
//
// Outputs all the files being rolled up here...
//
Finished 'rollup' after 1.43 s
// The gulp process then stays open instead of closing and returning me to my prompt

举个例子，我在本地运行任务，后来自己用 control+c 退出了它，它报告在那里等待 10 分钟 15 秒

阅读了我能找到的所有文档和 SO 问题后，我确信我们正在按照 async gulp tasks 文档建议的方式处理流，但它不会起作用。然后，我尝试使用 .on('end', () => { //etc }) 手动关闭 returned 汇总流，将内容包装在承诺中，并 return 使用提供给的回调在流完成时解决承诺每个任务功能，上述组合，但我无法正确完成汇总任务，return 控制回到提示。

我已经包含了我的 gulp 文件的相关部分，tsconfig.json 和我的 package.json 依赖项。

// gulpfile.js

const gulp = require('gulp');
const gulpif = require('gulp-if');
const terser = require("gulp-terser");
const typescript = require("@rollup/plugin-typescript");
const rollup = require("@rollup/stream");
const buffer = require('vinyl-buffer');
const source = require('vinyl-source-stream');

const production = process.env.NODE_ENV == 'production';

function rollupTask () {
    // rollup() returns a stream, so returning this should satisfy the async tasks requirements. 
    // When the stream closes it should tell gulp the tasks has finished right?
    return rollup({
        input: "./src/main.ts",
        external: [
            "lodash",
        ],
        output: {
            format: "cjs",
            sourcemap: true
        },
        plugins: [
            typescript(),
        ],
    })
    .pipe(source("common.bundle.js"))
    .pipe(buffer())
    .pipe(gulpif(production, terser()))
    .pipe(gulp.dest('./dist'));
};

exports.rollup = rollupTask;

// tsconfig.json
{
    "compilerOptions": {
        "declaration": false,
        "module": "es2015",
        "target": "es6",
        "emitDecoratorMetadata": true,
        "listFiles": true,
        "noImplicitAny": false,
        "noUnusedLocals": true,
        "noLib": false,
        "removeComments": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "lib": [
            "ES5",
            "Dom",
            "ScriptHost",
            "ES2015",
            "ES2016",
            "ES2017"
        ]
    }
}

// package.json dependencies
 "dependencies": {
    "lodash": "^4.17.5"
  },
  "devDependencies": {
    "@rollup/plugin-typescript": "^6.1.0",
    "@rollup/stream": "^1.1.0",
    "@types/lodash": "^4.14.165",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-if": "^3.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-terser": "^2.0.0",
    "gulp-tslint": "^8.0.0",
    "gulp-typescript": "^5.0.1",
    "merge2": "^1.4.1",
    "rollup": "^2.33.3",
    "tslint": "^6.1.3",
    "typescript": "^4.0.5",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  },

如果事实证明我可以在 tsconfig.json 中继续使用 "target": "es5", 并且找到 __spreadArray 问题的修复程序，那么我也可以这样做。

Answer 1

我遇到了 2 个不同的错误：

在 tsconfig.json 中设置 "target" : "ES6" 会因永不退出 gulp 任务而中断。
在 tsconfig.json 中设置为 "target" : "ES5" 会抱怨 tslib 中缺少 __spreadArray 函数。

以下是我最终解决此问题的方法：

正在将所有开发依赖项更新到最新版本。
手动 tslib 使用 npm i --save-dev tslib 以确保有可用的最新版本。因为我在步骤 1 中更新了 TS 版本。它应该包括最新的 tslib 这可能是不必要的......但无论如何手动包含它感觉很好。
I found a suggestion to use a fork of @rollup/plugin-typescript named rollup-plugin-typescript2 让它工作。这本身就是一个奇怪的问题，因为据说 fork 只存在于在控制台中添加错误日志记录以告诉您任何 TS 错误。但是现在原始项目也输出错误，但不再为我们（或者可能只是我）使用 gulp。叉子在 npm 上得到维护和流行，所以我不太担心，但我仍然更愿意使用“官方”包。显然我更改了我的 gulpfile.js 以使用这个新包，但就 API.
还将路径值添加到 tsconfig.json 以指向已安装的 tslib 节点模块，我手动检查以确保它具有我们需要的 __spreadArray 功能。我在 this answer 中找到此修复程序，同时我正在寻找相关问题的线索

以上所有方法的某种组合修复了它。可能 3 和 4 是主要修复。

以下是我的 tsconfig.json 的更新版本和我的 package.json 的相关部分，以防它对以后的任何人有用 reader。

// tsconfig.json
{
    "compilerOptions": {
        "declaration": false,
        "module": "ES2015",
        "target": "ES6",
        "emitDecoratorMetadata": true,
        "listFiles": true,
        "noImplicitAny": false,
        "noUnusedLocals": true,
        "noLib": false,
        "removeComments": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "paths": {
            "tslib": [
                "./node_modules/tslib/tslib.d.ts"
            ]
        },
        "lib": [
            "ES5",
            "Dom",
            "ScriptHost",
            "ES2015",
            "ES2016",
            "ES2017"
        ]
    }
}

// package.json
"dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "@rollup/plugin-typescript": "^8.2.5",
    "@rollup/stream": "^2.0.0",
    "@types/lodash": "^4.14.165",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-if": "^3.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-terser": "^2.0.1",
    "gulp-tslint": "^8.1.4",
    "gulp-typescript": "^5.0.1",
    "merge2": "^1.4.1",
    "rollup": "^2.56.3",
    "rollup-plugin-typescript2": "^0.30.0",
    "tslib": "^2.3.1",
    "tslint": "^6.1.3",
    "typescript": "^4.4.2",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  },
  "files": [
    "dist/"
  ]

Answer 2

FWIW，我认为挂起可能是 typescript 4.4.2 中与汇总交互的错误（也许 gulp）...应该尽快修复。参见 https://github.com/rollup/plugins/issues/983

Gulp 在 tsconfig.json 中使用 @rollup/stream 和 es6 目标时有 4 个任务无法完成

Gulp 4 tasks won't finish when using @rollup/stream and es6 target in tsconfig.json

javascript

node.js

typescript

gulp

rollupjs