如何使用 Browserify / Gulp 要求 Bootstrap 4 个依赖项（jQuery & Popper.js）

Question

我正在尝试为我的 bootstrap 4 个项目创建一个样板，并且我想使用 Browserify 添加 Bootstrap 4 及其依赖项（jQuery & Popper.js ) 到我的脚本文件，但是我不完全确定如何引入库。

我已经使用 NPM 将所有 3 个安装到节点模块并将它们添加到 package.json 的开发依赖项部分：

    "bootstrap": "^4.0.0",
    "gulp": "^3.9.1",
    "gulp-browserify": "^0.5.1",
    "gulp-concat": "^2.6.1",
    "gulp-util": "^3.0.8",
    "jquery": "^1.9.1",
    "popper.js": "^1.14.2"

我还设置了一个 gulp 文件，在当前迭代中，它合并了我的脚本文件并调用 gulp-broswserify:

// calls in required plugins
const GULP = require("gulp"),
      GUTIL = require("gulp-util"),
      CONCAT = require("gulp-concat")
      BROWSERIFY = require("gulp-browserify");

// pulls in component files to use in gulp functions
const JS_SOURCES = "components/scripts/*.js";

// concatinates js components into one file
GULP.task("js", function(){
  GULP.src(JS_SOURCES)
    .pipe(CONCAT("script.js"))
    .pipe(BROWSERIFY())
    .pipe(GULP.dest("builds/development/js"))
});

在我的第一个脚本文件中，我添加了以下代码，我希望将 Bootstrap、jQuery 和 Popper 添加到我的脚本中：

// imports bootstrap and dependencies
$ = require('jquery');
var popper = require('popper.js');
var bootstrap = require('bootstrap');

然而，当我在终端中运行 gulp js 任务时，出现此错误：

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: module "jquery" not found from "/Users/user/Desktop/code/bootstrap-4-boilerplate/components/scripts/fake_e1b7cd70.js"
    at notFound (/Users/user/Desktop/code/bootstrap-4-boilerplate/node_modules/browserify/index.js:803:15)
    at /Users/user/Desktop/code/bootstrap-4-boilerplate/node_modules/browserify/index.js:754:23
    at /Users/user/Desktop/code/bootstrap-4-boilerplate/node_modules/browser-resolve/index.js:185:24
    at /Users/user/Desktop/code/bootstrap-4-boilerplate/node_modules/browser-resolve/node_modules/resolve/lib/async.js:44:14
    at process (/Users/user/Desktop/code/bootstrap-4-boilerplate/node_modules/browser-resolve/node_modules/resolve/lib/async.js:113:43)
    at /Users/user/Desktop/code/bootstrap-4-boilerplate/node_modules/browser-resolve/node_modules/resolve/lib/async.js:122:21
    at load (/Users/user/Desktop/code/bootstrap-4-boilerplate/node_modules/browser-resolve/node_modules/resolve/lib/async.js:54:43)
    at /Users/user/Desktop/code/bootstrap-4-boilerplate/node_modules/browser-resolve/node_modules/resolve/lib/async.js:60:22
    at /Users/user/Desktop/code/bootstrap-4-boilerplate/node_modules/browser-resolve/node_modules/resolve/lib/async.js:16:47
    at FSReqWrap.oncomplete (fs.js:123:15)

任何人都可以告诉我我哪里出错了/告诉我有人使用 Gulp & Browserify 加载 Bootsrap 4 的例子吗？它必须是一个常见的用例。

提前致谢。

Answer 1

您可以使用下面的代码片段，将您的 .js 文件与 gulp and browserify 捆绑在一起。

import gulp from 'gulp'
import gulpLoadPlugins from 'gulp-load-plugins'
import browserify from 'browserify'
import source from 'vinyl-source-stream'
import buffer from 'vinyl-buffer'
import log from 'gulplog'
import babelify from 'babelify'

const $ = gulpLoadPlugins()

const src = `${__dirname}/app`
const dist = `${__dirname}/dist`

function bundle () {
  // Input file.
  const bundler = browserify(`${src}/scripts/main.js`, {
    debug: true
  })

  // Babel transform
  bundler.transform(babelify)

  return bundler.bundle()
    .on('error', log.error)
    .pipe(source('main.bundle.min.js'))
    .pipe(buffer())
    .pipe($.sourcemaps.init({ loadMaps: true }))
    .pipe($.if(process.env.NODE_ENV === 'production', $.uglify()))
    .pipe($.size({ title: 'scripts' }))
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest(`${dist}/scripts`))
    .pipe(gulp.dest(`.tmp/scripts`))
}

gulp.task('lint', () => {
  return gulp.src([
    `${src}/scripts/**/*.js/`
  ])
    .pipe($.eslint())
    .pipe($.eslint.results(results => {
      // Called once for all ESLint results.
      console.log(`Total Results: ${results.length}`)
      console.log(`Total Warnings: ${results.warningCount}`)
      console.log(`Total Errors: ${results.errorCount}`)
    }))
    .pipe($.eslint.format())
    // To have the process exit with an error code (1) on
    // lint error, return the stream and pipe to failAfterError last.
    // .pipe($.eslint.failAfterError())
})

gulp.task('scripts', ['lint'], () => bundle())

对于运行 gulp 任务使用环境变量，您可以将该脚本放在 package.json

"scripts": {
    "dev": "cross-env NODE_ENV=development gulp scripts",
    "prod": "cross-env NODE_ENV=production gulp scripts"
}

我正在使用 cross-env，用于跨平台工作

在您的 .js 文件中，您可以导入这些文件：

import $ from 'jquery'
import 'popper.js'
import 'bootstrap'

// For some plugins and global use.
window.jQuery = window.$ = $

假设您在 npm or yarn.

下安装了这些项目

如何使用 Browserify / Gulp 要求 Bootstrap 4 个依赖项（jQuery & Popper.js）

How to require Bootstrap 4 dependencies (jQuery & Popper.js) using Browserify / Gulp

twitter-bootstrap

browserify

gulp

bootstrap-4