如何在没有要求的情况下使用redux

Question

我试图将Redux与reactjs一起使用，但它失败了，错误为：

Uncaught ReferenceError: require is not defined

我试着将react和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时，我会得到一个不存在的错误。

如何在没有requirejs的情况下使用redux+react？

Answer 1

该网站使用的是ES6语法，目前主流浏览器尚未实现该语法。您需要使用babel添加一个编译步骤，该步骤将把所有javascript输出到一个bundle.js文件中，包括您的代码、react、redux和所有其他依赖项。

如果您想使用react和redux，那么学习如何设置使用ES6语法的工作流更有意义。你可以考虑使用create-react应用程序作为基础，并从那里添加redux支持：

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

然后进入App.js并添加createStore。因为create-rect应用程序已经为您使用babel设置了ES6编译，所以您将能够使用ES6语法。

如果您不想使用ES6语法，那么如果不首先将其更改为ES5语法，就无法在网上使用大量文档。使用http://redux.js.org/docs/api/作为参考，您的行将是：

var createStore = Redux.createStore

Answer 2

您应该添加一个browserify grunt任务来捆绑babel编译的js。browserify包含一个小型CommonJS require模块，用于执行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');
};

此外，您应该在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"
}