jQuery 未在 Webpack 中加载答案

【问题标题】：jQuery not being loaded in WebpackjQuery 未在 Webpack 中加载
【发布时间】：2021-04-13 17:31:54
【问题描述】：

我正在使用 SplitChunks 将我的整个 application.js 应用程序移动到更小的页面包中。在我的users/show.html.erb 页面中，我使用以下标签来导入特定的块。

<%= javascript_packs_with_chunks_tag 'users/show' %>

当我检查它时，从我的源代码的外观来看，其中包含几个捆绑包，例如 application.js 文件，其中包含像这样的 jquery...

import "bootstrap"
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

我只是在测试页面以查看是否正在加载 jquery。我的users/show.js 代码如下所示：

import "chartkick"
import "chart.js"

window.onload = function() {
  if (window.jQuery) {  
      // jQuery is loaded  
      alert("Yeah!");
  } else {
      // jQuery is not loaded
      alert("Doesn't Work");
  }
}

当我加载页面时，我确实看到一个Doesn't Work 警报弹出，表明 jQuery 尚未加载。我是 webpack 的新手，所以也许我在某处有一些错误配置，但是如果在 application.js 级别加载 jquery，为什么我的其他包无法收听使用 jquery？这是依赖图的问题吗？

我的环境如下：

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

environment.plugins.append('Provide', new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default']
}));
const config = environment.toWebpackConfig();
config.resolve.alias = {
 jquery: 'jquery/src/jquery'
};

environment.splitChunks()
module.exports = environment;

【问题讨论】：

标签： javascript jquery ruby-on-rails webpack

【解决方案1】：

我看不到您将 jQuery 别名添加到全局（窗口）对象的位置。所以你必须添加它如下：

global.jQuery = jQuery; // This is a alias you defined in `ProvidePlugin`;
// window.jQuery = jQuery // also works

// Or you can add directly via your required object
const jquery = require('jquery');
global.jQuery = jquery;

【讨论】：

global.jQuery 去哪儿了？ Environment.js 还是 Application.js？
最好放在你的Application.js你导入jquery的地方

【解决方案2】：

我总是会遇到这个问题，这是使它对我有用的两行

// https://stackoverflow.com/q/54905026/398863
window.jQuery = $;
window.$ = $;

【讨论】：