我第一次使用express应用程序，发生了很多奇怪的事情。我试图使用scrollspy和工具提示引导功能，但由于某些原因，它们不起作用。我收到2条错误消息：
jquery.js:3841 jQuery.Deferred exception: $(...).scrollspy is not a function TypeError: $(...).scrollspy is not a function
和
Uncaught TypeError: $(...).scrollspy is not a function
工具提示也是如此。
我想在这里向您展示我的设置，以便您发表评论。
我用的是车把，在我的主机上。但是我有这个
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{title}}</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
{{> _msg}}
{{{body}}}
<script src="/dist/vendor.bundle.js" charset="utf-8"></script>
<script src="/dist/main.bundle.js" charset="utf-8"></script>
</body>
</html>
我使用的是webpack，配置就像这个
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:"development",
entry:{
main:'./src/scripts/script.js',
vendor:'./src/scripts/vendor.js'
},
output: {
path:path.join(__dirname,'/public/dist'),
filename:'[name].bundle.js'
},
devtool:'source-map',
module:{
rules:[
{
test: /.(png|jpe?g|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name:"../images/[name].[ext]"
}
}
]
},
{
test:/.hbs$/,
use:'handlebars-loader'
},
{
test:/.scss$/,
use:[
MiniCssExtractPlugin.loader,
{
loader:'css-loader',
options:{sourceMap:true}
},
{
loader:'sass-loader',
options:{sourceMap:true}
}
]
},
{
test:/.js$/,
exclude:/node_modules/,
use:[
{
loader:'babel-loader',
options:{
presets:['@babel/env'],
plugins:['transform-class-properties']
}
}
]
}
]
},
plugins:[
new MiniCssExtractPlugin({
filename:'../css/[name].css'
})
]
}
在我的src/scripts/vendor.js中，我只有这个
import "bootstrap"
在我的src/scripts/script.js中，我有我想根据页面使用的所有jquery和js
require('../scss/style.scss')
let helper = require('./functions')
const $ = require('jquery')
$(document).ready(function(){
$('body').scrollspy({ target: '#sideMenu'})
$('[data-toggle="tooltip"]').tooltip(
{
placement:"bottom",
delay: {show: 100, hide: 100},
boundary: 'window'
}
);
});
然后我有一个名为details.hbs的页面，我有id＝sideMenu的div，但当我转到这个页面时，scrollspy不起作用，我得到了我之前描述的错误。
页面结果也是如此。hbs，我想在悬停在图标上时显示一些工具提示
<img src="/images/detail.svg" title="some title." class="tooltipImg mr-2" data-toggle="tooltip">
实际上我只是缺少bootstrap.bundle.min.js。我很困惑，因为我有
src/scripts/vendor.js文件中的import "bootstrap"，我认为这也会导入bundle.js