使用 Babelify 编译 React 导致 React Router 未定义

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 import X from Y 语法，例如

import React from 'react'