我是第一次在Express应用程序上工作，发生了很多奇怪的事情。我正在尝试使用scrollspy和tooltip引导程序功能，但由于某些原因，它们无法正常工作。我收到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
工具提示相同。
我想在这里向我展示我的设置，以便您发表评论。
我正在使用把手，在main.hbs中，我有这个
<!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无法正常工作，并且出现了之前所述的错误。
页面result.hbs也是一样，我想在该图标上显示一些工具提示
<img src="/images/detail.svg" title="some title." class="tooltipImg mr-2" data-toggle="tooltip">