requirejs加载bootstrap报错处理:Bootstrap dropdown require Popper.js (https://popper.js.org)
项目里使用RequireJS加载Bootstrap,在requirejs.config配置如下:
requirejs.config({
"paths": {
"jquery": "libs/jquery/jquery-3.2.1.min",
"popper": "libs/popper/1.11.0/umd/popper.min",
"bootstrap": "libs/bootstrap/4.0.0-beta/js/bootstrap.min"
},
"shim" : {
"bootstrap": ["jquery","popper"]
}
});
require(["jquery","bootstrap"],function() {
var startName = $("script[data-start]").attr("data-start");
if (startName) {
require([startName]);
}
});
在浏览器控制台输出错误:
Bootstrap dropdown require Popper.js (https://popper.js.org)
解决方法
原因使用在Window没有注入Popper。
修改require,预先加载popper,向window添加Popper对象:
require(["popper"], function (p) {
window.Popper = p;
require(["jquery","bootstrap"],function() {
var startName = $("script[data-start]").attr("data-start");
if (startName) {
require([startName]);
}
});
});
参考:https://github.com/twbs/bootstrap/issues/23381#issuecomment-330850892