通过browserify reactjs包脚本不工作在客户端(未捕获ReferenceError:组件未定义)

我尝试使用node.js和reactjs作为我的PHP后端模板呈现服务。 这是指导原则 。

我想知道是否有一个问题,我build立了由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

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

–standalone -s为提供的导出名称生成一个UMD包。 如果没有find模块系统,此捆绑包可与其他模块系统一起使用,并将给定的名称设置为全局窗口。

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

多行为了可读性

您需要在脚本中导出ItemPage

 export default ItemPage