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

我使用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到transform: reactify browserify()初始化代码，即

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

---

它与es2015 import X from Y语法中import X from Y ，例如

import React from 'react'

链接地址: http://www.djcxy.com/p/32979.html

上一篇: Using Babelify to compile React results in React Router being undefined

下一篇: Unexpected token with react jsx and babel