Javascript browserify的reactjs捆绑包脚本在客户端不工作（未捕获引用错误：未定义组件）

我正在尝试使用node.js和reactjs作为php后端的模板呈现服务。这是我的建议

我想知道由

browserify

构建的

bundle.js是否有问题。我得到了
Uncaught ReferenceError:ItemPage没有在客户端定义，因为组件
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")
    }
}

输出：

    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>';

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


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

更新：

我已将
默认导出
添加到文件中：

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;

从“React”导入React；
从“索环/组件/标签”导入标签；
从“索环/组件/选项卡”导入选项卡；
类ItemPage扩展了React.Component{
render（）{
返回
第一选项卡
第一个选项卡的内容

某物@@@@@@
第二选项卡
第二个选项卡的内容

第三选项卡
第三个选项卡的内容

}
_onClick（）{
警惕（“愤怒”）
}
}
导出默认项目页面；

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

以下是我的最新版本：

您需要在脚本中导出ItemPage

export default ItemPage

除了添加导出，还需要说browserify，通过添加
--standalone
标志来生成UMD输出

--standalone-s为提供的导出名称生成UMD捆绑包。
此捆绑包与其他模块系统一起使用并设置名称
如果未找到模块系统，则作为全局窗口给出

多行为了可读性
类语法不会创建全局变量。@gcampbell，我刚刚添加了
导出默认项页
，但它仍然不起作用。请查看我的最新更新。您使用
echo
创建的最后一个脚本标记将无法访问
ItemPage
，因为它没有被browserify绑定。我在文件末尾添加了
export default ItemPage
，并使用browserify再次编译了它，但它仍然不起作用。ItemPage在我的应用程序中仍然不是全局变量
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;

export default ItemPage

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