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

这是我在main中的代码：

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>

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

Answer 1

Alternatively- “bootstrap.com/contents”：捆绑的JS文件（bootstrap.bundle.js和minified bootstrap.bundle.min.js）包括Popper，但不包括jQuery。

所以我把它添加到我的图书馆。更改了名称（“bootstrap.bundle.min.js” - ＆gt;“bootstrap.min”），为bootstrap创建了一个路径，为jquery创建了一个shim。似乎对我有用。

Answer 2

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

与其他blog posts中提到的内容类似，我们的想法是创建自己的包装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 Issue。

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

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

3 个答案: