Javascript 使用browserify搭配花椰菜

我正在尝试使用BrocoliJS开始使用React框架构建应用程序。我尝试使用browserify来组合我正在使用的javascript文件，但当我尝试在一个基本应用程序上运行构建时，它会不断返回错误。我有一个类似的目录结构

|--app
   |--index.js
   |--index.html
|--node_modules
   |--react
|--public
|--styles
   |--app.scss
|--Brocfile.js
|--package.json

/* Brocfile.js */

var compileSass = require('broccoli-sass');
var funnel = require('broccoli-funnel');
var mergeTrees = require('broccoli-merge-trees');
var browserify = require('broccoli-browserify');

var javascript = funnel('app', {
  srcDir: '/'
});

var styles = funnel('styles', {
  srcDir: '/'
});

var appJs = browserify(javascript, {
  entries: ['index.js'],
  outputFile: 'app.js',
  transform: ['reactify']
});

var appCss = compileSass([styles], 'app.scss', 'application.css');

module.exports = mergeTrees([appJs, appCss]);

我的档案有点像

|--app
   |--index.js
   |--index.html
|--node_modules
   |--react
|--public
|--styles
   |--app.scss
|--Brocfile.js
|--package.json

/* Brocfile.js */

var compileSass = require('broccoli-sass');
var funnel = require('broccoli-funnel');
var mergeTrees = require('broccoli-merge-trees');
var browserify = require('broccoli-browserify');

var javascript = funnel('app', {
  srcDir: '/'
});

var styles = funnel('styles', {
  srcDir: '/'
});

var appJs = browserify(javascript, {
  entries: ['index.js'],
  outputFile: 'app.js',
  transform: ['reactify']
});

var appCss = compileSass([styles], 'app.scss', 'application.css');

module.exports = mergeTrees([appJs, appCss]);

问题是我不断出现错误，导致

找不到模块“app.js”

我并不过分挑剔如何编译这个项目，因为我对我正在使用的任何工具都不太了解，但如果可能的话，我想使用西兰花。有没有人能给我指出正确的方向来让这一切顺利进行？多谢各位

编辑：

如果有用的话，这就是app.js的样子

var React = require('react');

var App = React.createClass({
  render: function() {
    return (
      <div>
        <h1>TEST</h1>
      </div>
      );
  }
});

React.render(<App />, document.getElementById('app'));

var React=require（'React'）；
var App=React.createClass({
render:function（）{
返回(
试验
);
}
});
React.render（，document.getElementById（'app'））；

我终于让它工作了。如果其他人对此有困难，那么切换到Babelify（代替reactify）似乎是我能找到的最简单的解决方案。我还决定使用fast browserify，因为它支持缓存。这是对我有用的小册子

var mergeTrees = require('broccoli-merge-trees');
var compileSass = require('broccoli-sass');
var fastBrowserify = require('broccoli-fast-browserify');
var babelify = require('babelify');

var appJs = fastBrowserify('app', {
  browserify: {
    extensions: ['.js']
  },
  bundles: {
    'assets/app.js': {
      entryPoints: ['index.js'],
      transform: {
        tr: babelify
      }
    }
  }
});

var appCss = compileSass(['styles'], 'app.scss', '/assets/app.css');

module.exports = mergeTrees([appJs, appCss, 'public']);

---

我没法让它工作。我是这样做的

Brocfile.js:

var mergeTrees = require('broccoli-merge-trees')
var funnel = require('broccoli-funnel')
var babel = require("broccoli-babel-transpiler")
var browserify = require('broccoli-browserify')
var react = require('broccoli-react')

var js = funnel('src/js', {
  srcDir: '/',
  destDir: 'js'
})

js = babel(js)

js = browserify(js, {
  entries: ['./js/main.js'],
  outputFile: 'js/build.js'
})

js = react(js, {extensions: ['js']})

module.exports = mergeTrees([js])

var TopNav = React.createClass({

  render: function() {
    return (
      <div className='top-nav'>
        <a href='#'>one</a>
        <a href='#'>one</a>
        <a href='#'>one</a>
        <a href='#'>one</a>
      </div>
    );
  }
})

export default TopNav

那么，在main.js中我可以

import TopNav from './components/top-nav'
ReactDOM.render(<TopNav />, document.getElementById('top-nav-wrap'))