在 Webpacker 5 中加载 jQuery 的问题

【问题标题】：Issue loading jQuery in Webpacker 5在 Webpacker 5 中加载 jQuery 的问题
【发布时间】：2021-12-18 05:52:11
【问题描述】：

我正在尝试将 jQuery 作为 Webpacker/Webpack (5.4.3) 插件添加到我的 Rails (6.0.4.1) 应用程序中，但我不断收到“jQuery 未定义错误”。我正在使用以下代码，这似乎是大多数搜索对这个问题的一般答案：

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery'
  })
)

module.exports = environment

现在，我可以使用以下代码使其工作：

// application.js

import $ from 'jquery/dist/jquery.js';

globalThis.jQuery = $;
globalThis.$ = $;

我对 Webpack/Webpacker 还很陌生，所以我主要是想了解为什么顶级解决方案不起作用。谢谢！

【问题讨论】：

标签： jquery ruby-on-rails webpack webpacker

【解决方案1】：

提供程序模块会自动加载模块，但是，它仅在实际上是 ES 模块的文件中可用。 ES Module 是一个 JS 文件，至少包含一个 import 或 export 语句或以 .mjs 扩展名结尾的文件。

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
);

只要 Webpack 在您的代码中遇到这些免费标识符，上述代码将使 标识符 $ 和 jQuery 在任何 ES 模块 中可用。 换句话说，ProvidePlugin 并没有真正修改全局范围。

在您的application.js 文件中，您需要执行您已完成的操作：

globalThis.jQuery = $;

// or
window.jQuery = $;

您的application.js 文件应该至少有一个import 或export 语句，不一定是jQuery 导入语句。或者，如果你不喜欢它，你也可以考虑使用expose-loader。

【讨论】：