Question

我在使用$('#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"
    })
],

所以我的想法是，所有加载了bootstrap的文件都应该进入一个文件js/bootstrap.bundle.js，并且应该将jQuery依赖项加载到需要它的每个bundle中。

除了模态函数之外，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>

我正在加载引导程序附带的所有内容，并且模块脚本在bundle中加载。但我不知道为什么这找不到模态函数。提前谢谢。

Answer 1

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

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

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

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

1 个答案: