javascript - 在 tsconfig.json 中使用 @rollup/stream 和 es6 目标时，Gulp 4 任务不会完成

Question

我的应用程序依赖于公司内部的 TS 库，该库很少被编辑。我刚刚更新了它，现在用于构建它的 gulp 任务之一将失败。所有其他任务将独立工作或按顺序/并行使用，但使用 @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 }) 自己手动关闭返回的汇总流，将内容包装在 promises 中并返回一个在流已完成，使用提供给每个任务函数的回调，上述组合，但我无法让汇总任务正确完成并将控制权返回给提示。

我已经包含了我的 gulpfile 的相关部分，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

我被困在两个不同的错误之间:

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

这是我最终解决这个问题的方法:

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

以上所有的一些组合修复了它。可能 3 和 4 是主要修复。

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

// 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/"
  ]