Импорт javascript верхнего уровня - Redux

Я пытаюсь изучить redux, и я столкнулся с ошибкой. У меня есть только два файла: файл index.html и файл main.js. В html файле есть ссылки на jquery и redux cdns. Я только получил 2.3 в учебнике redux (http://redux.js.org/docs/basics/Store.html) и застрял. У меня

import {createStore} from 'redux';

в верхней части моего файла main.js, но когда я загружаю приложение, я получаю сообщение об ошибке, указывающее на строку выше, говоря

SyntaxError: import declarations may only appear at top level

Что такое "декларация импорта верхнего уровня"?

Вот суть моего кода, если это помогает. https://gist.github.com/austincarvey/6e6c8fdc2640b0f9bbfb

Ответы

Ответ 1

Директива import не распознается веб-браузерами. Он использовался на этапе компиляции, чтобы связать разные исходные файлы и сторонние модули в один веб-узел. Если это не имеет смысла, я настоятельно рекомендую изучить Babel и Webpack или Browserify. Babel транслирует синтаксис ES6 и React в дружественный браузер код ES5, в то время как Webpack/Browserify связывает ваши модули.

Пока же, если вы просто хотите продолжить изучение Redux, вы можете просто удалить оператор импорта и вместо этого использовать глобальную переменную Redux, которую вы можете открыть с помощью CD-диска redux CD3 script. то есть.

var store = Redux.createStore(counterReducer);

Ответ 2

import используется, когда вы включаете файл через модули es6 в контексте, который их поддерживает (Browserify/Webpack/etc, будущие версии браузеров).

Поскольку вы включаете тег Redux через тег <script>, который заботится о включении Redux в глобальную область.

В случае вашей сущности, если вы удалите строку 1 и измените вызов createStore на Redux.createStore на 29, все должно работать.