Rails 6搭配Webpacker 5配置jQuery报未定义错误问题咨询

核心原因如下： #

1. webpack.ProvidePlugin 的作用机制限制
   ProvidePlugin 是编译期注入能力，仅会处理webpack打包链路内的模块代码：当它检测到某个模块内出现了未定义的$/jQuery变量时，会自动在该模块顶部注入import $ from 'jquery'逻辑，注入的变量仅在当前模块的局部作用域生效，不会主动挂载到全局作用域（window/globalThis）。
   以下场景下该配置就会触发jQuery is not defined报错：

• 页面内嵌的<script>标签中直接调用jQuery/$
• 引入的第三方jQuery插件默认从全局作用域读取jQuery变量
• 部分老版本Rails组件默认从全局读取jQuery

2. Webpack 5 + Webpacker的默认隔离机制
   Webpack 5默认启用了更严格的模块作用域隔离，所有打包的模块默认不会泄露变量到全局上下文，即使你在某个模块里声明了顶层jQuery变量，也不会自动挂载到window上，这也导致ProvidePlugin的注入逻辑无法覆盖全局调用场景。

3. 潜在的路径解析问题
   部分版本的jquery包的npm入口指向的是未压缩的模块化版本，在Webpacker的默认解析规则下，可能出现ProvidePlugin引用的模块和你实际需要的jquery runtime不一致的情况，你第二种方案中明确指定了jquery/dist/jquery.js的完整路径，避开了解析歧义的问题。

如果你想使用通用的ProvidePlugin方案同时兼容全局调用，可以补充expose-loader配置： #

首先安装依赖：
yarn add expose-loader --dev

然后修改config/webpack/environment.js：

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

// 原有ProvidePlugin配置保留
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery'
  })
)

// 新增expose-loader配置，把jquery暴露到全局作用域
environment.loaders.append('jquery', {
  test: require.resolve('jquery'),
  loader: 'expose-loader',
  options: {
    exposes: ['$', 'jQuery'],
  },
})

module.exports = environment

该配置和你手动在application.js里挂载globalThis的效果完全一致。

内容的提问来源于stack exchange，提问作者motownjoe