Gulp + CJSX：解析时出现意外缩进

Question

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

Gulp文件:

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

谁能告诉我 gulp 文件有什么问题？我还需要其他 node_module 吗？我知道没有空格问题，我已经检查过了。

Answer 1

您的问题似乎是 return 语句后的换行符。编译器将其视为空 return，render 方法的结尾，然后遇到进一步缩进的代码，它不知道如何处理。

尝试以下操作：

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

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

Answer 2

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

也许您需要多谈谈您的环境 (gulp) 或 post 错误。

Gulp + CJSX：解析时出现意外缩进

Gulp + CJSX: Unexpected indentation while parsing

compiler-errors

coffeescript

reactjs

gulp

react-jsx