Browserify 需要目录中的所有文件
Browserify Require All Files in Directory
我是 Browserify 的新手(Javascript 一般构建系统),我已经到了完全困惑的地步。
我有 Gulp 设置来进行我的构建,它一直运行良好,最近我一直在使用 Browserify 进行捆绑——主要是为了我可以将我的代码分成单独的文件和 require()
他们需要去的地方。
我的问题是,我有一个文件夹,里面有一堆我需要在另一个模块中需要的小模块,我试图避免对所有这些模块的名称进行硬编码。有没有办法要求所有文件?
我试过使用 Bulkify and 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()
调用中对路径进行硬编码,还是有更好的方法?
编辑
我可以在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']);
}
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'));
这是一项非常容易完成的任务。使用 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
我没用过,但我想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?
是的,是的。
我认为它的要点是这样的:
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 的新手(Javascript 一般构建系统),我已经到了完全困惑的地步。
我有 Gulp 设置来进行我的构建,它一直运行良好,最近我一直在使用 Browserify 进行捆绑——主要是为了我可以将我的代码分成单独的文件和 require()
他们需要去的地方。
我的问题是,我有一个文件夹,里面有一堆我需要在另一个模块中需要的小模块,我试图避免对所有这些模块的名称进行硬编码。有没有办法要求所有文件?
我试过使用 Bulkify and 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()
调用中对路径进行硬编码,还是有更好的方法?
编辑
我可以在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']);
}
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'));
这是一项非常容易完成的任务。使用 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
我没用过,但我想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?
是的,是的。
我认为它的要点是这样的:
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();