スプリット

をバンドル私は（うなり声と統合）WebPACKのため、以下の構成を有しているライブラリのバンドルやコンポーネントを反応させるにコードを反応させるスプリット

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

// index.jsx 
ReactDOM.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('app') 
);

そして、それらのバンドルをhtmlに埋め込みます：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Kanban app</title> 
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
    <script type="text/javascript" src="{% static 'js/react.bundle.js' %}"></script> 
    <script type="text/javascript" src="{% static 'js/index.bundle.js' %}"></script> 
    </head> 
    <body> 
    <div id="app"></div> 
    </body> 
</html>

<h1>Hello, world!</h1>という問題が発生しました。エラーは 'ReactDOMが定義されていません'です。どのように私はその問題を克服することができますか？ react.jsxとindex.jsxをマージするときに機能しますが、コードコンパイルを高速化するために別々に保持したいと考えています。

出典

2016-03-28 AmirM

index.jsxは、コードが動作するためには単に反応と反応-domに依存しなければなりません。あなたが望むものを得るためには、externalsを使ってロードすることができます。あなたはindexを生成するターゲットに対して、このようなものを設定することができ：

externals: { 
    'react': { 
    commonjs: 'react', 
    commonjs2: 'react', 
    amd: 'React', 
    root: 'React' 
    }, 
    'react-dom': 'react-dom' 
},

この方法のWebPACK ないバンドルが反応し、反応-DOMをごindexバンドルになります。

出典

2016-03-28 10:18:37

答えて

関連する問題