reactjs bundle script by browserify not working on the client side (Uncaught ReferenceError: Component is not defined)

Question

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

我想知道 browserify 构建的 bundle.js 是否有问题。我在客户端得到 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

Answer 1

您需要在脚本中导出 ItemPage

export default ItemPage

Answer 2

除了添加导出之外，您还需要通过添加 --standalone 标志来使用 browserify 来生成 UMD 输出。

--standalone -s Generate a UMD bundle for the supplied export name. This bundle works with other module systems and sets the name given as a window global if no module system is found.

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

为了可读性多行

reactjs bundle script by browserify not working on the client side (Uncaught ReferenceError: Component is not defined)

reactjs bundle script by browserify not working on the client side (Uncaught ReferenceError: Component is not defined)

javascript

node.js

browserify

reactjs

babeljs