我有一个使用 jquery 的 npm 项目。
var $ = require('jquery');
我还有一个引用引导程序的索引 html 文件。
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="my-script.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
现在我是否需要为 jquery 进行单独的加载,因为它取决于它? 我最近使用jqueryify
而不是jquery
,我不需要单独的负载。
任何人都可以推荐一种与require一起使用的引导加载模式吗?
Bootstrap 现在是 bootstrap 人员支持的节点包。
https://www.npmjs.org/package/bootstrap
这意味着您现在可以在代码中要求引导。 所以。
npm install bootstrap --save
npm install jquery --save
傅.js
var $ = require('jquery');
window.$ = $;
require('bootstrap');
如果您在使用require('jquery')
时遇到一些麻烦,有一种更简单的方法可以做到这一点。只需重定向节点模块文件夹(不使用任何require()
)。
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap
关于您的观点,只需使用:
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
假设您要安装最新版本的 Bootstrap 4,并且您使用的是至少使用 5.6+ npm
node
10+(我在 node
v12.14.1 和 npm
6.13.6 中使用它,并且它工作正常):
npm install bootstrap
npm install jquery
npm install popper.js
请注意,您不需要传递--save
因为默认情况下,npm
5.0.0 安装的模块将添加为依赖项。
现在,假设您在同一个目录中有一个名为 index.html
的文件 node_modules
,您需要将以下内容添加到您的 head
标签中:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
您还需要在</body>
之前添加以下内容:
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
注意注释:首先是jQuery,然后是Popper.js,然后是Bootstrap JS。这很重要,因为 Bootstrap 依赖于 JQuery 和 Popper.js。
您可以尝试将其分配给全局 jquery 属性。
global.jQuery = require('jquery');
//install expose-loader
npm install jquery --save //Installing jquery and saving to package.Json
npm install bootstrap --save//Installing boostrap and saving to package.Json
npm install expose-loader --save-dev//Installing expose-loader and saving to package.json
// webpack
module: {
rules: [
{
test: require.resolve('jquery'),
loader: 'expose-loader?jQuery!expose-loader?$'
}
]}
// javascript file
var $ = require("expose-loader?$!jquery");
require('bootstrap');
require('jquery.easing');
yarn add bootstrap-sass
yarn add jquery
对于风格,我使用需要包含引导路径的 gulp sass
@import "bootstrap-sprockets";
@import "bootstrap";
var sass = require('gulp-sass');
pipe(sass({includePaths: ['node_modules/bootstrap-sass/assets/stylesheets']}).on('error', sass.logError))
对于 JavaScript,我将 jquery 分配给 window.jQuery,因为需要 bootstrap-sass:
window.jQuery = require('jquery');
require('bootstrap-sass');
我正在使用Laravel Mix(Webpack),所以我不得不将这个别名添加到webpack.mix.js
:
mix.webpackConfig({
...
resolve: {
...
alias: {
"bootstrap": path.resolve(__dirname, "node_modules/bootstrap/dist/js/bootstrap.min.js"),
}
},
});
我的package.json
在开发依赖项中"bootstrap": "^4.0.0",
。
然后在我的视图的javascript文件中,我使用:
var $ = require('jquery');
window.$ = $;
require('bootstrap');
https://getbootstrap.com/docs/4.0/getting-started/download/#npm 也帮了忙。
将此链接添加到 head 中
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"/>
在末尾正文标记处添加这些链接
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>