切换到Webpacker后，内联脚本中不存在JQuery

Question

我正在将Rails应用程序从链轮切换到webpacker。在我现有的瘦模板中，JQuery没有定义，我收到了内联javascript的错误。我尝试在application.html.slim中添加对jquery的需求，但这并没有帮助。

application.html.slim

doctype html
html
  head
    title My Application
    meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
    meta name="have-i-been-pwned-verification" value="..." /

    meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
    = include_gon(watch: true)
    = stylesheet_link_tag 'application', media: 'all'
    = javascript_pack_tag 'application'
    = javascript_include_tag 'jquery'
    = csrf_meta_tags
body
  = render 'layouts/navigation/main_nav', disable_search: true
  = flash_messages
  main.application
    = yield

错误

Uncaught ReferenceError: $ is not defined

_comments.slim

.comments-wrapper.collapse.show.comments-collapse#comments
  .row.comments
    .col-sm-12
      .row.comment-post
        .col-sm-12.parent-comment-form
          - if user_signed_in?
            = render 'we_vote/comments/form', commentable: commentable
      - unless local_assigns[:limit_comments].present?
        .row.filter-row
          .col-sm-12.col-lg-2.offset-md-1.offset-sm-0.text-right
            .sort-label sort by
          .col-lg-4.col-sm-12.mb-2
            select.sort-select
              option Popular
              option Reply Number
              option Upvote Number
              option Newest
          .col-lg-4.offset-lg-1.col-sm-12.offset-md-0
            select.sort-select
              option Today
              option Last Week
              option This Week
      .row
        .col-sm-12.comments-container class="#{'empty' unless commentable.comments.any?}"
          ul.comments-list
            - if local_assigns[:limit_comments]
              - commentable.comments.top_level.by_popularity.limit(limit_comments).each do |comment|
                = render 'we_vote/comments/comment', comment: comment, commentable: commentable, limited: true
            - else
              - commentable.comments.top_level.by_popularity.each do |comment|
                = render 'we_vote/comments/comment', comment: comment, commentable: commentable

= render 'we_vote/comments/report_comment_modal'

javascript:

  $(function(){
    var commentId = "#{ params[:comment_id] }";
    if(commentId) {
      var $comment = $('#' + commentId);
      $comment.get(0).scrollIntoView();
      $comment.addClass('notified');
    }
  });

environment.js

const { environment } = require("@rails/webpacker");
const erb = require("./loaders/erb");
const jquery = require("./plugins/jquery");
const webpack = require("webpack");
environment.plugins.append(
  "Provide",
  new webpack.ProvidePlugin({
    "window.Tether": "tether",
    Popper: ["popper.js", "default"],
  })
);

const aliasConfig = {
  jquery: "jquery-ui-dist/external/jquery/jquery.js",
  "jquery-ui": "jquery-ui-dist/jquery-ui.js",
};

environment.config.set("resolve.alias", aliasConfig);

environment.plugins.prepend("jquery", jquery);
environment.loaders.prepend("erb", erb);
module.exports = environment;

config/webpack/plugins/jquery.js

const webpack = require("webpack");

module.exports = new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery",
});

application.js

import $ from "jquery";
import autosize from "autosize";
global.$ = $;
global.jQuery = $;
import tether from "tether";
global.Tether = tether;

require("@rails/ujs").start();
require("@rails/activestorage").start();
require("channels");

require("../src/google_analytics");
require("jquery");
require("jquery-ui");
require("../src/autocomplete-rails");
require("tether");
require("popper.js/dist/umd/popper");
require("bootstrap/dist/js/bootstrap");
require("bootstrap-notify/bootstrap-notify");
require("jquery-mask-plugin");
require("select2/dist/js/select2.full.min");
require("jquery-textcomplete");
require("jquery-match-height");
require("jquery-jscroll");
require("../src/facebook");

require("../src/components/comment");
require("../src/components/discussion");
require("../src/components/follow");
require("../src/components/hashtaggable");
require("../src/components/news_feed");
require("../src/components/preview-img");
require("../src/components/question");
require("../src/components/remote_buttons");
require("../src/components/report");
require("../src/components/search");
require("../src/components/sidebar");
require("../src/components/upvote");
require("../src/components/vote");
require("../src/components/verification");

jQuery.railsAutocomplete.options.delay = 300;
jQuery.railsAutocomplete.options.autoFocus = true;

Answer 1

问题是在jquery之前执行内联脚本。之所以如此，是因为它是在html中内联的，所以它可以立即使用。另一方面，jquery并不是内联的，因此浏览器在执行它之前必须发出请求。

有几种选择。

选项:等待jQuery加载

一种选择是将所有内联代码包装在等待加载jQuery的函数中。

javascript:
  document.addEventListener('DOMContentLoaded', function () {
    var commentId = "#{ params[:comment_id] }";
    if(commentId) {
      var comment = document.getElementById(commentId);
      commment.classList.add('notified');
    }
  }, false);

选项:存根jQuery

另一种选择是创建存根(假) $函数，存储对$的所有调用，等待加载jQuery并重播这些调用。More details here

Answer 2

在您的JavaScript包文件(例如app/javascript/packs/application.js)中，执行以下操作：

import jQuery from 'jquery';

global.$ = global.jQuery = jQuery;