Блог

Я изо всех сил стараюсь разбить Webpacker на Rails 6. Я следую руководству здесь, в котором описано, как наилучшим образом добавить тему начальной загрузки в новый проект Rails 6. Все работает нормально при добавлении в библиотеки js через yarn. Затем я добавляю в datepicker-category.js файл, создав папку поставщика в javascripts и вызвав ее с помощью import .

Опять же, все выглядит нормально в отношении компиляции. Я получаю некоторые ошибки в консоли браузера, когда добавляю новые файлы js в папки поставщиков. Поскольку это совершенно новое приложение Rails 6 с довольно простой конфигурацией webpack, я надеюсь, что кто-нибудь сможет пролить свет на мои ограниченные знания интерфейса / jQuery.

Онлайн-учебник, который я читаю: здесь.

Итак, создано приложение Rails 6. Контроллер страниц с индексным представлением. Вот и все.

Package.json

 {
  "name": "touriousity",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.6.0",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "bootstrap": "^4.6.0",
    "bootstrap-select": "^1.13.18",
    "dropzone": "^5.7.6",
    "jquery": "^3.5.1",
    "jquery-ui": "^1.12.1",
    "jquery.cookie": "^1.4.1",
    "leaflet": "^1.7.1",
    "magnific-popup": "^1.1.0",
    "nouislider": "^14.6.3",
    "object-fit-images": "^3.2.4",
    "popper.js": "^1.16.1",
    "prismjs": "^1.23.0",
    "smooth-scroll": "^16.1.3",
    "swiper": "^6.4.11",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}
 

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.

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


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)


import JQuery from 'jquery';
window.jQuery = $;
window.$ = $;

import "popper.js";
import "bootstrap";
import "bootstrap-select";
import "dropzone";
import "jquery.cookie";
import "leaflet";
import "magnific-popup";
import "nouislider";
import "object-fit-images";
import "prismjs";
import "smooth-scroll";
import "swiper";


import "../vendor/datepicker-category"
import "../vendor/datepicker-detail"
import "../vendor/forms-dropzone"
import "../vendor/map-category"
import "../vendor/map-detail"
import "../vendor/map-layers"
import "../vendor/theme"
 

environment.js

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

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend(
  "Provide",
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ["popper.js", "default"] // for Bootstrap 4
  })
);

module.exports = environment
 

Изображения ошибок в браузере прилагаются. Миллион благодарностей.

Вы пробовали обновить jQuery до последней версии? Я столкнулся с аналогичной проблемой и смог решить ее только путем обновления до версии 3.6.0.