Question

现在，只有我的app.js和我在其中使用的文件被捆绑在一起。我希望我的libs中的文件也可以捆绑到同一个js文件中。这是我的 js 文件夹中的文件夹结构：

.
├── app.js
├── components
└── libs
    └── materialize.min.js

这是我的gulpfile，我将它们捆绑在一起：

import gulp from 'gulp'
import source from 'vinyl-source-stream'
import buffer from 'vinyl-buffer'
import browserify from 'browserify'
import babelify from 'babelify'
import uglify from 'gulp-uglify'
import watchify from 'watchify'

const jsDirs = {
  src: './client/js/app.js',
  dest: './dist/js'
}

function buildBundle(b) {
  b.bundle()
  .pipe(source('bundle.js'))
  .pipe(gulp.dest(jsDirs.dest))
}

gulp.task('scripts', () => {
  let b = browserify({
    cache: {},
    packageCache: {},
    fullPaths: true
  })
  b = watchify(b.transform(babelify))
  b.on('update', () => buildBundle(b))
  b.add(jsDirs.src)
  buildBundle(b)
})

gulp.task('default', ['scripts'])

有没有办法包含app.js未使用的我的libs js文件？

Answer 1

您应该可以多次拨打b.require(path)。（这就是我为我做的方式）类似的东西：

import gulp from 'gulp'
import source from 'vinyl-source-stream'
import buffer from 'vinyl-buffer'
import browserify from 'browserify'
import babelify from 'babelify'
import uglify from 'gulp-uglify'
import watchify from 'watchify'

const jsDirs = {
  src: './client/js/app.js',
  dest: './dist/js',
  requires: [
      './libs/materialize.min.js',
      ['./libs/whatever.js', 'whatever']
  ]
}

function buildBundle(b) {
  b.bundle()
  .pipe(source('bundle.js'))
  .pipe(gulp.dest(jsDirs.dest))
}

gulp.task('scripts', () => {
  let b = browserify({
    cache: {},
    packageCache: {},
    fullPaths: true
  });
  b = watchify(b.transform(babelify))
  [].concat(jsDirs.requires || []).forEach(function (req) {
        var path = req,
            expose = null;
        if (typeof path !== 'string') {
            expose = path[1];
            path = path[0]
        }
        b.require(path, expose ? { expose: expose } : {});
  });

  b.on('update', () => buildBundle(b))
  b.add(jsDirs.src)
  buildBundle(b)
})

gulp.task('default', ['scripts'])

这也让你暴露了未来的lib需要

如何在我的lib中使用主app.js捆绑js文件

1 个答案: