問題描述

我有一個庫 lib.js 我想從 lib/a.js 和 lib/b.js 創(chuàng)建并能夠使用 var a = require('lib/a.js'); 從腳本 client.js 使用它，并且當我只包含已編譯的lib.js 庫在 client.js 之前(因此，lib.js 必須聲明一個知道的 require 函數(shù)關(guān)于 lib/a.js)

I have a library lib.js that I want to create from lib/a.js and lib/b.js and to be able to use it from a script client.js using var a = require('lib/a.js'); and that it works when I just include the compiled lib.js library before client.js (therefore, lib.js has to declare a require function that knows about lib/a.js)

我想我必須使用 external 和 alias 但我不確定什么是正確的方法

I guess I have to use external and alias but I am not sure what is the proper way to do it

另外，是否有可能有一個 Gulp 文件為我的庫中的文件夾自動創(chuàng)建所有別名?例如.為 lib/ 目錄中的所有文件創(chuàng)建別名?

Also, is it possible to have a Gulp file that creates all the alias automatically for the folders in my library? eg. creates an alias for all the files in the lib/ dir?

推薦答案

這里有幾個 gulp 任務(wù)可以幫助你分別構(gòu)建通用的 lib.js 和 client.js 包.

Here are a couple of gulp tasks that would help to build your common lib.js and the client.js bundles separately.

請注意，捆綁 lib.js 時必須將 browserify 告知 b.require() lib/*.js，并且必須告知 b.external() 捆綁客戶端時將單獨加載的庫.js

Note that you have to tell browserify to b.require() lib/*.js when bundling lib.js, and you have to tell it to b.external() the libraries that will be loaded separately when bundling 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']);

這篇關(guān)于使用 Gulp 使 browserify 模塊外部化的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！