即使在使用了推荐的PopperJS版本之后，也可以通过RequireJS加载PopperJS和Bootstrap

Question

我试图通过需求加载jquery、popperjs和引导程序(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) {});

关于加载popper.js和使用需求引导的问题，已经问过几次了。是，我使用的是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>

我很困惑为什么我仍然会得到这个错误，并开始认为这是与我的需要配置。有什么想法吗？

Answer 1

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

与其他博客帖子中提到的类似，它的想法是创建自己的模块来包装引导。然后，在加载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。

或者，正如履带剥皮机提到的，如果您不想创建一个新模块，只需添加一个require语句：

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

注意，这也是在https://github.com/twbs/bootstrap/issues/23381#issuecomment-330850892 on GitHub上发布的。

Answer 2

或者-“bootstrap.com/content”：捆绑的JS文件(bootstrap.bundle.js和bootstrap.bundle.min.js)包括Popper，但不包括jQuery。

所以我把它加进了我的图书馆。更改名称( "bootstrap.bundle.min.js“-> "bootstrap.min”)，为引导创建路径，为jquery创建shim。好像为我工作过。

Answer 3

这对我来说很管用；

​

require.config({
    
    shim: {
        'bootstrap' : ["jquery"]
      },
      paths: {
        'jquery': '../jsLibrary/jquery',
        '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",
        'tatMusic': '../music/tatMusic'
      }
});

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

​