具有React未捕获参考错误的WebPack

Question

我非常松散地遵循这里的示例,直到它开始运行dev服务器.

我有一个测试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加载器(除了我添加库属性之外,它与示例中的基本相同).

我运行webpack并生成捆绑文件,就像我期望的那样,当我尝试在html文件中使用该组件时(包括bundle.js脚本引用之后),我在控制台中得到以下内容:" 未捕获的ReferenceError:测试不是定义 ".

HTML包含以下内容:

<div id="hi">
</div>
<script type="text/jsx">
    /** @jsx React.DOM */
    React.renderComponent(
      <Test />,
      document.getElementById('hi')
    );
</script>

我是否做了一些不正确的事情,使用CommonJS样式定义的组件与技术上不使用模块加载器的html页面(我试图将此测试看作是试图加载组件而没有任何人结构化模块加载器的类型)？

webpack的输出可在此处获得

编辑2:完整的示例代码可用作github仓库

Answer 1

是的,你最好关注这个例子并要求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个单独的反应副本,你目前在webpack中需要React的方式,然后你也在页面上加载它.您应该导出一个获取React对象的函数,或者使用global来在bundle之外使用它.

例如,这将工作:

/** @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样式要求让人们弄清楚填充或者随你.