通过 RequireJS 加载 PopperJS 和 Bootstrap 问题，即使在使用推荐的 PopperJS 版本之后

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 的问题，已经被问过几次了。是，我使用的是 here.

引用的 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

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

与其他 blog posts 中提到的类似，想法是创建您自己的包装 Bootstrap 的模块。该模块然后在加载 bootstrap:

之前以规定的方式加载和设置 popper.js

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 Issue 上。

Answer 2

或者- "bootstrap.com/contents"：捆绑的 JS 文件（bootstrap.bundle.js 和缩小的 bootstrap.bundle.min.js）包括 Popper，但不包括 jQuery。

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

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) {
    });
});

通过 RequireJS 加载 PopperJS 和 Bootstrap 问题，即使在使用推荐的 PopperJS 版本之后

Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Recommended PopperJS Version

javascript

requirejs

twitter-bootstrap

bootstrap-4

popper.js