javascript - Browserify 需要目录中的所有文件

Question

我是 Browserify 的新手(以及一般的 Javascript 构建系统)，并且已经到了让我彻底困惑的地步。

我有 Gulp 设置来进行构建，它一直运行良好，最近我一直在使用 Browserify 进行捆绑——主要是为了我可以将我的代码分成单独的文件和 require()他们需要去的地方。

我的问题是，我有一个文件夹，其中包含我需要在另一个模块中需要的一堆小模块，并且我试图避免对所有模块的名称进行硬编码。有没有办法要求所有文件？

我试过使用 Bulkify和 Folderify但不能让他们工作。例如，使用 Bulkify，安装的包名为 放大 并且在 node_modules 文件夹中，但随后他们告诉您需要 批量需求 ，它位于 bulkify 包的子 node_modules 文件夹中。当我尝试这样做时，Browserify 会出现 Cannot find module 'bulk-require'...类型错误。

在这一点上，我很困惑，因为我不知道为什么这两个安装方向都不起作用(也不知道它们是否会帮助我)。我应该在我的 Gulp 文件中使用它们吗？或者我可以在我的一个模块中使用它们，它会在 Browserify 期间被调用吗？

如果这有帮助，这是我的构建任务的片段:

// Report Builder
gulp.task('script-builder', function() {

    // Unminified
    // **********************************************************
    browserify({entries: './resources/assets/js/report/builder.js'})
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .bundle()
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(source('builder.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(buffer())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(gulp.dest('./public/js/debug'));

    // Minified
    // **********************************************************
    browserify({entries: './resources/assets/js/report/builder.js'})
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .bundle()
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(source('builder.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(buffer())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(ext_replace('.min.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(uglify())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(gulp.dest('./public/js/dist'));

});

我不知道我在这里做什么。我只需要硬编码我的require() 中的路径吗？打电话还是有更好的方法？

编辑

我可以清楚地看到bulk-require在 bulkify节点模块:



但是，当我尝试要求 bulk-require ，它窒息:

module.exports = function(type, driver, node) {

    var propertiesContainer = '#property-container';

    var bulk = require('bulk-require');
    var mods = bulk(__dirname, ['properties/**/*.js']);

}

Error: Cannot find module 'bulk-require' from '/path/to/my/project/resources/assets/js/report'

编辑 2

我能够使用 require-globify 完成这项工作包(https://github.com/capaj/require-globify)。在我的 javascript 中，我使用了:

var properties = require('./properties/*.js', {mode: 'hash', resolve: ['path-reduce', 'strip-ext']});

这返回了一个对象，其键作为文件名，没有扩展名或路径前缀。

在我的 gulpfile.js 中，我这样做了:

browserify({
    entries: './resources/assets/js/report/builder.js',
    transform: ['require-globify']
})
.on('error', function (err) { console.log(err); this.emit('end'); })
.bundle()
.on('error', function (err) { console.log(err); this.emit('end'); })
.pipe(source('builder.js'))
.on('error', function (err) { console.log(err); this.emit('end'); })
.pipe(buffer())
.on('error', function (err) { console.log(err); this.emit('end'); })
.pipe(gulp.dest('./public/js/debug'));

Answer 1

这是一个很容易实现的任务。使用 fs您可以一次动态地要求所有依赖项，只需访问您的 node_modules 文件夹。

var normalizedPath = require("path").join(__dirname, "node_modules/bulkify");
require("fs").readdirSync(normalizedPath).forEach(function(file) {
  require("./node_modules/bulkify" + file);
});

关于这个问题的更多答案可以找到here

编辑
为通用答案道歉我有点误解了关于动态要求文件进入 Browserify 的问题。

Require-globify似乎是解决您的问题的一种巧妙方法。

花点时间看看这个答案Compiling dynamically required modules with Browserify