我正在尝试将 BootstrapTable 库与 Webpack 一起使用。这似乎与 Jquery 的处理方式有关,但我不是 100% 确定。
我收到以下错误(在我尝试添加任何 HTML 表格之前 - 但示例表格看起来也没有经过处理)
Uncaught TypeError: Cannot set properties of undefined (setting 'BootstrapTable')
at bootstrap-table.js:8541:21
at bootstrap-table.js:4:102
at ./node_modules/bootstrap-table/dist/bootstrap-table.js (bootstrap-table.js:5:2)
at __webpack_require__ (bootstrap:19:1)
at vendors-8eb79120f29fcd7dbd35.js:32570:97
at vendors.js:4:20
at vendors.js:4:20
vendor.js 文件如下所示:
import jQuery from 'jquery'
window.jQuery = jQuery;
import '@popperjs/core';
import 'bootstrap';
import 'bootstrap-table/dist/bootstrap-table.js'
我也尝试过:
import $ from 'jquery';
window.jQuery = $;
global.jQuery = $;
window.$ = $;
我的设置似乎遵循以下说明:https://bootstrap-table.com/docs/vuejs/webpack/
我也尝试过使用 webpack 插件默认包含 Jquery
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
但这似乎并不重要。
请帮我弄清楚为什么我无法导入这个包。
注意:我认为这与 Jquery 导入有关 - 我尝试在“webpack 捆绑包”之前将 JQuery 直接从 CDN 导入到我的 HTML 文件中,它修复了错误。但我想用 Webpack 正确地做到这一点。
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
这是因为你的 jQuery 是在 BootstrapTable 之后加载的,所以你必须重新排序你的 js 文件。 要解决此问题,请在资产中创建 2 个文件,例如 js 文件夹
js/bootstrap-table.js
import 'bootstrap-table'
js/jquery.js
import $ from 'jquery';
global.$ = $;
global.jQuery = $;
然后在你的 app.js 中,在 Bootstrap 表之前加载 jquery
app.js
import './js/jquery';
import './js/bootstrap-table'