Question

我正在努力学习gulp，浏览器和反应，并且已经敲了一个小测试项目。这很好，直到我决定在那里实现一些动画。特别是：

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

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

我还有一个问题，即我的构建时间在20秒到1分钟之间。我认为原因部分是因为反应本身被包含在我的包中，而我理想的是想从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，那么它确实会停止反应包含在我的js中 - 但是没有任何效果，因为找不到“react”。我发现了一些关于browserify-shims的东西，但是无法从gulp中获得它。并不确定这是否是正确的方法？

为新手问题道歉！

Answer 1

要包含ReactCSSTransitionGroup，您需要先安装它：

npm install react-addons-css-transition-group

然后只需要它：

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

使用gulp，浏览并与插件做出反应

1 个答案: