Importazioni javascript di livello superiore - Redux

Question

Sto cercando di imparare il redux e ho riscontrato un errore. Ho solo due file, un file index.html e un file main.js, ci sono collegamenti al jquery e redux cdns nel file html. Ho appena ottenuto 2.3 nel tutorial di redux (http://redux.js.org/docs/basics/Store.html) e sono bloccato. Ho

import {createStore} from 'redux'; 

nella parte superiore del mio file main.js, ma quando carico l'applicazione, ottengo un errore che punta alla riga sopra dicendo

SyntaxError: import declarations may only appear at top level

Che cosa è un 'top level dichiarazione di importazione '?

Ecco un elenco del mio codice se questo aiuta. https://gist.github.com/austincarvey/6e6c8fdc2640b0f9bbfb

Answer 1

La direttiva import non è riconosciuta dai browser web. È usato in fase di compilazione, per legare insieme diversi file sorgenti e moduli di terze parti in un unico pacchetto web. Se ciò non ha senso, allora ho altamente raccomandato l'apprendimento di Babel e di Webpack o Browserify. Babel trasmette la sintassi ES6 e React al codice ES5 browser-friendly, mentre Webpack/Browserify raggruppa i moduli.

Per ora, comunque, se si vuole solo andare avanti con l'apprendimento Redux, si può semplicemente rimuovere l'istruzione di importazione e di utilizzare invece la variabile globale Redux esposta dallo script redux CDN nel vostro succo. vale a dire

var store = Redux.createStore(counterReducer); 

Answer 2

import viene utilizzato quando si include un file tramite moduli ES6 in un contesto che li sostiene (Browserify/Webpack/etc, le future versioni di browser).

Poiché si include la lib di Redux tramite il tag <script>, che si occupa di includere Redux nell'ambito globale.

Nel caso del tuo caso, se cancelli la linea uno e cambi la chiamata createStore in Redux.createStore in 29, tutto dovrebbe funzionare.