使用require.js加载时，错误在bootstrap 4中加载popper.js

Question

我通过npm安装了bootstrap 4，jquery，popper。当我加载网站时，它在控制台中显示错误，无法获取文件popper.js，我再次检查我看到一个文件popper.js是由require.js加载的，而一个文件popper.js被注意到没有找到引导。他们有不同的道路。文件成功的路径为：http://localhost:9000/Libs/popper.js/dist/umd/popper.js，文件失败为http://localhost:9000/popper.js

在下图中，图1显示了库js的配置路径。图2显示了librarys加载成功，而pic 3通知popper.js未加载。

我不明白为什么bootstrap无法识别requie.js加载的popper.js。

每个人都可以帮我解释一下我的问题。 谢谢！

Answer 1

尝试使用：

bootstrap.bundle.js

或：

bootstrap.bundle.min.js

https://getbootstrap.com/docs/4.0/getting-started/contents/

文档显示，提到的这两个文件包含popper，因此您无需索取。

如果这不起作用，请搜索/popper.js的源文件，这可能就像在其他地方修改引用一样简单。

而不是这样做：

require(["bootstrap"], function(bootstrap) {
    // do nothing
});

尝试首先加载popper：

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

或者，您可以使用CDN链接。 Bootstrap建议在包含已编译的引导程序之前使用CDN版本。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Answer 2

Bootstrap要求Popper在全局范围内可用，您可以通过将导出添加到shim配置中来解决此问题：

shim: {
    bootstrap: {
        deps: ['jquery','popper']
    },
    popper: {
        exports: "Popper"
    }
}

此外，您还需要确保引导程序正确定义了模块的名称。您可以在启动行中检查bootstrap.js文件

  

（函数（全局，工厂）{typeof出口==='object'&& typeof   模块！=='未定义'？工厂（出口，要求（'jquery'），   require（'popper'））：typeof define ==='function'&& define.amd吗？   define（[['exports'，'jquery'，'popper ']，工厂）：

Answer 3

嘿，这是我对stackoverflow问题的第一个答复，但是由于我自己一直在为此奋斗，所以我想分享我的答案。就像其他答案说的那样，bootstrap需要popper js，但它在根目录上引用popper本身，因此无论是否加载它，都没有关系，bootstrap在根目录中查找时会在根目录上查找它。查看下面的代码，您可以看到它使用了require（'popper.js'）：

bootstrap.js

解决方案是使用require定义模块“ popper.js”，并完全按照以下名称命名：

n = 10^18

通过这种方式，引导程序会查找正确的目录。

Answer 4

在路径中添加bootstrap.js之前，需要添加popper.js。

所以JS包含顺序应该是Jquery，然后是popper，然后是bootstrap。