添加 jQuery 导轨 6.1答案

【问题标题】：Adding jQuery rails 6.1添加 jQuery 导轨 6.1
【发布时间】：2021-09-04 23:27:20
【问题描述】：

我正在尝试在 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;

在packs/application.js 我有以下内容

// 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",

【问题讨论】：

顺便说一句，为什么要这样做？如果必须这样做，请使用 rails 5 创建新项目并使用 rails 6（不带 webpacker）创建新项目。然后将 rails 6 项目更改为 rails 5。（例如添加 assets/application.js 等）

标签： javascript jquery node.js ruby-on-rails webpack

【解决方案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;

你可以试试看是否有帮助？

【讨论】：