$(...)。模态不是使用webpack和bootstrap-loader的函数(...)错误
问题描述:
我在使用$('#modal-id').modal('show')
函数打开模态时遇到问题。在缩小这些问题之后,我认为这与webpack加载我的依赖关系有关,或者与jQuery依赖关系有关。
这里是我的WebPack配置的必要部分:
entry: {
'js/bootstrap.bundle': 'bootstrap-loader',
'js/common.bundle': [
path.join(PROJECT_ROOT, 'resources/assets/js/common/app.js'),
path.join(PROJECT_ROOT, 'resources/assets/js/common/table.js')
],
...
},
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
],
这样的想法是,所有装载引导文件应该进入一个文件js/bootstrap.bundle.js
和jQuery的依赖应该被装入每捆需要它。
除了模态函数,bootstrap-loader完全可以像所有样式以及$和jQuery变量一样工作。
这里是我的.bootstraprc
文件:
useFlexbox: true
bootstrapVersion: 3
preBootstrapCustomizations: ./resources/assets/scss/partials/_variables.scss
bootstrapCustomizations: ./resources/assets/scss/app.scss
styleLoaders:
- style
- css
- sass
styles:
mixins: true
normalize: true
print: true
glyphicons: true
scaffolding: true
type: true
code: true
grid: true
tables: true
forms: true
buttons: true
component-animations: true
dropdowns: true
button-groups: true
input-groups: true
navs: true
navbar: true
breadcrumbs: true
pagination: true
pager: true
labels: true
badges: true
jumbotron: true
thumbnails: true
alerts: true
progress-bars: true
media: true
list-group: true
panels: true
wells: true
responsive-embed: true
close: true
modals: true
tooltip: true
popovers: true
carousel: true
utilities: true
responsive-utilities: true
scripts:
transition: true
alert: true
button: true
carousel: true
collapse: true
dropdown: true
modal: true // MODAL SCRIPT IS LOADED
tooltip: true
popover: true
scrollspy: true
tab: true
affix: true
我如何使用捆绑的文件:
<script type="text/javascript" src="{{ asset('js/bootstrap.bundle.js') }}" charset="utf-8"></script>
<script type="text/javascript" src="{{ asset('js/common.bundle.js') }}" charset="utf-8"></script>
我加载附带的引导程序和模式的脚本加载几乎一切在捆绑中。但我为什么无法找到模态功能而感到茫然。提前致谢。
答
我找到了一个解决方案使用以下配置:
(js/vendor
在前面的示例替换js/bootstrap.bundle
)
entry: {
'js/vendor': 'bootstrap-loader',
...
},
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}),
new webpack.optimize.CommonsChunkPlugin(
"js/vendor",
"js/vendor.bundle.js"
)
],
现在不是捆绑引导到文件js/bootstrap.bundle.js
,我可以列出我的供应商插件并将它们全部捆绑到js/vendor.bundle.js
中,这些文件将根据CommonsChunkPlugin的文档在其他条目之间共享。
考虑到这一点,我现在可以使用不同包中的模态函数。