Браузер с помощью twitter bootstrap

Ответ 1

Вам не нужно будет прокручивать jquery таким образом, если вы установили его с npm. Следующие работы для проекта, который я писал:

Я также узнал, что использование npm для бутстрапа - это своего рода PITA. Я использую bower для установки и поддержки некоторых интерфейсных компонентов, когда их нужно подстроить таким образом.

package.json:

{
  "name": "...",
  "version": "0.0.1",
  "description": "...",
  "repository": {
    "type": "git",
    "url": "..."
  },
  "browser": {
    "d3js": "./bower_components/d3/d3.min.js",
    "select2": "./bower_components/select2/select2.min.js",
    "nvd3js": "./bower_components/nvd3/nv.d3.min.js",
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim",
      "hbsfy"
    ]
  },
  "browserify-shim": {
    "d3js": {
      "exports": "d3",
      "depends": [
        "jquery:$"
      ]
    },
    "bootstrap": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "select2": {
      "exports": null,
      "depends": [
        "jquery:$"
      ]
    },
    "nvd3js": {
      "exports": "nv",
      "depends": [
        "jquery:$",
        "d3js:d3"
      ]
    }
  },
  "devDependencies": {
    "browserify-shim": "~3.4.1",
    "browserify": "~3.36.0",
    "coffeeify": "~0.6.0",
    "connect": "~2.14.3",
    "gulp-changed": "~0.3.0",
    "gulp-imagemin": "~0.1.5",
    "gulp-notify": "~1.2.4",
    "gulp-open": "~0.2.8",
    "gulp": "~3.6.0",
    "hbsfy": "~1.3.2",
    "vinyl-source-stream": "~0.1.1",
    "gulp-less": "~1.2.3",
    "bower": "~1.3.3",
    "cssify": "~0.5.1",
    "gulp-awspublish": "0.0.16",
    "gulp-util": "~2.2.14",
    "gulp-rename": "~1.2.0",
    "gulp-s3": "git+ssh://[email protected]/nkostelnik/gulp-s3.git",
    "gulp-clean": "~0.2.4",
    "process": "~0.7.0"
  },
  "dependencies": {
    "backbone": "~1.1.2",
    "jquery": "~2.1.0",
    "lodash": "~2.4.1",
    "d3": "~3.4.8",
    "rickshaw": "~1.4.6",
    "datejs": "~1.0.0-beta",
    "moment": "~2.7.0"
  }
}

JS:

$ = jQuery = require('jquery');
var _ = require('lodash');
var Rickshaw = require('rickshaw');
var d3 = require('d3js');
var nvd3 = require('nvd3js');
var moment = require('moment');
require('datejs');
require('select2');

var bootstrap = require('bootstrap');
console.log(bootstrap)

Кроме того, иногда полезно использовать прокрутку браузера, чтобы выполнить диагностику. Вот как выглядит моя задача browserify.js:

var browserify   = require('browserify');
var gulp         = require('gulp');
var handleErrors = require('../util/handleErrors');
var source       = require('vinyl-source-stream');
var process      = require('process');

process.env.BROWSERIFYSHIM_DIAGNOSTICS=1;

var hbsfy = require('hbsfy').configure({
  extensions: ['html']
});

gulp.task('browserify', ['images', 'less'], function(){
    return browserify({
      transform: ['hbsfy', 'cssify'],
            entries: ['./src/javascript/app.js'],
        })
        .bundle({debug: true})
        .on('error', handleErrors)
        .pipe(source('app.js'))
        .pipe(gulp.dest('./build/'));
});

Ответ 2

Ошибка при использовании браузера, для которой требуется определить переменную '$' или 'jQuery'.

добавление окна, чтобы сделать его глобальным, устранить ошибку. Не уверен, что это будет правильный способ, если нет, дайте мне знать.

window.$ = window.jQuery = require('jquery');
var bootstrapjs = require('bootstrap-sass');

Ответ 3

Мне было интересно об этом некоторое время. Это простое решение делает для меня работу:

import foo from 'foo';
import bar from './bar';
import { default as $ } from "jquery";
global.$ = $;
global.jQuery = $; // This one does the trick for bootstrap!
// Boostrap jQuery dependency only works with require, not with ES6 import!
const btp = require('bootstrap');

Ответ 4

Чтобы сделать Bootstrap для работы с Browserify, вам понадобится один из Browserify CSS transforms.

Сначала запись index.js(Browserify)

// Bootstrap needs jQuery on the Window
window.jQuery = $  = require('jquery');
// include popper.js if you want Bootstrap tooltips
window.Popper = require('popper.js');
// include bootstrap js libs (not the CSS libs as yet)
require('bootstrap');
// then the CSS Lib
require('bootstrap/dist/css/bootstrap.css');

NPM Installs:

npm install [email protected].0.0-alpha.6 jquery popper.js

Использовать всплывающие подсказки по всему миру:

В бутстрапе docs.

$('[data-toggle="popover"]').popover();

У меня есть Browserify-Budo repo здесь. Если вы хотите, чтобы он работал.