Require.js加载CDN引导程序和CDN popper [英] Require.js load CDN bootstrap and CDN popper
问题描述
我希望使用require.js加载CDN托管的引导程序和jquery.
I wish to use require.js to load CDN hosted bootstrap and jquery.
I realise that this question has been asked before (Refer Steve Eynon's answer to Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Recommended PopperJS Version), but the posted answers do not work for me.
主机html文件包含内容...
The host html file has content ...
<!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具有内容...
File js/market-place.js has content ...
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具有内容...
File js/decision-market-common.js has content ...
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控制台中得到以下结果...
Result
Using Chrome as my development browser, I get the following results, at first in the javascript console ...
market-place.js
decision-market-common.js
common requirement met.
global Popper is set.
但是随后我收到了JavaScript错误:
But then I get javascript error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
require.js试图加载./popper.js，即使它已成功加载CDN popper.js！为什么?
require.js is trying to load ./popper.js, even after it has succesfully loaded the CDN popper.js ! Why?
推荐答案
答案是...
使用引导程序版本4.0.0-beta.版本4.0.0-beta可以使用，但是就requirejs支持而言，任何更高版本(从4.0.0到4.1.3)都被破坏了.
use bootstrap version 4.0.0-beta. Version 4.0.0-beta works, but any version later (4.0.0 through to 4.1.3) is broken, with respect to requirejs support.
另一种方法是使用引导程序的捆绑版本，然后可以使用最新版本，而无需链接popper.没有捆绑软件引导程序的CDN，因此您需要制作本地副本.在这种情况下，文件js/decision-market-common.js看起来像:
An alternative is to use the bundle version of bootstrap, and then you can use the latest version and don't need to link popper. There is no CDN of bundle bootstrap, so you would need to make a local copy. In this case, file js/decision-market-common.js looks like:
需要明确 console.log('decision-market-common.js');
need to explicitly 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()(我认为呢?)更好.
Also, one small point: It is better to use requirejs() rather than require() (, I think?).
这篇关于Require.js加载CDN引导程序和CDN popper的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
