在JS类中添加全局jQuery变量的技术问题及代码示例

嘿，我来帮你搞定这个需求～ 在ES模块化环境里，你现在通过import $ from 'jquery'引入的jQuery只在当前模块作用域内有效。如果要把它变成全局可访问的变量（让浏览器的window对象能直接拿到），有两种实用的实现方式：

方式一：手动挂载到window对象 #

这是最直接的方法，在导入jQuery之后，把它赋值给window的对应属性，这样整个页面的所有脚本都能访问到$和jQuery了：

import $ from 'jquery';
import dt from 'datatables.net';

// 将jQuery挂载为全局变量
window.$ = window.jQuery = $;

class ProductBuilder {
  constructor() {
    this.events()
  } // 结束构造函数
  events() {
    $(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
    $(".btn.btn-danger.btn-sm").on("click", this.ourClickDispatcher.bind(this))
  }
  ourClickDispatcher(e) {
    // 首次初始化pressedButton
    var pressedButton = $(e.target).closest(".btn.btn-primary.btn-sm");
    if (pressedButton.data('exists') == ...
    // 你的后续逻辑代码
  }
}

方式二：通过打包工具自动注入（推荐） #

如果你用Webpack这类打包工具，可以配置ProvidePlugin来自动把jQuery注入到全局，不用在每个模块里手动写挂载代码：

在你的Webpack配置文件中添加这段配置：

const webpack = require('webpack');

module.exports = {
  // ...其他配置项
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

小提醒 #

其实如果只是在当前ProductBuilder类内部使用jQuery，你已经通过import拿到了$，直接用就完全没问题，没必要特意搞全局变量～ 全局变量容易引发命名冲突，除非你确实需要让其他没导入jQuery的脚本也能访问它，否则尽量保持模块化的使用方式会更稳妥。

内容的提问来源于stack exchange，提问作者Carol.Kar