Question

好的，所以我尝试使用React + Coffeescript，并且我正在使用Gulp进行编译。我不太熟悉gulp，但我知道它在处理cjsx时遇到了麻烦。（如果我删除render:方法，则会停止错误）

Gulpfile：

gulp.task('js', function () {
    return browserify({
        entries: [ SRC + 'scripts/index.cjsx' ],
        extensions: ['.cjsx', '.coffee'],
    })
    .bundle()
    .pipe(source('app.min.js'))
    //.pipe(streamify(uglify({ mangle: false })))
    .pipe(gulp.dest(DIST + 'js'))
    .pipe(notify({message: 'JS Complete.'}))
    .pipe(connect.reload());
});

文件抛出解析错误：

React = require 'react'
Header = require 'components/Header.cjsx'
Footer = require 'components/Footer.cjsx'
Store = require 'Store'
Actions = require 'Actions'

Home = React.createClass

  displayName: 'Home'

  getInitialState: ->
    Store.toJSON()

  componentDidMount: ->
    Store.listenTo Store, 'change:counter', this._onChange

  componentWillUnmount: ->
    Store.stopListening Store, 'change:counter', this._onChange

  _onChange: ->
    @setState Store.toJSON()

  render: ->
    return
      <div>
        <Header />
        <h1> HI from React and CJSX </h1>
        <Footer />
      </div>

module.exports = Home

有谁能告诉我gulpfile有什么问题？我需要一些其他node_module吗？我知道没有空白问题，我已经检查过了。

Answer 1

您的问题似乎是return声明后的换行符。编译器认为这是一个空返回，render方法的结束，然后遇到进一步缩进的代码，它不知道该怎么做。

尝试以下方法：

render: ->
  <div>
    <Header />
    <h1> HI from React and CJSX </h1>
    <Footer />
  </div>

或者，如果所有其他方法都失败了，那就将所有内容放在一行上。

Answer 2

根据此页面，您的文件似乎没问题： https://jsdf.github.io/coffee-react-transform/

也许你需要多谈一下你的环境（gulp）或发布错误。

Gulp + CJSX：解析

2 个答案: