添加jQuery rails 6.1

Question

我试图在rails 6.1中设置jQuery，但是我遇到了错误，但我相信它的设置是正确的。

我做了以下工作：

yarn add jquery添加了

2在config/webpack/environments.js，我有

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

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

environment.loaders.prepend('erb', erb);
module.exports = environment;

1. In packs/application.js I有以下

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import 'core-js/stable'
import 'regenerator-runtime/runtime'

import Rails from '@rails/ujs';
import Turbolinks from 'turbolinks';
import * as ActiveStorage from '@rails/activestorage';
import 'channels';

Rails.start();
Turbolinks.start();
ActiveStorage.start();

import('jquery');
import('./main.js');
import('./lib_ext.js');
import('./dialog.js');
import('./widgets.js');
import('./classes.js');
import('./payroll.js');
import('./account_context_menu.js');
import('./plan_table.js');
import('./requirements.js');
import('./help.js');
import('./help_data.js');
import('./scripts.js');
import('./additional.js');
import('./effects.js');
import('./consolidated_orders');
import('./sales_invoices.js');
import('./journals/auto_reversal.js');
import('./budgets/new.js');
import('./budgets/export.js');

import('../stylesheets/application.scss');
const images = require.context('../images', true)

这是我所犯的错误

​

例如，requrements.js中的错误是针对这一行ReqWorksOrder.prototype = {

​

​

这里的任何帮助都会很好。

这是我的package.json

    "jquery": "^3.6.0",
    "jquery-confirm": "^3.3.4",
    "jquery-debounced-and-throttled-resize": "^1.0.1",
    "jquery-powertip": "^1.3.1",
    "jquery-treegrid-webpack": "^0.0.2",
    "jquery-treetable": "^3.2.0-1",
    "jquery-ui": "^1.12.1",
    "jquery-ui-touch-punch": "^0.2.3",
    "jquery.customSelect": "^0.5.2",
    "jquery.scrollto": "^2.1.3",
    "jquery.ui.widget": "^1.10.3",
    "jstree": "^3.3.11",

Answer 1

添加以包含代码块作为答案：

在我的工作系统中，这是我的config/webpack/environment.js

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

// Older Rails6/Yarn
const webpack = require('webpack')
environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', '@popperjs/core', 'default']
    })
)

// Newer Rails6/Yarn
environment.loaders.append('expose', {
    test: require.resolve('jquery'),
    loader: 'expose-loader',
    options: {
        exposes: ['$', 'jquery'],
    }
});

module.exports = environment;

你能试试看它是否有用吗？