Question

I install my plugin using yarn add jquery-asScrollable. I can now see it in the package.json file:

{
  "name": "test_app",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^3.2.0",
    "coffeescript": "1.12.7",
    "jquery-asScrollable": "^0.4.10"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.11.0"
  }
}

But how do I enable it in my app? I tried importing it like this:

application.js

//= require jquery-asScrollable

packs/application.js

import asScrollable from 'jquery-asScrollable'

But apparently that's not how you do it.

Answer 1

You can only do this if you installed a gem, but i'm not sure if there a gem for this package. So this is wrong you should delete it.

//= require jquery-asScrollable

According to this link, - https://www.npmjs.com/package/jquery-asScrollable jquery-asScrollable requires the latest version of jQuery, jquery-asScollbar.

You can add jQuery to your webpack config by adding a file custom.js to your config/webpack folder:

Here's what my configuration for using Bootstrap 4 looks like:

const webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('bundle.css');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: extractCSS.extract('style-loader', 'css-loader!postcss-loader!sass-loader')
      }
    ]
  },
  plugins: [
    // extractCSS,
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      tether: 'tether',
      Tether: 'tether',
      'window.Tether': 'tether',
    })
  ]
}

After adding the custom.js into the webpack folder, you can add it to the environment.js file like this, this will make it available in the development and production environment. environment.config.merge(customConfig)

But another lazier and easier way to do this, just for your development environment is to look for the CDN of these packages and just add them to your layout/application.html.erb file. Here's the CDN for jquery-asScrollbar for example - https://cdnjs.com/libraries/jquery.scrollbar, copy the link of the version you want, and add it to header section.

If you followed all the instructions and jQuery is already installed. Of course you must have installed tether and jQuery with yarn add jquery tether. You can use jquery-asScrollable by adding const jqueryAsScrollbar = require('jquery-asScrollable') to app/javascript/packs/application.js and then you need to add <%= javascript_pack_tag 'application' %> to rails layouts/application.html.erb

Hope this helps.

Importing a jQuery plugin using Yarn in Rails 5.2

1 个答案: