Wie redux verwenden ohne requirejs?

Question

Ich versuche Redux mit reactjs zu verwenden, und es ist mit dem Fehler Fehler:

Uncaught ReferenceError: require is not defined 

Ich versuche zu schließen reagieren und Redux wie folgt aus:

In index.html head-Tag

<script src="https://npmcdn.com/react-dom@15.3.0/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> 

Aber wenn ich dies tun (von der Redux-Website):

import { createStore } from 'redux'; 

Ich bekomme den Fehler, und wenn ich diese Aussage nicht habe, bekomme ich einen Fehler, dass createStore nicht existiert, wenn ich versuche, es zu verwenden.

Wie kann ich redux + react ohne requires verwenden?

Answer 1

Die Website verwendet die ES6-Syntax, die heute in den wichtigsten Browsern nicht implementiert ist. Sie müssen einen Kompilierungsschritt mit babel hinzufügen, der all Ihr Javascript in einer bundle.js-Datei ausgeben würde, einschließlich Ihres Codes, react, redux und aller anderen Abhängigkeiten.

Wenn Sie mit react und redux arbeiten möchten, ist es sinnvoller zu lernen, wie Sie einen Workflow für die ES6-Syntax einrichten. Sie könnten mit create reagieren-App als Basis betrachten und von dort redux Unterstützung hinzufügen:

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

Dann den Kopf in App.js und das creates hinzuzufügen. Da create-react-app die ES6-Kompilierung für Sie mit babel eingerichtet hat, können Sie die ES6-Syntax verwenden.

Wenn Sie die ES6-Syntax nicht verwenden möchten, können Sie nicht viele Dokumentationen im Web verwenden, ohne zuerst die ES5-Syntax zu ändern. Mit http://redux.js.org/docs/api/ als Referenz, würde Ihre Linie:

var createStore = Redux.createStore 

Answer 2

Sie sollten eine browserify Grunzen Aufgabe hinzufügen, die kompilierten js von babel zu bündeln. browserify enthält ein kleines CommonJS require-Modul, das die required-Methode ausführt.

Hier ist mein Grunzen Aufgabe für browserify:

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'); 
}; 

Außerdem sollten Sie folgende dev Abhängigkeiten in den Sie package.json.

"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" 
}