对于某些人来说这可能是显而易见的,但我一直在想:我为什么要依靠Google的服务器为我的网站托管jQuery?
是不是因为它以这种方式加载得更快?
我是反应的新手,我想在我的反应应用程序中包含bootstrap
我已经安装了bootstrap npm install bootstrap --save
现在,想在我的反应应用程序中加载bootstrap css和js.
我正在使用webpack.
webpack.config.js
var config = {
entry: './src/index',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 8080,
historyApiFallback: true,
contentBase:'./src'
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
module.exports = config;
Run Code Online (Sandbox Code Playgroud)
我的问题是"如何在node_modules的reactjs app中包含bootstrap css和js?" 如何设置bootstrap以包含在我的反应应用程序中?
我正在链接到CDN上的jQuery Mobile样式表,如果CDN失败,我想回到我本地版本的样式表.对于脚本,解决方案是众所周知的:
<!-- Load jQuery and jQuery mobile with fall back to local server -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='jquery-1.6.3.min.js'%3E"));
}
</script>
Run Code Online (Sandbox Code Playgroud)
我想为样式表做类似的事情:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
Run Code Online (Sandbox Code Playgroud)
我不确定是否可以实现类似的方法,因为我不确定浏览器在链接脚本时是否以与加载脚本时相同的方式阻塞(也许可以在脚本标记中加载样式表然后把它注入页面)?
所以我的问题是:如果CDN失败,如何确保本地加载样式表?
有很多关于如何通过检查全局变量JQuery的存在来将JQuery CDN回退到本地副本的帖子.
我的问题是,如何对twitter-bootstrap做同样的事情?是否在引导程序中定义了变量,以便我可以检查以确保CDN可用?
顺便说一句,我使用netdna.bootstrapcdn.com作为我的bootstrap CDN
我正在使用CMS来阻止我们编辑头部.我需要在标记后面的网站上添加css样式表.有没有办法用JS做到这一点,我可以在页面底部添加一个脚本(我有权在标签之前添加脚本),然后将样式表注入head部分?
截至目前我正在使用这样的javascript
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script> $.fn.modal || document.write('<script src="js/bootstrap.min.js">\x3C/script>')</script>
Run Code Online (Sandbox Code Playgroud)
我正在从bootstrapcdn加载bootstrap.css
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
Run Code Online (Sandbox Code Playgroud)
如果cdn服务器关闭,有人可以告诉我如何加载本地副本.?
cdn ×4
jquery ×3
css ×2
javascript ×2
html ×1
performance ×1
reactjs ×1
stylesheet ×1
webpack ×1