Question

我似乎不能reactify与coffeeify合作。我跟着Reactify的自述文件无济于事。

app.coffee

### @jsx React.DOM ###

console.log 'hi'

浏览器命令：

browserify -t coffeeify -t [ reactify -x coffee] ./src/coffeescripts/app.coffee                                               
/Users/mueller.128/repos/klc/react_colorpicker/src/coffeescripts/app.coffee:1
/** @jsx React.DOM */
^
ParseError: regular expressions cannot begin with `*`

我尝试在gulp任务中使用browserify api

var browserify = require('browserify');
var source     = require('vinyl-source-stream');
var watchify   = require('watchify');
var coffeeify  = require('coffeeify');
var reactify   = require('reactify');


gulp.task('browserify', function() {
  return browserify('./src/coffeescripts/app.coffee')
    .transform({ }, coffeeify)
    .transform({ extension: "coffee" }, reactify)
    .bundle({debug: true})
    .pipe(source('./src/bundle.js'))
    .pipe(gulp.dest('./build/javascripts/'));
});

感谢您的帮助。

Answer 1

我遇到了同样的问题 - ParseError: regular expressions cannot begin with `*` - 当使用coffee-reactify作为duereg建议时。在the recipe from the gulp recipe之后，我引导了我：

bundler = browserify 'test.cjsx', {
  transform : [ require 'coffee-reactify' ]
}

......展示了这个问题。浏览器中的一些临时日志记录显示它是某种微妙的错误，当以这种方式指定变换时，变换会被添加两次，这证实了Ben怀疑编译器运行了两次。将其更改为以下内容：

bundler = browserify 'test.cjsx'
bundler.transform require 'coffee-reactify'

...完全解决了这个问题。

一个有效的例子：

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

bundler = browserify './test.cjsx'
bundler.transform require 'coffee-reactify'

bundle = ->
  return bundler.bundle()
    .on 'error', gutil.log.bind(gutil, 'Browserify Error')
    .pipe source 'all-scripts.js'
    .pipe gulp.dest './.dist'

gulp.task 'default', ->
  bundle()

test.cjsx只是：

# @cjsx React.DOM

最近有人开了a ticket on browserify's github。

Answer 2

browserify -t coffeeify -t [ reactify -x] ./app.coffee

Answer 3

我对以下gulp任务感到满意。请注意，您必须安装coffee-reactify插件才能实现此目的。

var gulp = require('gulp');
var browserify = require('gulp-browserify');
var rename = require('gulp-rename');

gulp.task('browserify', function() {
  gulp.src('./src/coffeescripts/app.coffee', { read: false })
    .pipe(browserify({
      debug: true
      transform: ['coffee-reactify'],
      extensions: ['.coffee']
    }))
    .pipe(rename('./src/bundle.js'))
    .pipe(gulp.dest('./build/javascripts/'))
});

Browserify：似乎无法恢复使用coffeeify

app.coffee

浏览器命令：

我尝试在gulp任务中使用browserify api

3 个答案: