Использование Webpacker с jQuery без дублирования кода

Question

Я хочу создать проект Rails 5 без использования фреймворка, такого как React. Но я хочу использовать jQuery и Yarn с jQuery для управления своими зависимостями.

Документация Webpacker иллюстрирует использование с такой инфраструктурой, как React:

 rails new myapp --webpack=react

app/javascript:
  ├── packs:
  │ 
  │   └── application.js
  └── src:
  │   └── application.css
  └── images:
      └── logo.svg 

<%= javascript_pack_tag 'application' %>

./bin/webpack and ./bin/webpack-dev-server

Я нашел документацию, иллюстрирующую, как использовать ее с jQuery и rails-ujs. Но он использует и Webpacker, и конвейер активов, что для меня не имеет смысла:

yarn add jquery
rails yarn:install
gem 'jquery-rails'
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
rails webpacker:install

'yarn add' добавит jQuery в глобальный кеш Yarn:

$ yarn cache list | grep jquery
jquery  3.4.0 npm https://registry.yarnpkg.com/jquery/-/jquery-3.4.0.tgz#8de513fa0fa4b2c7d2e48a530e26f0596936efdf

Так зачем нам снова устанавливать jQuery через Rails? Это крайнее дублирование кода здесь. Смысл использования Yarn состоял в том, чтобы избегать управления драгоценными камнями через Ruby напрямую.

Answer 1

Вы правы, это не имеет смысла.

//= require jquery не работает для webpackER.

yarn add добавит пакет к node_modules, вы можете увидеть этиперечислены в вашем package.json файле.

Попробуйте добавить следующие пакеты с yarn add:

• https://www.npmjs.com/package/jquery
• https://www.npmjs.com/package/jquery-ujs (обратите внимание на тире, НЕ _)
• https://www.npmjs.com/package/turbolinks

Затем в application.js или другом файле в /packs:

import 'jquery';
import 'jquery-ujs';
var Turbolinks = require("turbolinks");
Turbolinks.start(); // https://www.npmjs.com/package/turbolinks#installation-using-npm

Это должно привести вас к точке, в которой все библиотеки работают так же, как и в конвейере ресурсов.