Javascript 如何将库中的js文件绑定到main app.js

现在，只有我的app.js和我在其中使用的文件被捆绑。我希望libs中的文件也被捆绑到同一个js文件中。以下是我的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文件？

您应该能够多次调用b.requirepath。我就是这样做的 比如：

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'])

---

这还允许您公开futur所需的库

您可以使用gulp inject或gulp wiredep来处理应用程序中的所有js文件，然后使用concat或uglify来联系/缩小它们

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'])