$（...）。模態不是使用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的函數（...）錯誤

回答

相關問題