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

Browserify Require All Files in Directory

提问by Jeremy Harris

I'm new to Browserify (and Javascript build systems in general) and have reached a point where I am thoroughly confused.

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

I have Gulp setup to do my builds, which has always worked fine, and lately I've been using Browserify to bundle -- mostly so I can separate my code into separate files and require()them where they need to be.

我有 Gulp 设置来做我的构建，它一直工作得很好，最近我一直在使用 Browserify 来捆绑 - 主要是为了我可以将我的代码分成单独的文件，require()并将它们放在需要的地方。

My issue is, I have a folder with a bunch of small modules I need to require within another module, and I am trying to avoid hard coding the names of all of them. Is there a way to do a require of all of the files?

我的问题是，我有一个文件夹，里面有一堆我需要在另一个模块中使用的小模块，我试图避免对所有这些模块的名称进行硬编码。有没有办法对所有文件进行要求？

I've tried using Bulkifyand Folderifybut cannot get them to work. For example, with Bulkify, the package installed is called bulkifyand is in the node_modules folder, but then they tell you to require bulk-require, which is in a sub node_modules folder of the bulkify package. When I try that, Browserify chokes with a Cannot find module 'bulk-require'...type error.

我试过使用Bulkify和Folderify，但无法让它们工作。例如，对于 Bulkify，安装的包称为bulkify并且位于 node_modules 文件夹中，但随后他们告诉您需要bulk-require，它位于 bulkify 包的子 node_modules 文件夹中。当我尝试这样做时，Browserify 因Cannot find module 'bulk-require'...类型错误而窒息。

At this point I am confused because I have no idea why the installation directions of both of those do not work (nor whether they will even help me). Am I supposed to be using them in my Gulp file? Or can I use them in one of my modules and it will get called during the Browserify?

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

Here is a snippet of my build task for this if this helps:

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

// 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'));

});

I have no idea what I am doing here. Am I just going to have to hardcode the paths in my require()calls or is there a better way?

我不知道我在这里做什么。我是否只需要对require()调用中的路径进行硬编码，还是有更好的方法？

---

---

EDIT

编辑

I can clearly see bulk-requirein the bulkifynode module:

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

But, when I try to require bulk-require, it chokes:

但是，当我尝试 require 时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'

错误：无法从“/path/to/my/project/resources/assets/js/report”中找到模块“bulk-require”

---

---

EDIT 2

编辑 2

I was able to make this work using the require-globifypackage (https://github.com/capaj/require-globify). In my javascript, I used:

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

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

That returned an object with keys as the filename without extension or the path prefix.

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

In my gulpfile.js, I did this:

在我的 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'));

采纳答案by vorillaz

That's a pretty easy task to achieve. Using fsyou may dynamically require all the dependencies at once simply accessing your node_modules folder.

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

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

More answers on this question can be found here

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

EDITApologies for the generic answer I kinda misunderstood the question about dynamically requiring files into Browserify.

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

Require-globifyseems a neat approach for your problem.

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

Take a moment to have a look at this answer as well Compiling dynamically required modules with Browserify

花点时间看看这个答案以及使用 Browserify 编译动态需要的模块

回答by JMM

I haven't used it, but I think bulkifywill do what you want.

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

Am I supposed to be using them in my Gulp file? Or can I use them in one of my modules and it will get called during the Browserify?

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

Yes and yes.

是的，是的。

I think the gist of it is something like this:

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

gulpfile.js

gulpfile.js

var bulkify = require('bulkify');

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

another-module.js(bundled module)

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();