Gulp CJSX 错误渲染编译答案

【问题标题】：Gulp CJSX Error render compilationGulp CJSX 错误渲染编译
【发布时间】：2015-10-30 17:49:01
【问题描述】：

我正在使用 gulp 编译一个 cjsx 文件（用于 Reacjs），但是编译完成后我遇到了一些麻烦。

gulpfile.js

gulp.task('scripts', function ()   {
return gulp.src('dev/scripts/**/*.cjsx')
    .pipe($.cjsx({bare: true}))
    .pipe(gulp.dest('.tmp/scripts/'))
    .pipe($.size()); 
});

component.cjsx

@Login = React.createClass
getInitialState: ->
    error: null

handleSubmit: (e) ->
    #do some thing

render: ->
    if @state.error
        error = <div>{this.state.error}</div>

    `<form className=loginForm onSubmit={this.handleSubmit}>
        {error}
        <input type="text" placeholder="emdsmmail" ref="email" />
        <input type="text" placeholder="password" ref="password" />
        <input type="submit" value="Post" />
    </form>`
@Dashboard = React.createClass
render: ->
    <div>SomeText</div>

然后在渲染之后就是这样（我只放了代码的末尾）：组件.js

  render: function() {
var error;
if (this.state.error) {
  error = React.createElement("div", null, this.state.error);
}
    return <form className=loginForm onSubmit={this.handleSubmit}>
        {error}
        <input type="text" placeholder="emdsmmail" ref="email" />
        <input type="text" placeholder="password" ref="password" />
        <input type="submit" value="Post" />
    </form>;
}
});

this.Dashboard = React.createClass({
render: function() {
    return React.createElement("div", null, "SomeText");
}
});

如果我将直接命令与 npm cjsx -c my-component.cjsx 一起使用，它可以与引号 (`) 一起正常工作。

所以首先我尝试保存我的报价（`），但它给了我一个糟糕的结果，就像你在“表单”中看到的那样。

所以我删除了引号（`），就像仪表板组件一样，以显示发生了什么，它是有效的；但前提是我不使用引号之类的：（“）或（'）来表示“表单”上的输入等属性。

如果有人可以帮助我，你给我一个很好的帮助:)

感谢阅读。

【问题讨论】：

标签： javascript coffeescript reactjs gulp preprocessor

【解决方案1】：

我很好的解决方案，做 1 个任务，比如： .coffee（真实的.cjsx）-> .js（真实的.jsx）-> .js（真实的.js）

所以我的 gulp 文件是这样的：

gulpfile.js

gulp.task('scripts', function ()   {
return gulp.src('dev/scripts/**/*.coffee')
    .pipe($.plumber())
    .pipe($.coffee())
    .pipe($.react())
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe($.size());
});

(ps : $ = gulp-load-plugin // 咖啡 = gulp-coffee // react = gulp-react)

【讨论】：