我非常松散地遵循这里的示例，直到开始运行开发服务器为止。
我有一个测试React组件（在scripts / test.jsx中）：
/** @jsx React.DOM */
var React = require('react');
var Test = React.createClass({
render: function(){
return <h1>HI!</h1>
}
});
module.exports = Test;
我有一个webpack.config，在其中我针对源目录使用jsx加载器（除了添加库属性外，该示例与示例中的jsx加载器基本相同）。
我运行webpack并按预期方式生成了捆绑文件，但是，当我尝试在html文件中使用组件时（包括bundle.js脚本引用之后），我在控制台中得到以下信息：“ Uncaught ReferenceError：Test not定义为“。
HTML包含以下内容：
<div id="hi">
</div>
<script type="text/jsx">
/** @jsx React.DOM */
React.renderComponent(
<Test />,
document.getElementById('hi')
);
</script>
我是否在做一些不正确的事情，以针对HTML页面使用在CommonJS样式中定义的组件，而该页面在技术上并未使用模块加载器（我正在尝试将此测试视为试图加载该组件而没有任何内容的人结构化模块加载程序的类型）？
Webpack的输出在这里可用
编辑2：完整的示例代码可作为github回购
是的，最好还是遵循示例并要求Test使用.jsx文件，而不是将其内联到HTML中。
否则，Test需要将其导出为全局变量，因此您需要遵循与browserify--standalone标志类似的约定，看起来像这样：
output: {
library: "Test",
libraryTarget: "umd"
}
http://webpack.github.io/docs/webpack-for-browserify-users.html#standalone
编辑：在查看您的GH回购后，您有：
<script src="bundle.js" type="text/js"></script>
代替
<script src="bundle.js" type="text/javascript"></script>
因此根本没有加载捆绑软件。此外，您无法拥有2个独立的react副本，即您当前需要的版本，您需要从webpack中获取React，然后再将其加载到页面上。您应该导出一个带React对象的函数，或者使用全局函数在捆绑包之外使用它。
例如，这将起作用：
/** @jsx React.DOM */
module.exports = function(React) {
var Test = React.createClass({
render: function(){
return <h1>HI!!</h1>
}
});
return Test;
};
接着：
/** @jsx React.DOM */
React.renderComponent(
Test(React)(),
document.getElementById('hi')
);
或这个
/** @jsx React.DOM */
var Test = React.createClass({
render: function(){
return <h1>HI!!</h1>
}
});
module.exports = Test;
接着：
/** @jsx React.DOM */
React.renderComponent(
<Test />,
document.getElementById('hi')
);
虽然我无法想象大多数使用React包的人都会使用脚本标签加载它，并且您通常不希望使用全局变量，所以最好使用CommonJS样式的require并让人们找出填充或随你。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句