级别的捆绑是否被非SPA使用处理？
我正在学习browserify，我正在尝试用它做两件基本的事情：
我发现了一个如何完成这些工作的流程，并通过Gulp将其自动化。 这工作，并产生正确的输出，但我很好奇，如果它可以变得更简单。 看来我必须在基于项目的捆绑包上复制大量的配置。 这是一个工作示例：
的package.json
无效评论添加澄清
{
//project info and dependencies omitted
//https://github.com/substack/node-browserify#browser-field
"browser": { //tell browserify about some of my libraries and where they reside
"jquery": "./bower_components/jquery/dist/jquery.js",
"bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.js"
},
"browserify": {
//https://github.com/substack/node-browserify#browserifytransform
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
//shim the modules defined above as needed
"jquery": {
"exports": "$"
},
"bootstrap": {
"depends": "jquery:$"
}
}
}
config.js
包含所有与任务管理器相关的配置设置
module.exports = {
browserify: {
// Enable source maps and leave un-ulgified
debug: true,
extensions: [],
//represents a separate bundle per item
bundleConfigs: [
{
//I really want to refer to the bundles here made in the package.json but
//if I do, the shim is never applied and the dependencies aren't included
entries: ['/bundles/shared-bundle.js'],
dest: '/dist/js',
outputName: 'shared.js'
}
]
},
//...
};
共享bundle.js
充当节点加载相关性的捆绑文件，并且此时已经应用垫片
require('bootstrap');
browserify-task.js
包含browserify bundling gulp任务
//module requires omitted
gulp.task('browserify', function (callback) {
var bundleQueue = config.bundleConfigs.length;
var browserifyBundle = function (bundleConfig) {
var bundler = browserify({
entries: bundleConfig.entries,
extensions: config.extensions,
debug: config.debug,
});
var bundle = function () {
return bundler.bundle()
// Use vinyl-source-stream to make the stream gulp compatible
.pipe(source(bundleConfig.outputName))
// Specify the output destination
.pipe(gulp.dest(bundleConfig.dest))
.on('end', reportFinished);
};
var reportFinished = function () {
if (bundleQueue) {
bundleQueue--;
if (bundleQueue === 0) {
// If queue is empty, tell gulp the task is complete
callback();
}
}
};
return bundle();
};
config.bundleConfigs.forEach(browserifyBundle);
});
在config.js中，第一个bundleConfig项的entries是具有require()模块的文件的源，我想用package.json browser键中定义的模块的模块名替换它们。
在config.js ，如果我将包配置更改为：
bundleConfigs: [
{
entries: ['bootstrap'],
dest: '/dist/js',
outputName: 'shared.js'
}
]
并运行gulp任务，它将包含bootstrap.js，但它不运行填充转换。 jQuery并没有被包含在内。
这给我留下了几个问题：
当然，你只需告诉你的大嘴文件，它应该先填充。 看起来您可以在从您的gulp文件中调用browserify时添加您自己的shim对象。 看看这个例子
如果您希望确保在捆绑它们之前所有内容都已被刷新，请使用deps数组：“要在任务运行之前执行并完成的一组任务。”
它看起来像这样：
gulp.task('shim', function() {
// ...
});
gulp.task('browserify', ['shim'], function(){
// ...
});