5

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

我有一个测试 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 repo获得

4

1 回答 1

6

是的，您最好遵循示例并要求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 并让人们弄清楚 shimming 或任何。

于 2014-08-05T19:04:47.680 回答