使用 require.js 加载时在 bootstrap 4 中加载 popper.js 时出错答案

【问题标题】：Error load popper.js in bootstrap 4 when use require.js to load使用 require.js 加载时在 bootstrap 4 中加载 popper.js 时出错
【发布时间】：2018-09-25 03:06:27
【问题描述】：

我通过 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 显示库加载成功，图 3 通知 popper.js 未加载。

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

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

【问题讨论】：

标签： javascript typescript requirejs bootstrap-4

【解决方案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>

【讨论】：

【解决方案2】：

嘿，这是我对 stackoverflow 问题的第一个回答，但由于我自己一直在努力解决这个问题，所以我想分享我的答案。就像其他答案说的那样，bootstrap 需要 popper js，但它在根目录上引用 popper 本身，因此无论您是否加载它都没有关系，bootstrap 在根目录上查找它，而您将它放在更深的目录中。看下面的代码，你可以看到它使用了 require('popper.js')：

bootstrap.js

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

require.config({
baseUrl: 'lib',
paths: {
    main: 'main',
    jquery: 'jquery/dist/jquery',
    'jquery-slim': 'jquery/dist/jquery-3.3.1.slim.min',
    'jqueryUnobtrusive': 'jquery-validation-unobtrusive/jquery.validate.unobtrusive',
    'bootstrap': 'bootstrap/dist/js/bootstrap',
    'knockout': 'knockout/knockout-latest',
    'ajax': 'jquery-ajax/jquery.unobtrusive-ajax',
    'shop': '/scripts/shop/shop',
    'domready': 'requirejs/domready',
    'shoporder': '/scripts/shoporder/shoporder',
    'popper': 'popper.js/dist/umd/popper'
}});

define("popper.js", ['popper'], () => {
require(['popper'], () => {
    require(['bootstrap']);
});

define(['main', 'jquery', 'jquery-slim'], () => {
 require(['jqueryUnobtrusive', 'ajax']);
 require(['knockout']);
 require(['jquery']);
 require(['popper.js']);
});

这样引导程序会寻找正确的目录。

【讨论】：

【解决方案3】：

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

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

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

(function (global, factory) {   
  typeof exports === 'object' && typeof module !== 'undefined' 
  ?  factory(exports, require('jquery'), require('popper')) 
  :  typeof define === 'function' && define.amd 
  ? define(['exports', 'jquery', **'popper'**], factory) 
  : (...)

【讨论】：