$（...）。模态不是使用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>

我加载附带的引导程序和模式的脚本加载几乎一切在捆绑中。但我为什么无法找到模态功能而感到茫然。提前致谢。

来源

2016-11-08 Collier Devlin

我找到了一个解决方案使用以下配置：

（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的文档在其他条目之间共享。

考虑到这一点，我现在可以使用不同包中的模态函数。

来源

2016-11-09 12:51:41

$（...）。模态不是使用webpack和bootstrap-loader的函数（...）错误

回答

相关问题