使用推荐的PopperJS版本后,通过RequireJS加载PopperJS和Bootstrap的问题

Question

我试图通过requirejs加载jquery,popperjs和bootstrap(v4-beta),并在控制台中我不断得到:

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at bootstrap.js:6
    at bootstrap.js:6
    at bootstrap.js:6

这是我的主要代码:

requirejs.config({

  paths: {
    'jquery': 'lib/jquery',
    'popper': 'lib/popper',
    'bootstrap': 'lib/bootstrap'
  },

  shim: {
    'bootstrap': ['jquery', 'popper']
  }

});

requirejs(['jquery', 'popper', 'bootstrap'], function(jquery, popper, bootstrap) {});

关于使用requirejs加载popper.js和bootstrap的问题,已经多次询问过这个问题. 是的,我正在使用此处引用的umd版本.

一切都正确加载到页面中:

<script data-main="js/main.js" src="js/require.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="js/main.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="js/lib/jquery.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="popper" src="js/lib/popper.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="bootstrap" src="js/lib/bootstrap.js"></script>

我很困惑为什么我仍然会收到此错误,并开始认为这是我的require配置.有任何想法吗？

Answer 1

或者 - "bootstrap.com/contents":捆绑的JS文件(bootstrap.bundle.js和minified bootstrap.bundle.min.js)包括Popper,但不包括jQuery.

所以我把它添加到我的图书馆.更改了名称("bootstrap.bundle.min.js" - >"bootstrap.min"),为bootstrap创建了一个路径,为jquery创建了一个shim.似乎对我有用.

Answer 2

在Bootstrap PR #22888发布之前，我是这样解决这个Bootstrap dropdown require Popper.js (https://popper.js.org)问题的......

与其他博客文章中提到的类似，这个想法是创建您自己的包装 Bootstrap 的模块。然后该模块在popper.js加载之前按照规定的方式进行加载和设置bootstrap：

requirejs.config({
    "paths" : {
        "jquery"        : "https://code.jquery.com/jquery-3.2.1.slim.min",
        "popper"        : "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min",
        "bootstrap"     : "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min"
        "initBootstrap" : "...wotever..."
    },
    "shim" : {
        "bootstrap" : ["jquery"]
    }
});

...

define("initBootstrap", ["popper"], function(popper) {
    // set popper as required by Bootstrap
    window.Popper = popper;
    require(["bootstrap"], function(bootstrap) {
        // do nothing - just let Bootstrap initialise itself
    });
});

现在让您的代码/网站依赖于initBootstrap而不是bootstrap.

或者正如chasepeeler提到的，如果你不想创建新模块，你可以只添加一条require语句：

require(["popper"], function(popper) {
    window.Popper = popper;
    require(["bootstrap"]);
});

请注意，这也发布在GitHub 上的Bootstrap Popper 问题上。