Как добавить JavaScript сторонний плагин в рельсы 6

Question

Я знаю, что это просто, но с обновлением rails 6. В rails 6 появился новый синтаксис для управления активами javascript, который поддерживается webpacker.

//application.js
require("@rails/ujs") //.start()
require("turbolinks").start()
require("@rails/activestorage").start()
require('jquery').start()
require('jquery_ujs').start()
require('bootstrap-daterangepicker').start()
require("custom/custom").start()
require("bootstrap").start()
require("channels")

я могу добавить custom/custom но бутстрап и jquery не работает, я должен установить jquery и бутстрап через npm

Answer 1

Запустите команду ниже, чтобы добавить jQuery.

$ yarn add jquery

Добавьте ниже код в config/webpack/environment.js

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

Требовать jquery в файле application.js.

require('jquery')

Больше не нужно добавлять гем jquery-rails!

Answer 2

Чтобы решить проблему с плагином стороннего разработчика jquery, добавьте jquery через пряжу

yarn add jquery

для добавления поддержки jquery в приложение rails 6 сначала нужно добавить конфигурацию ниже

# app/config/webpack/environment.js
const {environment} = require('@rails/webpacker');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}));

module.exports = environment;

для импорта любого плагина, связанного с jquery, в app/javascripts/packs/application.js

используйте ниже инструкции

import 'bootstrap/dist/js/bootstrap';
import 'bootstrap-daterangepicker/daterangepicker'

Answer 3

Видимо expose-loader 1.0.0 имеет другой формат:

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

Answer 4

В webpacker v.6 нет config/webpack/environment.js и другая структура файлов

Во-первых, вам нужно добавить JQuery в свой проект, используя yarn:

      yarn add jquery

После этого вы можете интегрировать JQuery одним из способов:

1. Непосредственно обновить базовую конфигурацию:

      // config/webpack/base.js

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

webpackConfig.
  plugins.
  push(
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  )

module.exports = webpackConfig

2. Используйте настраиваемую конфигурацию и объедините ее с базовой конфигурацией:

      // config/webpack/base.js

const { webpackConfig, merge } = require('@rails/webpacker')
const customConfig = require('./custom')

module.exports = merge(webpackConfig, customConfig)

      // config/webpack/custom.js

const webpack = require('webpack')

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

На мой взгляд второй способ более гибкий

Answer 5

Убедитесь, что yarn установлена ​​и обновлена ​​до последней версии, а затем создайте приложение rails.

Сначала выполните следующую команду, чтобы установить Bootstrap, Jquery и Popper.js

yarn add bootstrap@4.5 jquery popper.js

Вышеупомянутым способом вы можете перейти на последнюю версию Bootstrap.

Если вы откроете файл package.json, вы заметите, что для вас были добавлены Bootstrap 4.5, последняя версия Jquery и последние версии Popper.js.

Затем перейдите в config/webpack/environment.js и внесите поправки в файл.

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

environment.plugins.append("Provide", new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery',

Popper: ['popper.js', 'default']

}))

module.exports = environment

Затем перейдите в app/assets/stylesheets/application.css и внесите изменения в файл, убедитесь, что он требует начальной загрузки.

*= require bootstrap

*= require_tree .

*= require_self

Наконец, перейдите в файл application.js и внесите в него поправки, добавив import 'bootstrap'; чтобы загрузочный javascript работал.

import 'bootstrap';
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()

Сохраните все изменения, перезапустите rails server.

Это должно сработать.