$(...).modal不是使用webpack和bootstrap-loader的函数(...)错误 [英] $(...).modal is not a function(…) error using webpack and 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"
    })
],

因此，我们的想法是，所有使用bootstrap加载的文件都应放入一个文件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的文档在其他条目之间共享.

考虑到这一点，我现在可以使用其他捆绑软件中的模态函数.

I'm having an issue opening modals with the $('#modal-id').modal('show') function. After narrowing down the issues, I believe this has something to do with webpack loading my dependencies or specifically with the jQuery dependency.

Here are the necessary pieces of my webpack configuration:

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"
    })
],

So the idea is that all of the files loaded with bootstrap should be going into one file js/bootstrap.bundle.js and the jQuery dependency should be loaded into each bundle that needs it.

Other than the modal function, bootstrap-loader is completely working as it should with all styles as well as the $ and jQuery variables.

Here is my .bootstraprc file:

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

How I'm using the bundled files:

<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>

I'm loading pretty much everything that comes with bootstrap and the modal scripts are loaded in the bundle. But I'm at a loss for why this cannot find the modal function. Thanks in advance.

解决方案

I found a solution using the following configuration:

(js/vendor replaces js/bootstrap.bundle in the earlier example)

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"
    )
],

Now instead of bundling bootstrap to file js/bootstrap.bundle.js, I can list out my vendor plugins and have them all bundled into js/vendor.bundle.js, which will be shared between the other entries based on the documentation for CommonsChunkPlugin.

With that in mind, I am now able to use the modal function from a different bundle.

这篇关于$(...).modal不是使用webpack和bootstrap-loader的函数(...)错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！