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

3

我的应用程序依赖于公司内部的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",,这导致了使用rollup时的停顿。

运行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退出,它报告等待了10m15s。

enter image description here

我阅读了所有能找到的文档和SO问题,确信我们正在按照async gulp tasks文档所建议的处理流的方式进行,但仍无法正常工作。然后我尝试手动关闭返回的rollup流,使用.on('end', () => { //etc }),将事物包装在承诺中并返回一个在流完成时解决的承诺,使用提供给每个任务函数的回调,以上的组合,但我无法使rollup任务正确完成并将控制权返回到提示符。

我已经包含了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问题的解决方法,那么我也可以这样做。

一位同事建议我在阅读Ionic相关问题https://github.com/ionic-team/ionic-framework/issues/23090后升级我们的TS版本,但这并没有产生实质性的差异。 - matt123miller
2个回答

2
我陷入了两种不同的错误之间:
  • tsconfig.json 中设置 "target" : "ES6" 会导致 gulp 任务永远无法退出。
  • tsconfig.json 中设置为 "target" : "ES5" 会抱怨在 tslib 中缺少一个名为 __spreadArray 的函数。
这是我最终解决问题的方法:
  1. 将所有开发依赖项更新到最新版本。
  2. 手动使用npm i --save-dev tslib更新tslib,以确保有最新的版本。因为我在步骤1中更新了TS版本,应该包含最新的tslib,所以这可能是不必要的...但手动包含它感觉很好。
  3. 我发现一个建议使用@rollup/plugin-typescript的一个分支rollup-plugin-typescript2来使其工作。这本身就是一个奇怪的问题,因为据说那个分支只存在于控制台中添加错误日志,告诉您任何TS错误。但现在原始项目也输出错误,但对于我们(或者只是我)而言,在gulp中无法工作。这个分支在npm上得到了维护和普及,所以我并不太担心,但我仍然更喜欢“官方”软件包。显然,我改变了我的gulpfile.js以使用这个新软件包,但从API的角度来看,它是一个可以替换的软件包。
  4. 还向tsconfig.json添加了路径值,指向手动检查过的已安装tslib节点模块,其中包含我们需要的__spreadArray函数。我在这个答案中找到了这个修复程序,当时我正在寻找线索来解决相关问题。
以上所有的组合都有一定作用。很可能3和4是主要修复项。
以下是我更新后的`tsconfig.json`和相关部分的`package.json`,如果对未来的读者有用的话。
// 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/"
  ]

0

哦,有趣的问题,感谢提供链接。不幸的是,在更新TS之前就出现了这个问题,之前使用的是4.0.5版本。如果我使用更简单的路径提供方法和使用fork of a fork的方式解决了所有问题,那么我一定会回到更受支持的方法! - matt123miller

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接