2016-08-02 19 views
1

私はreactjsでReduxのを使用しようとしていると、それはエラーで失敗しています:私は反応し、このようにReduxの含めるようにしようとしているrequirejsを使用しないでreduxを使用するにはどうすればよいですか?

Uncaught ReferenceError: require is not defined 

:index.htmlのheadタグで

<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<script src="/redux.min.js"></script> 
<script src="/react-redux.min.js"></script> 

しかし、私は(Reduxのウェブサイトから)これを行うとき:

import { createStore } from 'redux'; 

エラーが発生し、そのステートメントがない場合は、使用しようとするとcreateStoreが存在しないというエラーが表示されます。

redux + reactjをrequirejsなしで使用するにはどうすればよいですか?

+1

'Redux.createStore' ??? – webdeb

答えて

0

ウェブサイトでは、今日の主要なブラウザでは実装されていないES6構文が使用されています。 babelを使用してコンパイルステップを追加する必要があります。これは、コード、react、redux、その他すべての依存関係を含め、すべてのjavascriptを1つのbundle.jsファイルに出力します。

reactとreduxで作業する場合は、ES6構文を使用するワークフローを設定する方法を学ぶ方が理にかなっています。あなたはベースとして作成反応するアプリを使用することを検討し、そこからReduxのサポートを追加することができます。

npm install -g create-react-app 
create-react-app newReduxApp 
npm install --save redux 
npm start 

その後App.jsに向かうとCREATESTOREを追加します。 create-reaction-appはbabelを使用してES6コンパイルをセットアップしているので、ES6構文を使用することができます。

ES6構文を使用したくない場合は、最初にES5構文に変更せずにWeb上で多くのドキュメントを使用することはできません。参考としてhttp://redux.js.org/docs/api/を使用して、あなたの行は次のようになります。

var createStore = Redux.createStore 
+0

ビルド中に私はすでにbabel-cliを使ってコンパイルしていますので、それは問題ではありません。 'var _redux = require(" redux ")' –

+0

私は混乱しています - あなたはCDNからのファイルを作成していますか? –

+0

CDNのファイルを使用して心を込めておけば、私は実際にそれを設定していないので、おそらくあなたを助けることはできません。上のcreate-react-appアプローチを試してみたいと思えば、もっと運があるかもしれません。 –

0

あなたはバベルでコンパイルJSをバンドルするbrowserifyイサキタスクを追加する必要があります。 browserifyには、requiredメソッドを実行する小さなCommonJS requireモジュールが含まれています。

module.exports = function(grunt) { 

    var files = { 
    '.tmp/public/js/z/bundle-<%= githash.main.hash %>.js': ['assets/js/**/*.jsx'] 
    }; 

    grunt.config.set('browserify', { 
    dist: { 
     options: { 
     transform: [['babelify', {presets: ['airbnb']}]] 
     }, 
     files: files, 
    }, 
    }); 

    grunt.loadNpmTasks('grunt-browserify'); 
}; 

以外にも、あなたがpackage.jsonにDEVの依存関係を次のように追加する必要があります

はここにbrowserifyのための私の面倒な作業です。

"devDependencies": { 
    "babel-preset-airbnb": "^2.1.1", 
    "babel-preset-es2015": "^6.16.0", 
    "babel-preset-react": "^6.16.0", 
    "babelify": "^7.3.0", 
    "grunt-browserify": "^5.0.0" 
} 
関連する問題