如何正确处理 Webpack 和 jQuery 依赖项

Posted 2023-02-22

【中文标题】如何正确处理 Webpack 和 jQuery 依赖项

【英文标题】：How to deal correctly witn Webpack and jQuery dependencies

【发布时间】：2017-09-07 13:41:57

【问题描述】：

我有一个基于Vue CLI 创建的项目，并在项目中添加了MaterializeCSS。我更改了我的webpack.dev.conf.js、webpack.prod.conf.js 和webpack.base.conf.js 如下（仅假设相关部分）：

开发和产品：

  plugins: [
    new webpack.ProvidePlugin(
      $: 'jquery',
      jQuery: 'jquery',
      'window.$': 'jquery',
      'window.jQuery': 'jquery',
    )
  ]

基地：

resolve: 
extensions: ['.js', '.vue', '.json'],
alias: 
  '$': 'jquery',
  'jQuery': 'jquery',
  'window.$': 'jquery',
  'window.jQuery': 'jquery',      
  '@': resolve('src'),
  'vue$': 'vue/dist/vue.esm.js'

main.js 有这个内容：

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'
import 'materialize-css/dist/js/materialize.min.js'
import 'materialize-css/dist/css/materialize.min.css'

当我调用$('#modal').modal('open')时，初始化后，我收到消息：

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_jquery__(...).modal is not a function
at Object.displayLoading (eval at <anonymous> (0.js:278), <anonymous>:10:55)
at VueComponent.searchBCP (eval at <anonymous> (0.js:293), <anonymous>:107:63)
at boundFn (eval at <anonymous> (app.js:810), <anonymous>:125:14)
at htmlButtonElement.invoker (eval at <anonymous> (app.js:810), <anonymous>:1659:18)
displayLoading @ display-loading.js?d781:6
searchBCP @ script.js?7493:104
boundFn @ vue.esm.js?65d7:124
invoker @ vue.esm.js?65d7:1658 

我的问题也是当我处理 VueJS 指令和 Materializecss 时，正确使用这些方法。有没有人遇到过这个困难？

【参考方案1】：

您在想要引用 jquery 的文件中缺少正确的导入 如果你在myfile.js中引用了$，你应该在main.js中有：

require("imports-loader?$=jquery!./myfile.js");

这将添加到myfile.js：

var $ = require("jquery");

在此处查看参考：https://webpack.github.io/docs/shimming-modules.html

【参考方案2】：

如果你想阻止 jQuery 在运行时绑定和检索它的依赖，你可以在你的 webpack 配置文件中使用 externals 配置。

externals: 
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery"