Question

我正在尝试为我的bootstrap 4项目创建一个样板。我想使用Browserify将Bootstrap 4和它的依赖项（jQuery＆amp; Popper.js）添加到我的脚本文件中，但我不完全确定如何引入库。

我已经使用NPM＆amp; amp;将所有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和amp;波普尔到我的剧本：

// 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＆amp; Browserify加载Bootsrap 4？它必须是一个常见的用例。

提前致谢。

Answer 1

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

＆＃13;

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())

＆＃13;

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

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

我正在使用跨环境，用于跨平台工作

在.js文件中，您可以进行以下导入：

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

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

假设您已在 npm 或 yarn

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

1 个答案: