使用 gulp + browserify + watchify + coffeeify 尝试重新传输 javascript 而不是 coffeescript

Question

当我第一次浏览我的 coffeescript 代码时，它运行没问题。但是，当我更改我的源代码并 watchify 尝试重新运行捆绑时，coffeeify 似乎想要运行 coffeescript 反对我的 javascript - 基于这个错误我得到来自 gulp:

events.js:72
    throw er; // Unhandled 'error' event
          ^
SyntaxError: reserved word 'var' while parsing file: /Volumes/dev/app/frontend/editor/main.coffee

这是我的 Gulpfile：

var gulp = require('gulp');
var gutil = require('gulp-util');
var watchify = require('watchify');
var browserify = require('browserify');
var coffeeify = require('coffeeify');
var source = require('vinyl-source-stream');
var stringify = require('stringify');
var _ = require('underscore');

var browserifyOpts = {
  basedir: "./app/frontend/editor",
  debug: true,
  extensions: ['.coffee'],
  entries: ['./main.coffee']
};
var opts = _.extend({}, watchify.args, browserifyOpts);
var bundler = browserify(opts);
var watch = watchify(bundler);

watch.on('update', bundle);
watch.on('log', gutil.log);

function bundle() {

  var b = function() {
    return bundler
      .transform(stringify(['.html']))
      .transform('coffeeify')
      .bundle()
      .pipe(source('main.js'))
      .pipe(gulp.dest('app/assets/javascripts/bundles'));
  };

  return b();

}

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

如何使捆绑过程也与 watchify 一起工作？

Answer 1

将您的转换移到 bundle 函数之外：

var bundler = browserify(opts);
bundler.transform(stringify(['.html']))
bundler.transform('coffeeify')
var watch = watchify(bundler);

watch.on('update', bundle);
watch.on('log', gutil.log);

function bundle() {

  var b = function() {
    return bundler
      .bundle()
      .pipe(source('main.js'))
      .pipe(gulp.dest('app/assets/javascripts/bundles'));
  };

  return b();

}

使用 gulp + browserify + watchify + coffeeify 尝试重新传输 javascript 而不是 coffeescript

Using gulp + browserify + watchify + coffeeify tries to retranspile javascript instead of coffeescript

coffeescript

browserify

gulp

watchify