UMD / AMDソリューション
UMDを介して実行している人のために、require.js
、簡潔な解決策があります。
UMDとしてtether
ロードさTooltip
れる依存関係として必要なモジュールで、モジュール定義の前に、テザーの定義に短いスニペットを配置します。
// First load the UMD module dependency and attach to global scope
require(['tether'], function(Tether) {
// @todo: make it properly when boostrap will fix loading of UMD, instead of using globals
window.Tether = Tether; // attach to global scope
});
// then goes your regular module definition
define([
'jquery',
'tooltip',
'popover'
], function($, Tooltip, Popover){
"use strict";
//...
/*
by this time, you'll have window.Tether global variable defined,
and UMD module Tooltip will not throw the exception
*/
//...
});
冒頭のこの短いスニペットは、実際にはアプリケーションのより高いレベルに配置できます。最も重要なことはbootstrap
、Tether
依存関係のあるコンポーネントを実際に使用する前に呼び出すことです。
// ===== file: tetherWrapper.js =====
require(['./tether'], function(Tether) {
window.Tether = Tether; // attach to global scope
// it's important to have this, to keep original module definition approach
return Tether;
});
// ===== your MAIN configuration file, and dependencies definition =====
paths: {
jquery: '/vendor/jquery',
// tether: '/vendor/tether'
tether: '/vendor/tetherWrapper' // @todo original Tether is replaced with our wrapper around original
// ...
},
shim: {
'bootstrap': ['tether', 'jquery']
}
UPD: Boostrap 4.1 StableではTetherがPopper.jsに置き換えられました。使用方法に関するドキュメントをご覧ください。