スタックオーバーフローに関する回答を含む同様の質問が多数ありますが、それらのどれも私には役に立たないので、ここで皆さんに尋ねています。みんなの時間に感謝しています。
私は最近、browserifyでgulpを使い始めましたが、それはうまく機能します。次に、BackboneとBootstrap3を使用してフロントエンドにbrowserifyを使用しようとしました。
bootstrapに付属のjsファイルが必要になるまで、動作しているように見えます。 chromeツールにjQueryが定義されていません。
私はそれをシムに入れようとしましたが、シムに非常に混乱しています。私はjQuery 2.1.1を使用しているので、jQueryをshimする必要はありませんが、私は必死になってすべてを試していたので、jQueryはshimに存在します。 package.jsonとmain.jsファイルは次のとおりです。
-------------- package.json ------------------
{
"name": "gulp-backbone",
"version": "0.0.0",
"description": "Gulp Backbone Bootstrap",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Rob Luton",
"license": "ISC",
"devDependencies": {
"jquery": "^2.1.1",
"backbone": "^1.1.2",
"browserify": "^4.2.1",
"gulp": "^3.8.6",
"vinyl-source-stream": "^0.1.1",
"gulp-sass": "^0.7.2",
"gulp-connect": "^2.0.6",
"bootstrap-sass": "^3.2.0",
"browserify-shim": "^3.6.0"
},
"browser": {
"bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
"jQuery": "./node_modules/jquery/dist/jquery.min.js"
},
"browserify": {
"transform": ["browserify-shim"]
},
"browserify-shim": {
"jquery": "global:jQuery",
"bootstrap": {
"depends": [
"jQuery"
]
}
}
}
------------------------- main.js ----------------------
var shim = require('browserify-shim');
$ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
var bootstrap = require('bootstrap');
/* the following logs fine if I comment out the bootstrap require, otherwise I get 'jQuery undefined' */
console.log(Backbone);
$(function() {
alert('jquery works');
});
Npmでインストールした場合、jqueryをそのようにシムする必要はありません。以下は、私が書いているプロジェクトで機能します。
また、bootstrapにnpmを使用することはPITAの一種である。
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-shimに診断を出力させることも、時には役に立つことの1つです。これは私の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/'));
});
変数 '$'または 'jQuery'を定義する必要があるbrowserifyを使用しているため、エラーがあります。
ウィンドウを追加してグローバルにエラーを解決します。これが正しい方法かどうかはわかりませんが、そうでない場合はお知らせください。
window.$ = window.jQuery = require('jquery');
var bootstrapjs = require('bootstrap-sass');
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インストール:
npm install [email protected] jquery popper.js
ツールチップをグローバルに使用するには:
Bootstrap docs 。ごと
$('[data-toggle="popover"]').popover();
Browserify-Budoリポジトリ here があります。動作を確認したい場合。
私はしばらくこれについて疑問に思っていました。この簡単なソリューションは私のために仕事をします:
import foo from 'foo';
import bar from './bar';
import { default as $ } from "jquery";
global.$ = $;
global.jQuery = $; // This one does the trick for bootstrap!
// Boostrap's jQuery dependency only works with require, not with ES6 import!
const btp = require('bootstrap');