带有 React 未捕获引用错误的 WebPack

Question

我非常松散地遵循示例here，直到它开始运行开发服务器。

我有一个测试 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 加载程序（它与 the example 中的基本相同，除了我添加了 library properties）。

我运行 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 的输出可用here

编辑 2：完整的示例代码可用as a github repo

Answer 1

是的，您最好遵循示例并从 .jsx 文件中要求 Test 而不是将其内联到 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 并让人们了解出匀场或什么的。