【发布时间】：2023-04-03 13:15:01
【问题描述】：
我一直致力于将 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 要求提供有关结构的更多详细信息，因此这里是 react 文件夹的布局方式。代码取自这个article，它使用这个github zip 源来演示反应和回流。该项目非常接近我作为起点所需要的，但使用 Grunt 而不是 Gulp。
react 文件夹的结构如下：
反应\App.jsx \ Bootstrap.jsx \components\NoteApp.jsx \ NoteCreationBox.jsx \ 注意.jsx \ NoteListBox.jsx \ NoteList.jsx \TextArea.jsx
错误来自 App.jsx 文件中的一行：
var React = require('react');
var NoteApp=require('./components/NoteApp.jsx');
但更改此行会导致 gulp 对话失败并出现丢失文件错误。
【问题讨论】：
-
我尝试使用一些基本文件重新创建示例，并且效果非常好。你能告诉我们你的文件是如何构成的吗？我有点困惑，您将所有 jsx 文件放在“react”文件夹中，但 NoteApp.jsx not 在该文件夹中。也许有一些路径问题正在发生。
-
@ddprrt 感谢您的回复，我已经更新了我的问题，提供了有关结构的更多详细信息。
-
我用你的代码编译了这个项目，并且仍然运行良好。猜猜我们必须更深入：您使用什么操作系统？我正在考虑可能在您的系统上出现的区分大小写，但在原作者的系统上没有（也很奇怪，因为 Grunt 似乎工作，不是吗？）
-
是的，Grunt 工作没有问题。 Gulp 编译正常，但是当我启动项目并在浏览器中对其进行测试时，我得到了无法找到模块'./components/NoteApp.jsx'。我在带有 Nginx 的 Ubuntu 14.04 Digital Ocean 云服务器上运行它。
-
啊，现在我明白了。我看到 Grunt 和 Gulp 的包在不同部分相互比较时是不同的。现在正在检查版本号...
标签： reactjs gulp browserify gulp-glob