时间戳

首页 > 解决方案 > jQuery 未在 Webpack 中加载

javascript - jQuery 未在 Webpack 中加载

问题描述

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

<%= javascript_packs_with_chunks_tag 'users/show' %>

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

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;

标签： javascriptjqueryruby-on-railswebpack

解决方案

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

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

推荐阅读