浏览器的 reactjs 捆绑脚本在客户端不起作用(未捕获的引用错误:未定义组件）

我正在尝试使用node.js并将reactjs作为我的php后端的模板渲染服务。这是指南。

我想知道我的bundle.js是否有问题 browserify.我在客户端Uncaught ReferenceError: ItemPage is not defined，因为组件ItemPage在bundle.js中不是全局的，但我不知道如何访问它，因为它被包装在一些我真的不明白的函数中。

这是我的 es6 组件脚本：

import React from 'react';
import Tabs from 'grommet/components/Tabs';
import Tab from 'grommet/components/Tab';
class ItemPage extends React.Component {
    render(){
        return <Tabs onClick={this._onClick.bind(this)}>
            <Tab title="First Title">
                <h3>First Tab</h3>
                <p>Contents of the first tab !</p>
                <div>Something@@@@@@</div>
            </Tab>
            <Tab title="Second Title">
                <h3>Second Tab</h3>
                <p>Contents of the second tab</p>
            </Tab>
            <Tab title="Third Title">
                <h3>Third Tab</h3>
                <p>Contents of the third tab</p>
            </Tab>
        </Tabs>
    }
    _onClick(){
        alert("raging")
    }
}

我用来捆绑脚本的命令：

browserify src/ItemPage.js -o /js/build/ItemPage.js -t [ babelify --presets [ es2015 react ] ]

输出：

    echo '<div id="app">';
     // reactjs markup content sent back from node.js
    echo $content;
    echo '</div>';
    echo '<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>';
    echo '<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>';
    echo '<script type="text/javascript" src="/js/build/ItemPage.js"></script>';
    echo '<script>
           var container = document.getElementById("app");
           var component = ItemPage;
           // Error!!!!
           React.renderComponent(component, container);
          </script>';

错误：

Uncaught ReferenceError: ItemPage is not defined

这是我的捆绑文件（2mb）：

https://drive.google.com/file/d/0B1XYujDUsAgtb3NrSlBFQ19qckU/view?pref=2&pli=1

您可以看到 ItemPage 在脚本中不是全局的。

更新：

我在文件中添加了default export：

import React from 'react';
import Tabs from 'grommet/components/Tabs';
import Tab from 'grommet/components/Tab';
class ItemPage extends React.Component {
    render(){
        return <Tabs onClick={this._onClick.bind(this)}>
            <Tab title="First Title">
                <h3>First Tab</h3>
                <p>Contents of the first tab !</p>
                <div>Something@@@@@@</div>
            </Tab>
            <Tab title="Second Title">
                <h3>Second Tab</h3>
                <p>Contents of the second tab</p>
            </Tab>
            <Tab title="Third Title">
                <h3>Third Tab</h3>
                <p>Contents of the third tab</p>
            </Tab>
        </Tabs>
    }
    _onClick(){
        alert("raging")
    }
}
export default ItemPage;

但是，ItemPage 仍然是本地的，在客户端无法访问。

这是我的最新版本：

https://drive.google.com/file/d/0B1XYujDUsAgtZjNvaFdBUVlzU2s/view?usp=sharing