web-dev-qa-db-fra.com

Browserify - plusieurs points d'entrée

J'utilise Browserify dans gulp. J'essaie également de compiler mes tests dans un seul fichier. Mais contrairement à mon application principale, qui fonctionne très bien, j'ai du mal à obtenir les tests à compiler. La principale différence est que les tests ont plusieurs points d'entrée, il n'y a pas un seul point d'entrée comme cette application. Mais je reçois des erreurs de Browserify qui ne trouvent pas le point d'entrée.

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/')
automated-testsgulpbrowserify
30
Matt

Vous trouverez ci-dessous une tâche que j'ai pu créer et qui semble résoudre le problème. Fondamentalement, j'utilise une bibliothèque externe pour rassembler les noms de fichiers sous forme de tableau. Et puis passez ce tableau comme points d'entrée

'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));
});
39
Matt

Voici une autre recette qui correspond davantage au paradigme de gulp en utilisant gulp.src ()

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']);

Pour plus de détails sur la façon dont cela fonctionne, cet article que j'ai écrit va plus en profondeur: http://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f962

19
Hafiz Ismail

Pour commencer, vous pouvez écrire un suite.js pour exiger tous les tests que vous souhaitez exécuter et les explorer.

Vous pouvez voir deux exemples de mon projet https://github.com/mallim/sbangular .

Un exemple pour grunt-mocha-phantomjs

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

Un exemple pour le rapporteur

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

Ce n'est qu'un début et je suis sûr qu'il existe des moyens plus sophistiqués disponibles.

1
Ian Lim

Un exemple un peu plus compliqué pour construire des fichiers par modèle glob dans de nombreux fichiers avec regarder et reconstruire des fichiers séparés. Pas pour .coffee, pour es2015, mais pas une grande différence:

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);
});

Code complet ici https://github.com/BigBadAlien/browserify-multy-build

0
BigBadAlien