标签: reactify

我有一点反应代码叫main.js:

var React = require('react');

var Comment = React.createClass({
render: function(){
  return (
    <div className="comment">
      <h2 className="commentAuthor">
        {this.props.author}
      </h2>
      <span dangerouslySetInnerHTML={{__html:marked(this.props.children.toString(), {sanitize:true})}} />
    </div>
  );
}
});

我正在尝试使用browserify并使用它重新执行:

browserify -t reactify main.js

但是我收到了这个错误:

Error: Cannot find module 'react' from '/Users/jameslin/projects/reactjs/react-0.13.2'
    at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
    at process (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
    at ondir (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
    at load (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
    at onex (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
    at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
    at Object.oncomplete (fs.js:107:15)

鉴于我已安装react和reactifynpm模块:

• npm install -g react
• npm install -g reactify

我正在尝试获取与Chrome一起使用的JavaScript文件的源地图.当前gulp脚本的问题在于源映射(Browserify创建)导致文件的缩小版本.

例如,假设app.jsx是Browserify的一个入口文件,它拥有require('a')并require('b')调用它.app.jsx获得浏览器化,重新设置和uglifyied并按预期写入app.js.但是,模块a和模块b中的所有源映射引用也都会缩小:

var gulp = require('gulp'),
    browserify = require('browserify'),
    watchify = require('watchify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    bundler;

bundler = browserify({
    entries: '/app.jsx',
    cache: {},
    packageCache: {},
    fullPaths: true
});

bundler
    .transform('reactify');
    .transform({
        global: true
    }, 'uglifyify');

bundler = watchify(bundler);
bundler.on('update', function() {
    return bundler
        .bundle()
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(gulp.dest('/js'));
});

有关如何使其工作的任何想法？

这是我的gulpfile代码:

gulp.task('react', function () {
  browserify('app/src/main.jsx')
    .transform(reactify)
    .transform(babelify)
    .bundle()
    .pipe(source('app.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('dist/js/'));
});

只运行第一个转换语句,因此由于缺少额外的转换而抛出错误(我在ES6和JSX中编写w/react).

我完全失去了,真的很感激帮助.