到目前为止我尝试过的事情

主机html文件具有内容...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script data-main="js/market-place" src="js/lib/requirejs/require.min.js"></script>
</head>   
<body>
 html content etc.
</body>
</html>

文件js / market-place.js具有内容...

console.log( 'market-place.js');

requirejs(['./decision-market-common'], function(){
  console.log( 'common requirement met.');
  require(['bootstrap'], function( bootstrap){
    console.log( 'bootstrap requirement met.');
    });
  });

文件js / decision-market-common.js具有内容...

console.log( 'decision-market-common.js');

requirejs.config({
  paths: {
    jquery   : 'https://code.jquery.com/jquery-3.3.1.slim.min',
    popper   : 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min',
    bootstrap: 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min'
    },
  shim: {
    bootstrap: {
      deps: ['jquery', 'globalPopper']
      }
    }
  });


define( 'globalPopper', ['popper'], function( p){
  window.Popper = p;
  console.log( 'global Popper is set.');
  return p;
  });

结果

使用Chrome作为开发浏览器，首先在javascript控制台中得到以下结果...

market-place.js
decision-market-common.js
common requirement met.
global Popper is set.

但是随后我收到了JavaScript错误：

Failed to load resource: net::ERR_FILE_NOT_FOUND

require.js尝试加载./popper.js，即使它已成功加载CDN popper.js！为什么？

Answer 1

这个问题的答案/ Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Recommended PopperJS Version对我不起作用。

我的情况是：

使用Bootstrap 4.1.3（无法移至其他版本）
无法使用捆绑版本，因为我想在Popper中更改默认设置（特别是禁用GPU加速功能以解决工具提示中文本模糊的某些问题）

使用捆绑版本，我无法访问Popper“ inside” Bootstrap的版本来更改默认值。

最终，我遇到了RequireJS（https://requirejs.org/docs/api.html#config-map）中的“地图”选项。我将此添加到我的RequireJS配置中：

map: {
    '*': {
        'popper.js': 'popper'
    }
}

这导致RequireJS正确解析Popper。

这不是一个完美的解决方案，我不能保证它会对其他任何人都有效，但是我花了一些时间在此上，所以希望对您有所帮助！

Answer 2

答案是...

使用引导程序版本4.0.0-beta。版本4.0.0-beta可以使用，但是就requirejs支持而言，任何更高版本（从4.0.0到4.1.3）都被破坏了。

一种替代方法是使用引导程序的捆绑版本，然后您可以使用最新版本，而无需链接popper。捆绑包引导程序没有CDN，因此您需要进行本地复制。在这种情况下，文件js/decision-market-common.js如下：

需要明确 console.log（'decision-market-common.js'）;

requirejs.config({
  paths: {
    jquery   : 'https://code.jquery.com/jquery-3.3.1.slim.min',
    bootstrap: 'lib/bootstrap/bootstrap.bundle.min'
    },
  shim: {
    bootstrap: {
      deps: ['jquery']
      }
    }
  });

还有一点，要点：使用requirejs（）比require（）更好（我想？）。

Require.js加载CDN引导程序和CDN popper

到目前为止我尝试过的事情

结果

2 个答案: