问题通过 RequireJS 加载 PopperJS 和 Bootstrap，即使在使用推荐的 PopperJS 版本之后 [英] Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Recommended PopperJS Version

问题描述

我正在尝试通过 requirejs 加载 jquery、popperjs 和 bootstrap (v4-beta)，并且在控制台中我不断收到:

I'm attempting to load jquery, popperjs, and bootstrap (v4-beta) via requirejs and in the console I keep getting:

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 和使用 requirejs 引导的问题已经被问过几次了.是的，我使用的是 此处.

This has already been asked a few times regarding issues with loading popper.js and bootstrap with requirejs. Yes, I'm using the umd version referenced here.

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

Everything is loading properly into the page:

<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>

我很困惑为什么我仍然收到这个错误，并开始认为这是我的需求配置的问题.有什么想法吗?

I'm confused as to why I'm still getting this error and am starting to think it's something with my require config. Any ideas?

推荐答案

直到 Bootstrap PR #22888 已发布，这就是我修复 Bootstrap dropdown require Popper.js (https://popper.js.org) 问题的方法...

Until Bootstrap PR #22888 is released, this is how I've fixed the Bootstrap dropdown require Popper.js (https://popper.js.org) issue...

类似于其他博客文章中提到的内容 想法是创建自己的模块来包装 Bootstrap.这个模块然后在加载 bootstrap 之前以规定的方式加载和设置 popper.js:

Similar to what's mentioned in other blog posts the idea is to create your own module that wraps Bootstrap. This module then loads and sets popper.js in the prescribed manner before loading 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.

Now let your code / website have a dependency on initBootstrap and not bootstrap.

或者如 chasepeeler 提到的那样，如果你不想要要创建一个新模块，您只需添加一个 require 语句:

Or as chasepeeler mentions, if you don't want to create a new module, you can just add a require statement:

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

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

Note this is also posted on the Bootstrap Popper Issue on GitHub.

这篇关于问题通过 RequireJS 加载 PopperJS 和 Bootstrap，即使在使用推荐的 PopperJS 版本之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！