Question

我是Browserify的新手（以及一般的Javascript构建系统），并且已经达到了我彻底困惑的程度。

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

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

我已尝试使用Bulkify和Folderify，但无法让它们发挥作用。例如，使用Bulkify，安装的软件包称为 bulkify ，位于node_modules文件夹中，但随后它们会告诉您需要 bulk-require ，它位于子node_modules中bulkify包的文件夹。当我尝试这样做时，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：

enter image description here

但是，当我尝试要求bulk-require时，它会窒息：

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

    var propertiesContainer = '#property-container';

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

}

错误：无法找到模块＆＃39;批量要求＆＃39;从＆＃39; / path /到/ my / project / resources / assets / js / report＆＃39;

编辑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

Answer 2

我没有使用它，但我认为bulkify会做你想要的。

我应该在我的Gulp文件中使用它们吗？或者我可以在我的一个模块中使用它们，它会在Browserify期间被调用吗？

是的，是的。

我认为它的要点是这样的：

gulpfile.js

var bulkify = require('bulkify');

browserify(...)
  .transform(bulkify)
  // ...

another-module.js（捆绑模块）

var bulk = require('bulk-require');
var a_bunch_of_small_modules = bulk(__dirname, ['somdir/**/*.js']);
a_bunch_of_small_modules.somedir.whatever();

Browserify需要目录中的所有文件

2 个答案: