Question

我正在使用Gulp构建我的构建系统，使用Browserify来编译我的JS。我一直在使用Reactify进行JSX编译，但我认为我会转而使用Babelify来获得一些额外的ES2015功能。编译时不会抛出任何错误，但是当我在浏览器中加载我的网站时，我的JS控制台出现以下错误：

Uncaught ReferenceError: Router is not defined

错误所指的行是：

var React = require('react');

在页面上加载的主要组件文件中。

我导入React Router的地方在我的App.jsx文件（这是应用程序的入口点）和我的routes.jsx文件中，我在其中定义了路由：

App.jsx

var React  = require('react'),
    Router = require('react-router'),
    routes = require('./routes.jsx');

Router.run(routes, function(Handler, state) {

    var routeClasses = '';
    for (var i = 1; i < state.routes.length; i++) {
        routeClasses += state.routes[i].name + ' ';
    }

  React.render(<Handler classes={routeClasses.trim()} />, document.getElementById('root'));
});

routes.jsx

var React        = require('react');
    Router       = require('react-router'),
    Route        = Router.Route,
    DefaultRoute = Router.DefaultRoute,
    App          = require('./_layout/App.jsx'),
    Editor       = require('./editor/Editor.jsx');

module.exports = (
  <Route name="app" path="/" handler={App}>
    <DefaultRoute name="editor" handler={Editor} />
  </Route>
);

使用Reactify而不是Babelify时，一切正常。我正在使用Gulp进行构建过程：

gulp.task('js', function() {
  var browserify = require('browserify'),
      watchify   = require('watchify'),
      minifyify  = require('minifyify'),
      babelify   = require('babelify');

  function bundle() {
    b.bundle()
      .on('error', function(error){
        gutil.log(error);
      })
      .pipe(source('app.js'))
      .pipe(gulp.dest(paths.client.js.build))
      .pipe(gulpif(!isStartup, browserSync.stream()));

    isStartup = false;
  }

  var map = isProd ? false : 'app.map.json';

  var b = browserify({
    cache: {},
    packageCache: {},
    entries: paths.client.js.dev,
    debug: true,
    plugin: [watchify]
  })
  .transform(babelify, {presets: ['es2015', 'react']})

  .plugin('minifyify', {
    map: map,
    output: paths.client.js.build + 'app.map.json',
  });

  b.on('update', function(){
    bundle();
  });

  b.on('log', gutil.log); // output build logs to terminal
  bundle();
});

使用Reactify的工作版本只是省略了.transform(babelify...)行并将transform: reactify添加到browserify()初始化代码，即

  var b = browserify({
    cache: {},
    packageCache: {},
    entries: paths.client.js.dev,
    debug: true,
    transform: reactify,
    plugin: [watchify]
  });

Answer 1

它正在使用es2015 [(0, 0, 0, 0), (0, 0, 0, 1), (0, 0, 1, 0), (0, 0, 1, 1), (0, 1, 0, 0), (0, 1, 0, 1), (0, 1, 1, 0), (0, 1, 1, 1), (1, 0, 0, 0), (1, 0, 0, 1), (1, 0, 1, 0), (1, 0, 1, 1), (1, 1, 0, 0), (1, 1, 0, 1), (1, 1, 1, 0), (1, 1, 1, 1)]语法，例如

import X from Y

使用Babelify编译React路由器未定义的React结果

1 个答案: