Browserify需要目录中的所有文件

我是Browserify(和一般的Javascript构建系统)的新手,并且已经达到了让我感到困惑的地步。

我有Gulp安装程序来执行我的构建,这一直运行良好,最近我一直在使用Browserify进行捆绑 - 最主要的是我可以将我的代码分离为单独的文件,并且require()它们放在需要的地方。

我的问题是,我有一个文件夹,需要在另一个模块中需要一些小模块,我试图避免硬编码所有模块的名称。 有没有办法做到所有文件的要求?

我试过使用Bulkify和Folderify,但无法让他们工作。 例如,对于Bulkify,安装的软件包称为bulkify ,位于node_modules文件夹中,但它们会告诉您需要bulk-require ,该软件位于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()在我的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 / to / 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'));

这是一个非常容易实现的任务。 使用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的问题。

对于你的问题,要求globiz似乎是一个很好的方法。

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


我没有使用它,但我认为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();
链接地址: http://www.djcxy.com/p/32911.html

上一篇: Browserify Require All Files in Directory

下一篇: Gulp + browserify + 6to5 + source maps