为什么在将 reactify transform 与 browserify 和 glob 一起使用时，我的 gulp 任务没有转换 jsx

Question

我一直在努力将 grunt 任务转换为 gulp。 grunt 文件如下所示：

 browserify: {
     options: {
         transform: [ require('grunt-react').browserify ]
     },
     client: {
         src: ['react/**/*.jsx'],
         dest: 'public/js/browserify/bundle.js'
     }
}

我看过很多 browserify 和 gulp 的例子，但它们都只有一个文件起点。为了解决这个问题，我尝试使用 glob。经过几次错误的开始后，我想到了以下内容。它运行没有错误并创建了一个 bundle.js 文件，但是 reactify 似乎没有正常工作，因为 jsx 似乎没有被转换所以我最终得到错误：

未捕获错误：找不到模块'./components/NoteApp.jsx'

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

gulp.task('browserify', function (cb) {
  glob('./react/**/*.jsx', {}, function (err, files) {
    var b = browserify();

    files.forEach(function (file) {
      b.add(file);
    });

    b.transform(reactify);

    b.bundle()
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('./public/js/browserify/'));
    cb();
  }); 
});

ddprrt 请求了有关结构的更多详细信息，因此这里是反应文件夹的布局方式。代码取自此 article which uses this github zip 源代码以演示反应和回流。该项目非常接近我作为起点所需要的，但使用 Grunt 而不是 Gulp。

react 文件夹的结构如下：

反应\App.jsx \Bootstrap.jsx \组件\注释App.jsx \NoteCreationBox.jsx \Note.jsx \NoteListBox.jsx \NoteList.jsx \TextArea.jsx

错误来自 App.jsx 文件中的一行：

var React = require('react');
var NoteApp=require('./components/NoteApp.jsx');

但更改此行会导致 gulp 对话失败并出现丢失文件错误。

Answer 1

我想我现在得到了答案。这真的是一些版本混淆，reactify 似乎更先进，处理事情的方式与原来的 reactify 不同。可能是因为两者仍处于实验状态。我还猜测 React/Reflux 继续前进，所以你最终得到了一些不太符合要求的版本。但是，您仍然可以修复它并且运行您应用：

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var glob = require('glob');
var reactify = require('grunt-react').browserify;

gulp.task('browserify', function (cb) {
    glob('./react/Bootstrap.jsx', function (err, files) {
        var b = browserify({
            entries: files
        }).transform(reactify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./public/js/browserify/'));
        cb();
    }); 
});

我们没有使用 require('reactify')，而是使用 grunt-react 提供的 reactify。请参阅上面的代码。您应该能够切换中间件。另外，不要遍历所有文件，只是你的主要入口点，在这种情况下是 Bootstrap.jsx.

我知道这很不方便，也许当您尝试自己的应用程序时，请从全新的设置开始。

** 更新**

那是我之后的 package.json，只是在处理之前的项目：

{
  "name": "react-note-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "main": "./bin/www"
  },
  "engines": {
    "node": ">= 0.10.0"
  },
  "dependencies": {
    "body-parser": "~1.8.1",
    "cookie-parser": "~1.3.3",
    "debug": "~2.0.0",
    "ejs": "~0.8.5",
    "express": "~4.9.0",
    "express-session": "^1.8.2",
    "morgan": "~1.3.0",
    "node-jsx": "^0.11.0",
    "react": "^0.11.2",
    "reflux": "^0.1.13",
    "serve-favicon": "~2.1.3"
  },
  "devDependencies": {
    "browserify": "^9.0.7",
    "glob": "^5.0.3",
    "grunt": "^0.4.5",
    "grunt-browserify": "^3.0.1",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-nodemon": "^0.3.0",
    "grunt-react": "^0.9.0",
    "gulp": "^3.8.11",
    "react-tools": "^0.11.2",
    "reactify": "^1.1.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

为什么在将 reactify transform 与 browserify 和 glob 一起使用时，我的 gulp 任务没有转换 jsx

Why is my gulp task not converted jsx when using reactify transform with browserify and glob

browserify

reactjs

gulp

gulp-glob