reactjs - WebPack 与 React 未捕获引用错误

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 脚本引用后)，我在控制台中得到以下内容:“ Uncaught 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 并让人们理解匀场或其他什么。