Jer*_*ris 19 javascript npm browserify gulp
我是Browserify(以及一般的Javascript构建系统)的新手,并且已经达到了我彻底困惑的程度.
我有Gulp设置来做我的构建,它一直工作正常,最近我一直在使用Browserify捆绑 - 主要是因为我可以将我的代码分成单独的文件和require()他们需要的地方.
我的问题是,我有一个文件夹,其中有一些我需要在另一个模块中需要的小模块,我试图避免硬编码所有这些模块的名称.有没有办法要求所有文件?
我尝试过使用Bulkify和Folderify但无法让它们工作.例如,使用Bulkify,安装的软件包称为bulkify,位于node_modules文件夹中,但随后它们会告诉您需要bulk-require,它位于bulkify软件包的sub 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'));
});
Run Code Online (Sandbox Code Playgroud)
我不知道我在这做什么.我只是要对我的require()电话中的路径进行硬编码还是有更好的方法?
编辑
我可以bulk-require在bulkify节点模块中清楚地看到:

但是,当我试图要求时bulk-require,它会窒息:
module.exports = function(type, driver, node) {
var propertiesContainer = '#property-container';
var bulk = require('bulk-require');
var mods = bulk(__dirname, ['properties/**/*.js']);
}
Run Code Online (Sandbox Code Playgroud)
错误:无法从'/ 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']});
Run Code Online (Sandbox Code Playgroud)
返回一个对象,其中键作为没有扩展名的文件名或路径前缀.
在我的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'));
Run Code Online (Sandbox Code Playgroud)
这是一项非常容易实现的任务.使用fs,您可以一次性动态地需要所有依赖项,只需访问node_modules文件夹即可.
var normalizedPath = require("path").join(__dirname, "node_modules/bulkify");
require("fs").readdirSync(normalizedPath).forEach(function(file) {
require("./node_modules/bulkify" + file);
});
Run Code Online (Sandbox Code Playgroud)
关于这个问题的更多答案可以在这里找到
编辑 道歉的通用答案我有点误解了关于动态要求文件到Browserify的问题.
Require-globify似乎是一个很好的解决方案.
花点时间看看这个答案以及使用Browserify编译动态所需的模块
| 归档时间: |
|
| 查看次数: |
12656 次 |
| 最近记录: |