Question

我在浏览器中使用Browserify。我也试图将我的测试编译成单个文件。但不像我的主要应用程序，我工作得很好，我很难得到测试编译。主要区别在于测试有多个入口点，没有像该应用程序那样的单个入口点。但是我在浏览器中遇到错误，它无法找到入口点。

browserify   = require 'browserify'
gulp         = require 'gulp'
source       = require 'vinyl-source-stream'

gulp.task 'tests', ->
    browserify
        entries: ['./app/js/**/*Spec.coffee']
        extensions: ['.coffee']
    .bundle 
        debug: true
    .pipe source('specs.js') 
    .pipe gulp.dest('./specs/')

Answer 1

以下是我能够构建的任务，似乎可以解决问题。基本上我使用外部库来收集文件名作为数组。然后将该数组作为入口点传递

'use strict;'

var config = require('../config');
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var glob = require('glob');
var browserify  = require('browserify');
var source = require('vinyl-source-stream');

gulp.task('tests', function(){
  var testFiles = glob.sync('./spec/**/*.js');
  return browserify({
      entries: testFiles,
      extensions: ['.jsx']
    })
    .bundle({debug: true})
    .pipe(source('app.js'))
    .pipe(plumber())
    .pipe(gulp.dest(config.dest.development));
});

Answer 2

这是一个替代配方，使用gulp.src（）

更符合gulp范例

var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var concat = require('gulp-concat');

gulp.task('browserify', function () {

  // use `vinyl-transform` to wrap around the regular ReadableStream returned by b.bundle();
  // so that we can use it down a vinyl pipeline as a vinyl file object.
  // `vinyl-transform` takes care of creating both streaming and buffered vinyl file objects.
  var browserified = transform(function(filename) {
    var b = browserify(filename, {
      debug: true,
      extensions: ['.coffee']
    });
    // you can now further configure/manipulate your bundle
    // you can perform transforms, for e.g.: 'coffeeify'
    // b.transform('coffeeify');
    // or even use browserify plugins, for e.g. 'minifyiy'
    // b.plugins('minifyify');
    // consult browserify documentation at: https://github.com/substack/node-browserify#methods for more available APIs
    return b.bundle();
  });

  return gulp.src(['./app/js/**/*Spec.coffee'])
    .pipe(browserified)/
    .pipe(concat('spec.js'))
    .pipe(gulp.dest('./specs'));
});

gulp.task('default', ['browserify']);

有关这项工作的详细信息，我撰写的这篇文章更深入：http://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

Answer 3

首先，您可以编写一个suite.js来要求您运行所有测试并对其进行浏览。

您可以在我的项目https://github.com/mallim/sbangular中看到两个示例。

grunt-mocha-phantomjs的一个例子

https://github.com/mallim/sbangular/blob/master/src/main/resources/js/suite.js

量角器的一个例子

https://github.com/mallim/sbangular/blob/master/src/main/resources/js/suite.js

这只是一个开始，我相信有更多奇特的方法可供选择。

Answer 4

使用glob模式将文件构建到许多文件中并观察和重建分离文件的更复杂的示例。不是.coffee，对于es2015，但没有太大区别：

var gulp = require("gulp");
var babelify = require("babelify");
var sourcemaps = require("gulp-sourcemaps");
var gutil = require("gulp-util");
var handleErrors = require("../utils/handleErrors.js");
var browserify = require("browserify");
var eventStream = require("event-stream");
var glob = require("glob");
var source = require("vinyl-source-stream");
var buffer = require("vinyl-buffer");
var watchify = require("watchify");

var SRC_PATH = "./src";
var BUILD_PATH = "./build";

var bundle = function (bundler, entryFilepath) {
  console.log(`Build: ${entryFilepath}`);

  return bundler.bundle()
    .on("error", handleErrors)
    .pipe(source(entryFilepath.replace(SRC_PATH, BUILD_PATH)))
    .pipe(buffer())
    .on("error", handleErrors)
    .pipe(
      process.env.TYPE === "development" ?
        sourcemaps.init({loadMaps: true}) :
        gutil.noop()
    )
    .on("error", handleErrors)
    .pipe(
      process.env.TYPE === "development" ?
        sourcemaps.write() :
        gutil.noop()
    )
    .on("error", handleErrors)
    .pipe(gulp.dest("."))
    .on("error", handleErrors);
};

var buildScripts = function (done, watch) {
  glob(`${SRC_PATH}/**/[A-Z]*.js`, function (err, files) {
    if (err) {
      done(err);
    }

    var tasks = files.map(function (entryFilepath) {
      var bundler = browserify({
        entries: [entryFilepath],
        debug: process.env.TYPE === "development",
        plugin: watch ? [watchify] : undefined
      })
        .transform(
          babelify,
          {
            presets: ["es2015"]
          });

      var build = bundle.bind(this, bundler, entryFilepath);

      if (watch) {
        bundler.on("update", build);
      }

      return build();
    });

    return eventStream
      .merge(tasks)
      .on("end", done);
  });
};

gulp.task("scripts-build", function (done) {
  buildScripts(done);
});

gulp.task("scripts-watch", function (done) {
  buildScripts(done, true);
});

此处填写代码https://github.com/BigBadAlien/browserify-multy-build

Browserify - 多个入口点

4 个答案: