javascript - 从 .html 文件访问 webpack/捆绑的 React 类

Question

是否无法访问构建链接到的 html 文件中已“构建”的组件？

我正在尝试以下操作 -

在bundle.js中

var React = require('react');
var ReactDOM = require('react-dom');

     var Titles = React.createClass({
       render() {

          return (
             <div>
                <h1>{this.props.headerProp}</h1>
                <h2>{this.props.contentProp}</h2>
             </div>
          );
       }
    });

在我的 html 页面中 -

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

    <div id="con"></div>
        <script type="text/javascript" src="/public/bundle.js'"></script>

      <script type="text/jsx">

    ReactDOM.render(<Titles headerProp = "Header from props..." contentProp = "Content
       from props..."/>, document.getElementById('con'));
        </script>

但是控制台输出 React 未定义。

我什至尝试在包内全局设置 react -

window.React = React;

并用 window 来调用它。带前缀但产生相同的结果。

Answer 1

因为你提到了bundle.js文件的片段包含 commonjs样式导入，我假设您正在使用 Webpack。

我对您的代码有一些考虑。

1. bundle.js文件不会将任何模块公开为全局模块。这包括 React 和任何其他模块 require包内。不会有window.ModuleName 。但是，这些模块可以在浏览器中通过 require.js 访问。因为 Webpack 会将模块导出为 UMD，也就是说，它们可以通过 commonjs 访问。或AMD (Require.js)。
2. 我很确定，如果在 webpack 配置文件的入口点中，您执行类似 var React = require("react"); window.React = React 的操作，这实际上会起作用。
3. 有一个 Webpack 模块旨在以比 (2) 更优雅的方式全局公开模块(如 window.x )，称为 expose-loader 。你应该看看它。
4. 您确实应该尽量避免做您想做的事情。在你的entry.js文件(webpack 配置的入口点)应该负责执行类似 ReactDOM.render(..., document.getElementById("#app")) 的操作。这样，只需包含您的 bundle ，应用程序就会自动呈现。每个人都会这样做。
5. JSXTransformer.js以及 <script type="text/jsx">很久以前就已经被弃用了。现在你应该使用 Babel 来编译 React。