Как использовать сокращение без requirejs?

Question

Я пытаюсь использовать Redux с reactjs и терпит неудачу с ошибкой:

Uncaught ReferenceError: require is not defined 

Я пытаюсь включить реагировать и Redux, как это:

В index.html головной метке

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

Но когда я делаю это (от Redux сайта):

import { createStore } from 'redux'; 

Я получаю сообщение об ошибке, и если у меня нет этого утверждения, тогда я получаю сообщение об ошибке, которое createStore не существует, когда я пытаюсь его использовать.

Как я могу использовать реакцию redux + без requirejs?

Answer 1

Веб-сайт использует синтаксис ES6, который сегодня не реализован в основных браузерах. Вам нужно добавить шаг компиляции с помощью babel, который выведет весь ваш javascript в один файл bundle.js, включая ваш код, реакцию, сокращение и все другие зависимости.

Если вы хотите работать с реакцией и сокращать, имеет смысл узнать, как настроить рабочий процесс для использования синтаксиса ES6. Вы могли бы рассмотреть возможность использования создать реагирующий-приложения в качестве базы, а также добавить поддержку Redux оттуда:

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

Затем голова в App.js и добавить createStore. Поскольку приложение create-react-app настроило компиляцию ES6 для вас, используя babel, вы сможете использовать синтаксис ES6.

Если вы предпочитаете не использовать синтаксис ES6, вы не сможете использовать большую часть документации в Интернете без предварительного изменения ее синтаксиса ES5. Использование http://redux.js.org/docs/api/ в качестве эталона, ваша линия будет:

var createStore = Redux.createStore 

Answer 2

Вы должны добавить browserify черновой задачу расслоения скомпилированных JS Бабеля. browserify содержит небольшой модуль требований CommonJS, который выполняет метод required.

Вот моя хрюкать задача 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'); 
}; 

Кроме того, следует добавить следующие зависимости Dev вам 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" 
}