如何在rails 6中添加javascript第三方插件

Question

我知道它很简单，但更新了rails 6. rails 6中有新的语法用于管理由webpacker维护的javascript资产。

//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无法正常工作我已经通过npm安装了jquery和bootstrap

Answer 1

在命令下面运行以添加jQuery。

$ yarn add jquery

在environment.js中添加以下代码

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

在application.js文件中需要jquery。

require('jquery')

不再需要添加jquery-rails gem！

Answer 2

解决jquery第三方插件问题通过yarn添加jquery

yarn add jquery

为了在rails 6应用程序中添加jquery支持，我们首先需要添加以下配置

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

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery' # or if its not work specify path `'jquery/src/jquery'` which node_modules path for jquery
}));

module.exports = environment;

用于导入app/javascripts/packs/application.js中任何与jquery相关的插件

使用以下说明

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