Как требовать зависимости Bootstrap 4 (jQuery & Popper.js) с помощью Browserify / Gulp - PullRequest
Новая
       18

Как требовать зависимости Bootstrap 4 (jQuery & Popper.js) с помощью Browserify / Gulp

0 голосов
/ 25 апреля 2018

Я пытаюсь создать шаблон для моих проектов начальной загрузки 4 и хочу использовать Browserify для добавления Bootstrap 4 и его зависимостей (jQuery & Popper.js) в мой файл сценария, однако я не совсем уверен, как использовать библиотеки.

Я установил все 3 на узлы-модули с помощью NPM и добавил их в раздел dev-зависимостей 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? Это должен быть общий случай использования.

Заранее спасибо.

1 Ответ

0 голосов
/ 02 мая 2018

Вы можете использовать фрагмент ниже, чтобы связать ваши файлы .js с gulp и 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"
}

Я использую кросс-env, для кроссплатформенной работы

В вашем файле .js вы можете импортировать: 

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

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

Предполагается, что эти проекты установлены в npm или пряжа .

...