Question

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

我想知道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

Answer 1

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

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

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

为了便于阅读，

多行

Answer 2

您需要在脚本中导出ItemPage

export default ItemPage

browserify使用browserify在客户端无法工作（未捕获的ReferenceError：未定义组件）

2 个答案: