在 Symfony2 模板中使用 requireJS 启动 React 组件

Question

我无法让 React 组件在 Symfony2 的 Twig 模板中工作，使用 RequireJS 启动它们。我试图让这个工作：https://github.com/rackt/react-autocomplete

首先，我在本地安装了它，与我的 css 模板文件并行：

npm install react-autocomplete

然后，从我的树枝模板中选择一些部分：

<html>    
   <head>
       <script src="https://fb.me/react-0.13.1.js"></script>
       <script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js">    </script>
   </head>
<body>
    <div id="react_demo">
        <script type="text/jsx">
            require(["{{asset('/bundles/demobundle/js/node_modules/react-autocomplete')}}"], function (ReactAutocomplete) {
                          alert('react-autocomplete loaded');
                          });
         </script>
    </div>
</body>
</html>

现在，问题来了：它似乎没有找到我的 React 组件——或者不明白它是我正在尝试加载的 React 组件……对于一些我没有的背景信息除了包含 React 和 Require JS 文件并安装组件外，什么也没做。也许我错过了什么？

Uncaught Error: Load timeout for modules: /bundles/demobundle/js/node_modules/react-autocomplete

Answer 1

那个看起来像一个 CommonJS 模块，虽然可以用 RequireJS 加载它们，但它需要一些 additional configuration。

While the packages can have the CommonJS directory layout, the modules themselves should be in a module format that RequireJS can understand. Exception to the rule: if you are using the r.js Node adapter, the modules can be in the traditional CommonJS module format. You can use the CommonJS converter tool if you need to convert traditional CommonJS modules into the async module format that RequireJS uses.

另见 http://requirejs.org/docs/commonjs.html and

在 Symfony2 模板中使用 requireJS 启动 React 组件

Using requireJS to initiate React component in Symfony2 template

javascript

symfony

requirejs

reactjs