通过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
- 在Node.js中导入React throws SyntaxError:意外的令牌导出
- 您应该通过在Babelconfiguration中使用`env`部分禁用生产中的react-transform-hmr
- Babel不会忽略node_modules目录,尽pipe它处于“ignore”configuration
- “导出默认值”不适用于Babel React
- 引用摩卡testing的环境variables
- 如何将ES6节点和jsx代码编译成ES5 vanilla JS
- Babel注册不会转储包含在node_modules中的自己的文件
- nodemon,babel-node:如何设置环境variables?
- 如何从全局安装的节点应用程序中获取本地文件夹中没有node_modules的响应组件?