browserify 和 reactify 多个源文件和目标文件

Question

我正在将我的项目从 Grunt 转换为 Gulp，并且有多个输入 jsx 和输出 js 文件。我正在尝试编写一个 [simple] 任务，它将正确地将源组合到单独的应用程序文件中。目录结构是这样的：

├── dist
│   └── js
│       ├── app1.js
│       └── app2.js
└── src
    ├── app1.jsx
    ├── app2.jsx
    └── components
        ├── Button.jsx
        ├── Dashboard.jsx
        ├── Item.jsx
        ├── List.jsx
        └── Widget.jsx

app1.jsx 加载一些组件，app2.jsx 加载不同的组件。例如：

app1.jsx

var Button = require('./components/Button');
var List = require('./components/List');
var Item = require('./components/Item');

// etc

app2.jsx

var Button = require('./components/Button');
var Dashboard = require('./components/Dashboard');
var Widget = require('./components/Widget');
var List = require('./components/List');

// etc ...

不同的应用文件将在不同的页面中使用，组件将在需要的应用之间共享。

因此，我们的想法是运行一个任务，该任务将运行不同应用程序文件的要求，并使用 browserify 编译输出，并在 dist/js/ 下对单独的文件进行反应。我使用gulp-react 让它达到反应部分，但处理浏览器部分被证明是棘手的 - 这是我的gulpfile.js：

var react = require('gulp-react');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var del = require('del');

var browserified = transform(function(filename) {
  var b = browserify();
  return b.bundle();
});

gulp.task('clean', function() {
  del.bind(null, ['dist']);
});

gulp.task('react', ['clean'], function() {
  return gulp.src(['src/*.jsx'])
  .pipe(react())
  .pipe(browserified)
  .pipe(gulp.dest('dist'));
});

这会生成dist/js/{app1,app2}.js，但它们只包含定义require(..) 功能的JS 代码，没有反应源。如果我删除 .pipe(browserified) 语句，文件包含正确的反应代码，但不加载和要求。

如果我做错了什么，我将不胜感激。谢谢。

Answer 1

我认为问题在于你的路径：

gulp.task('react', ['clean'], function() {
  return gulp.src(['src/*.jsx']) // here!
  .pipe(react())
  .pipe(browserified)
  .pipe(gulp.dest('dist'));
});

您正在编译 app1.jsx 和 app2.jsx 但不是 components/*.jsx 文件。您可以使用globbing-patterns 修复它：

gulp.task('react', ['clean'], function() {
  return gulp.src(['src/**/*.jsx']) // here!
  .pipe(react())
  .pipe(browserified)
  .pipe(gulp.dest('dist'));
});

希望对你有帮助:)