使用 gulp、browserify 并使用插件做出反应

Question

我正在尝试学习 gulp、browserify 和 react，并且一直在做一个小测试项目。这很好，直到我决定在那里实现一些动画。具体如下：

var React = require("react");
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

我收到一个错误，因为“React.addons”为空。

我还有一个问题是我的构建需要一个时间 - 20 秒到 1 分钟之间。我认为部分原因是因为 react 本身包含在我的包中，而理想情况下我希望从 CDN 中检索它（或至少将其分开）。

这是我的 gulpfile：

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('js', function () {
    return browserify('./public/js/app.js', {
        debug: false, bundleExternal: true
    })
    .transform(babelify, {"presets": ["es2015", "react"]})
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./build/js/'));
});

如果我将“bundleExternal”设置为 false，那么它确实会停止将 react 包含在我的 js 中 - 但由于未找到“react”，因此没有任何效果。我发现了一些关于 browserify-shims 的东西，但无法通过 gulp 让它工作。并且不确定这是否是正确的方法？

为新手问题道歉！

Answer 1

要包含 ReactCSSTransitionGroup 你需要先安装它：

npm install react-addons-css-transition-group

然后只需要它：

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');