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时，我会收到.menu { width: 475px; margin: 0 auto; } .menu ul { min-width: auto; margin: 0 auto 0 auto; padding: 23px 0 0 0; } .menu li { list-style-type: none; float: left; } /*selected tag changes appearance*/ .active { background-color: #4a4a4a; color: #FFFFFF; } /*attributes of individual nav button*/ .menu a { text-decoration: none; width: 75px; padding: 10px; float: left; text-align: center; color: #4a4a4a; } /*changes appearance of menu item on hover*/ .menu a:hover { background-color: #4a4a4a; color: #FFFFFF; -webkit-transition: color, background-color .4s; /* Safari */ transition: color, background-color .4s; }不存在的错误。

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

Answer 1

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

如果您想使用react和redux，了解如何设置工作流以使用ES6语法更有意义。您可以考虑使用create-react-app作为基础，并从那里添加redux支持：

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

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

如果您不想使用ES6语法，则在未先将其更改为ES5语法的情况下，您将无法在Web上使用大量文档。使用http://redux.js.org/docs/api/作为参考，您的行将是：

var createStore = Redux.createStore

Answer 2

你应该添加一个browserify grunt任务来捆绑babel编译的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');
};

此外，您应该向package.json添加以下dev依赖项。

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

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

2 个答案: