Browserify需要目錄中的所有文件

Question

我是Browserify（以及一般的Javascript構建系統）的新手，並且已經達到了我徹底困惑的程度。

我有Gulp設置來做我的構建，它一直工作正常，最近我一直在使用Browserify捆綁 - 主要是因此我可以將我的代碼分成單獨的文件並且require()它們需要的地方。

我的問題是，我有一個文件夾，其中有一些我需要在另一個模塊中需要的小模塊，我試圖避免硬編碼所有這些模塊的名稱。 有沒有辦法要求所有文件？

我嘗試過使用Bulkify和Folderify但無法讓它們工作。 例如，使用Bulkify，安裝的軟件包稱為bulkify ，位於node_modules文件夾中，但隨后它們會告訴您需要bulk-require ，它位於bulkify軟件包的sub node_modules文件夾中。 當我嘗試這樣做時，Browserify會Cannot find module 'bulk-require'...一個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()在require()調用中對路徑進行硬編碼，還是有更好的方法？

---

編輯

我可以清楚地看到bulkify節點模塊中的bulk-require ：

但是，當我嘗試要求bulk-require ，它會窒息：

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

    var propertiesContainer = '#property-container';

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

}

錯誤：無法從'/ path /到/ my / project / resources / assets / js / report'找到模塊'bulk-require'

---

編輯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);
});

關於這個問題的更多答案可以在這里找到

編輯道歉的通用答案我有點誤解了關於動態要求文件到Browserify的問題。

Require-globify似乎是一個很好的解決方案。

花一點時間來看看這個答案以及使用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();