Gulp任务失败-Browserify / Babel不兼容?

时间:2018-12-05 02:29:28

标签: node.js gulp browserify babel babelify

我继承了一个非常不寻常的网站,该网站是C#和Node JS(使用TypeScript)的混合体。我们在Azure DevOps上设置了一个持续集成环境,以构建网站并将其部署到测试环境。自3月以来,我们无需构建网站,现在构建过程突然中断。我们必须将package.json中对“ gulp”的引用从“ github:gulpjs / gulp#4.0”(不再存在)更改为“ github:gulpjs / gulp#71c094a51c7972d26f557899ddecab0210ef3776”,但是现在构建过程的步骤是调用gulp(“ node node_modules \ gulp \ bin \ gulp.js程序包”)失败,并显示以下错误(来自DevOps构建日志):

2018-12-04T22:38:48.9501268Z [22:38:48] TypeError in plugin "gulp-babel"
2018-12-04T22:38:48.9501465Z Message:
2018-12-04T22:38:48.9501806Z     Path must be a string. Received undefined

如果我在本地运行“ node node_modules \ gulp \ bin \ gulp.js程序包”,则会得到以下信息:

[11:54:45] Error: TypeScript error: node_modules/@angular/router/src/router_module.d.ts(140,41): Error TS1110: Type expected.
    at formatError (C:\.....\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\format-error.js:20:10)
    at Gulp.<anonymous> (C:\.....\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\log\events.js:31:15)
    at emitOne (events.js:120:20)
    at Gulp.emit (events.js:210:7)
    at Object.error (C:\.....\node_modules\undertaker\lib\helpers\createExtensions.js:61:10)
    at handler (C:\.....\node_modules\now-and-later\lib\mapSeries.js:43:14)
    at f (C:\.....\node_modules\once\once.js:25:25)
    at f (C:\.....\node_modules\once\once.js:25:25)
    at tryCatch (C:\.....\node_modules\async-done\index.js:24:15)
    at done (C:\.....\node_modules\async-done\index.js:40:12)

此链接-https://github.com/babel/gulp-babel/issues/154-似乎表明browserify存在问题(或至少在browserify和babel-core之间不兼容)?唯一的建议是放弃使用browserify。对我来说,一个谜是为什么它以前可以奏效,但是当我们更改的只是对gulp的引用时,现在却失败了。

任何人都可以向我解释是什么导致了该错误以及如何解决该错误?任何帮助将不胜感激。

引发错误的gulp任务是这样的:

gulp.task("bundle", function () {
        return browserify({
            basedir: '.',
            debug: true,
            entries: [config.appMain],
            cache: {},
            packageCache: {}
        })
        .plugin(tsify)
        .bundle()
        .pipe(source('app.bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init())
        .pipe(babel({ presets: ['env'] }))
        .pipe(uglify())
        .pipe(sourcemaps.write('./', { includeContent: false, sourceRoot: '../' }))
        .pipe(gulp.dest(config.jsDest));
});

config.appMain =“ App / main.ts” config.jsDest =“ ./wwwroot/js”

gulpfile.js顶部的相关“要求”是:

var gulp = require('gulp');
var browserify = require("browserify");
var tsify = require("tsify");
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var babel = require('gulp-babel');
var uglify = require("gulp-uglify");
var config = require('./gulp.config')();

package.json devDependencies版本为:

"@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"babel-preset-env": "^1.7.0",
"browserify": "^16.2.3",
"concurrently": "^3.4.0",
"del": "^2.2.2",
"gulp": "github:gulpjs/gulp#71c094a51c7972d26f557899ddecab0210ef3776",
"gulp-babel": "^6.1.2",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^3.0.4",
"gulp-concat": "^2.6.1",
"gulp-copy": ">=0.0.2",
"gulp-cssmin": "^0.2.0",
"gulp-htmlmin": "^3.0.0",
"gulp-load-plugins": "^1.3.0",
"gulp-rename": ">=1.2.2",
"gulp-rimraf": ">=0.2.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"gulp-watch": ">=4.3.9",
"jasmine-core": "2.4.1",
"merge-stream": "^1.0.1",
"nodemon": "^1.11.0",
"tsify": "^3.0.1",
"tslint": "^3.15.1",
"typescript": "^2.0.0",
"typings": "^1.3.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^2.0.0"

我尝试使用babelify,因此gulp任务变为:

gulp.task("bundle", function () {
    return browserify({
            basedir: '.',
            debug: true,
            entries: [config.appMain],
            cache: {},
            packageCache: {}
        })
        .transform(babelify, { presets: ['env'] })
        .plugin(tsify)
        .bundle()
        .pipe(source('app.bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('./', { includeContent: false, sourceRoot: '../' }))
        .pipe(gulp.dest(config.jsDest));
});

但是当我在本地执行“ node node_modules \ gulp \ bin \ gulp.js软件包”时,我得到了完全相同的错误。

如果您需要更多详细信息或代码,请告诉我。感谢您提供的任何帮助。

1 个答案:

答案 0 :(得分:1)

我的一个同事解决了这个问题。解决方案当然是使用babelify。但是,我弄错了实现。 gulp任务中的用法是:

  var url = 'https://app.udot.utah.gov/apex/eom/f?p=288:300::CSV::::';
  var response = UrlFetchApp.fetch(url, {
    muteHttpExceptions: true,
    followRedirects: true,
  });
  var cookie = response.getAllHeaders()['Set-Cookie']; 
  response = UrlFetchApp.fetch(url, {
    muteHttpExceptions: true,
    headers: {
      Cookie: cookie, //send the cookie we got as headerw
    },
  });
  Logger.log(Utilities.parseCsv(response.getContentText()));//parseCSV

package.json devDependencies中使用的软件包和版本为:

gulp.task("bundle", function () {
    return browserify({
            transform: [["babelify", { "presets": ["@babel/preset-env"] }]],
            basedir: '.',
            debug: true,
            entries: [config.appMain],
            cache: {},
            packageCache: {}
        })
        .plugin(tsify)
        .bundle()
        .pipe(source('app.bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init())
        .pipe(babel({ presets: ["@babel/preset-env"] }))
        .pipe(uglify())
        .pipe(sourcemaps.write('./', { includeContent: false, sourceRoot: '../' }))
        .pipe(gulp.dest(config.jsDest));
});