2016-04-18 15 views
20

Imがアプリを反応させるのが、次のエラーを取得新しい建物に定義されていません - を必要が

ハローworld.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Hello React!</title> 
    <script src="react/react.js"></script> 
    <script src="react/react-dom.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
    </head> 
    <body> 
    <div id="example"></div> 
    <script type="text/babel" src="hello-world.js"> 
    </body> 
</html> 

ハローworld.js

を「必要が定義されていない」を
import React from 'react'; 
import ReactDOM from 'react-dom'; 

import App from './App.jsx'; 

ReactDOM.render(
     <App />, 
     document.getElementById('example') 
    ); 

App.jsx

import React from 'react'; 

class App extends React.Component { 
    render() { 
     return (
     <div> 
      Hello World!!! 
     </div> 
    ); 
    } 
} 

export default App; 

私のクライアントからこれを実行していて、Webサーバーを実行していません。

http://requirejs.org/docs/release/2.2.0/minified/require.js を含めるようにしましたが、全く異なるエラーが発生します。

答えて

38

ブラウザ内でCommonJSモジュールを使用しようとしています。 これはでなく、の仕事です。

どのように使用していますか? ES6にimport ... from ...を書き込むとBabelはこれらの呼び出しをCommonJSというモジュール定義に変換し、CommonJSはブラウザにはないので、require()から未定義のエラーが出ます。

また、AMD、非同期モジュール定義と呼ばれる別のモジュール定義パターンを使用するRequireJSもロードしようとしており、requireコールを処理しません。 RequireJS固有の呼び出しでwrap themを実行できます。

コードベースでCommonJSモジュールを使用する場合は、最初にBrowserifyまたはwebpackのいずれかにバンドルする必要があります。 2つのツールは、requireコールをブラウザ内で使用できるいくつかのグルー魔法に変換します。

しかし、あなたの特定のケースでは、あなたがimport呼び出しを削除し、ちょうどブラウザがの世話をし、あなたのコードが動作するはずですwindow対象に作成したクラスを添付してみましょう場合。