Gulp + Browserify 捆绑依赖
Gulp + Browserify bundling dependency
在 libs/index.jsx
所有库都使用 require 调用
前任。 require('jquery')...
并生成一个包含 jquery 的包
在 app/index.jsx
我在 app.js 上调用了同样的东西,但整个 jquery 代码仍在添加
到 app.js
上的捆绑包
任何人都可以帮助我如何将我的 app.js
依赖于 libs.js
输出文件?这是我的代码:
'use strict';
var gulp = require('gulp');
var notify = require('gulp-notify');
var rename = require('gulp-rename');
var browserify = require('browserify');
var babelify = require('babelify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var es = require('event-stream');
gulp.task('default', function() {
// we define our input files, which we want to have bundled:
var files = [
'build/js/app/index.jsx',
'build/js/libs/index.jsx'
];
var outputFiles = [
'app.js',
'libs.js'
];
// map them to our stream function
var tasks = files.map(function(entry, index) {
// browserify instance
var bundler = browserify({
entries: [entry]
});
// Watchify to watch source file changes
bundler.plugin(watchify, {
// ignore this folders
ignoreWatch: [
'**/node_modules/**',
'**/bower_components/**'
]
});
// Babel tranforms, transform .jsx files to native js
bundler.transform(babelify, {
presets: ['es2015', 'react']
});
// bundle the files
bundler.bundle()
.pipe(source(outputFiles[index]))
// rename them to have "bundle as postfix"
.pipe(rename({
extname: '.bundle.js'
}))
.pipe(gulp.dest('dist/js'))
.pipe(notify({
message: 'Generated file: ',
}));
return bundler;
});
});
在 dist/js 文件夹中创建的输出文件是 libs.bundle.js
和 app.bundle.js
。我想要两个独立的文件,一个依赖于另一个,即 app.bundle.js。有谁能帮帮我吗?
使用factor-bundle. Take a look at this answer
在 libs/index.jsx
所有库都使用 require 调用
前任。 require('jquery')...
并生成一个包含 jquery 的包
在 app/index.jsx
我在 app.js 上调用了同样的东西,但整个 jquery 代码仍在添加
到 app.js
任何人都可以帮助我如何将我的 app.js
依赖于 libs.js
输出文件?这是我的代码:
'use strict'; var gulp = require('gulp'); var notify = require('gulp-notify'); var rename = require('gulp-rename'); var browserify = require('browserify'); var babelify = require('babelify'); var watchify = require('watchify'); var source = require('vinyl-source-stream'); var es = require('event-stream'); gulp.task('default', function() { // we define our input files, which we want to have bundled: var files = [ 'build/js/app/index.jsx', 'build/js/libs/index.jsx' ]; var outputFiles = [ 'app.js', 'libs.js' ]; // map them to our stream function var tasks = files.map(function(entry, index) { // browserify instance var bundler = browserify({ entries: [entry] }); // Watchify to watch source file changes bundler.plugin(watchify, { // ignore this folders ignoreWatch: [ '**/node_modules/**', '**/bower_components/**' ] }); // Babel tranforms, transform .jsx files to native js bundler.transform(babelify, { presets: ['es2015', 'react'] }); // bundle the files bundler.bundle() .pipe(source(outputFiles[index])) // rename them to have "bundle as postfix" .pipe(rename({ extname: '.bundle.js' })) .pipe(gulp.dest('dist/js')) .pipe(notify({ message: 'Generated file: ', })); return bundler; }); });
在 dist/js 文件夹中创建的输出文件是 libs.bundle.js
和 app.bundle.js
。我想要两个独立的文件,一个依赖于另一个,即 app.bundle.js。有谁能帮帮我吗?
使用factor-bundle. Take a look at this answer