Sea*_*kin 1 javascript requirejs bootstrap-4
我希望使用 require.js 来加载 CDN 托管的引导程序和 jquery。
我意识到之前已经问过这个问题（请参阅 Steve Eynon 对通过 RequireJS 加载 PopperJS 和 Bootstrap 的问题的回答 ，即使在使用推荐的 PopperJS 版本之后），但发布的答案对我不起作用。
主机 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 ！为什么？
这个问题的答案/通过 RequireJS 加载 PopperJS 和 Bootstrap，即使在使用推荐的 PopperJS 版本后对我不起作用。
我的场景是：
使用捆绑版本时，我无法访问“内部”Bootstrap 的 Popper 版本来更改默认值。
最终，我在 RequireJS ( https://requirejs.org/docs/api.html#config-map ) 中遇到了“地图”选项。我将此添加到我的 RequireJS 配置中：
map: {
'*': {
'popper.js': 'popper'
}
}
这导致 RequireJS 正确解析 Popper。
不是一个完美的解决方案，我不能保证它对其他人有用，但我花了一段时间，所以我希望这对某人有所帮助！
| 归档时间： |
|
| 查看次数： |
1462 次 |
| 最近记录： |