web-dev-qa-db-ja.com

Bootstrap 3.0をBrowserifyで使用する

Bootstrap 3.0をBrowserify 5.9.1で使用しようとしていますが、次のエラーが発生します：

Uncaught ReferenceError: jQuery is not defined

これを行う正しい方法は何ですか？

これが私のpackage.jsonの関連部分です：

{
  ...
  "scripts": {
    "bundle": "browserify main.js -o bundle.js --debug --list"
  },
  "dependencies": {
    "backbone": "~1.1.x",
    "jquery": "~2.1.x",
    "underscore": "~1.6.x"
  },
  "devDependencies": {
    "browserify": "^5.9.1",
    ...
  },
  ...
}

bootstrapを必要とするモジュールを以下に示します：

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');

ここで私が気に入らない2つの点は次のとおりです。

  1. ブートストラップはBowerを使用してダウンロードされます。私の知る限り、npmを使用してそれを取得する方法はありません。これにより、パスが非常に長くなり、扱いにくくなります。 Bootstrap npmをフレンドリーにする方法はありますか？
  2. ブートストラップはこのモジュールの直接の依存関係ではなく、一種のjQueryプラグインです。ロードされると、Bootstarpのウィジェットからのイベントを処理するために、ドキュメント上にいくつかのイベントハンドラーを作成するだけです。これらのイベントハンドラーが作成されるように、私は要求する必要があります。これは正しい方法ですか？

もちろん、このすべての後でも、「jQueryが定義されていません」というエラーが表示されます。これを機能させるために髪を引っ張っています。助けてください！

追伸以前、私は写真にgrunt-browserifyプラグインを入れていましたが、ソースマップ機能のないbrowserifyバージョン4.xを使用していることにすぐに気付きました。これによりデバッグがさらに困難になったので、すぐにそれを図から取り出し、npmから直接browserifyを実行しました。

twitter-bootstrapbrowserify
22
Naresh

これは、browserifyでbootstrapを使用している場合に機能します。

window.$ = window.jQuery = require('jquery')
var Backbone = require('backbone');
Backbone.$ = $;
require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');
33
Ian Lim

私は同じ問題に遭遇しました：BootstrapはNPMで利用可能ですが、共通のJSモジュールとして公開されていません。私が解決したアプローチは次のとおりでした：

  1. window.$とwindow.jQueryを一時的に設定
  2. Bootstrap.jsを要求してロードする
  3. window.$とwindow.jQueryの値を元に戻す

以下のコードをbootstrapHack.jsというモジュールに配置し、他のものが実行される前にアプリのルートでそれを要求しました。

var jQuery = require('jquery');
window.$ = window.jQuery = jQuery;

require('bootstrap');

jQuery.noConflict(true);

または、1つまたは2つのBootstrapコンポーネントでのみ作業している場合は、個別にそれらを要求し、ファイルサイズを削減することができます。この場合は、モーダルとツールチップのみです。

var jQuery = require('jquery');
window.$ = window.jQuery = jQuery;

require('bootstrap/js/tooltip');
require('bootstrap/js/modal');

jQuery.noConflict(true);
11
Joe B

よりクリーンなアプローチは atomify プラグインを使用することです。これは、jQuery、_bootstrap.js_、_bootstrap.css_をすべてnpmモジュールから解決するのに役立ちます。

_var gulp = require('gulp');
var atomify = require('atomify');

gulp.task('default', function () {
  atomify.css('less/main.less', 'dist/bundle.css');
  atomify.js('js/index.js', 'dist/bundle.js');
});
_

_@import_ bootstrap in your less/css file、

_@import 'bootstrap';
@import './other.less';

@dark : #999;

body {
  background-color : @dark;
}
_

だけでなく、あなたのjsファイルのrequire() bootstrap

_var $ = jQuery = require('jQuery')
require('bootstrap');
var other = require('./other')

console.log(typeof $().modal);
console.log(other());

module.exports = function() {
  console.log('Executed function xyz');
}
_

this Github repoの完全な例。

3
anoopelias