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中的基本相同，除了我添加{ {3}}）。

我运行webpack，它会像我期望的那样生成捆绑文件，但是，当我尝试在html文件中使用该组件时（包括bundle.js脚本引用之后），我在控制台中得到以下内容：＆＃34; 未捕获的ReferenceError：未定义测试＆＃34;。

HTML包含以下内容：

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

我是否做了一些不正确的事情，使用CommonJS样式定义的组件与技术上不使用模块加载器的html页面（我试图将此测试视为＆＃39;某人试图在没有任何类型的结构化模块加载器的情况下加载组件？

网络包的输出可用library properties

编辑2：完整的示例代码可用here

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个单独的反应副本，你目前在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样式需要让人们想象没有垫片或其他什么。

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

1 个答案: