我有一个图书馆lib.js
,我想从创建lib/a.js
和lib/b.js
并能够从脚本中使用它client.js
用var a = require('lib/a.js');
,它的作品时,我只是包括编译lib.js
库之前client.js
(因此,lib.js
必须声明require
,它知道函数lib/a.js
)
我想我必须使用external
,alias
但我不确定这是什么方法
此外,是否可以使用Gulp文件自动为我的库中的文件夹创建所有别名?例如.为lib/
dir 中的所有文件创建别名?
以下是一些有助于分别构建常见lib.js和client.js包的gulp任务.
请注意,在捆绑lib.js时,你必须告诉bn以下b.require()lib/*.js,你必须告诉它b.external()捆绑client.js时将单独加载的库.
var path = require('path'); var gulp = require('gulp'); var browserify = require('browserify'); var concat = require('gulp-concat'); var transform = require('vinyl-transform'); gulp.task('build-lib', function () { // use `vinyl-transform` to wrap around the regular ReadableStream returned by b.bundle(); // so that we can use it down a vinyl pipeline as a vinyl file object. // `vinyl-transform` takes care of creating both streaming and buffered vinyl file objects. var browserified = transform(function(filename) { // basename, for eg: 'a.js' var basename = path.basename(filename); // define the exposed name that your client.js would use to require(); // for eg: require('lib/a.js'); // -> exposed name should be 'lib/a.js' var expose = 'lib/' + basename; return browserify(filename) .require(filename, { expose: expose}) .bundle(); }); return gulp.src(['./lib/*.js']) .pipe(browserified) .pipe(concat('lib.js')) .pipe(gulp.dest('./dist')); }); gulp.task('build-client', function () { var browserified = transform(function(filename) { // filename = './client.js' // let browserify know that lib/a.js and and lib/b.js are external files // and will be loaded externally (in your case, by loading the bundled lib.js // for eg: <script src='dist/lib.js'>) return browserify(filename) .external('lib/a.js') .external('lib/b.js') .bundle(); }); return gulp.src(['./client.js']) .pipe(browserified) .pipe(gulp.dest('./dist')); }); gulp.task('default', ['build-lib', 'build-client']);