Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a unified way to install JS third party libraries (like QuillJS) in Rails 6?

I installed Rails 6 RC1 and I wanted to create a new project with it, however it turn out to a nightmare because of the webpack default feature, am facing a hard time installing third party JS libraries, if you want to add jQuery and bootstrap for example you should do some weird setup in your environment.js like this

environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
        $: 'jquery',
        JQuery: 'jquery',
        jquery: 'jquery',
        Popper: ['popper.js', 'default'], // for Bootstrap 4
    })
)

and if you want to add jQuery-ui you have to search and hopefully you can find some link that show you how like this one

// jquery
import $ from 'jquery';

global.$ = $
global.jQuery = $


require('jquery-ui');

// jquery-ui theme
require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true,    /jquery-ui\.css/ );
require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true,    /jquery-ui\.theme\.css/ );

Now what if you want to add QuillJS ? you might do a research like me and end up in the QuillJS doc which tells you to add :

import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';


Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});


export default Quill;

Just to find out that the QuillJs UI doesn't show up !!

As you see a lot of code just to install 2 or 3 libraries, then I spent a lot of time just searching how to a add things, or how to make the code you already found/added working...

The asset pipeline was a lot easier and fast, why complicate our lives with webpack just because it's the new thing in the JS world ??

Is there any way to just install JS libraries easily ? I prefer to add them manually than to use this webpack thing!

like image 846
medBouzid Avatar asked May 18 '19 11:05

medBouzid


1 Answers

To answer my question... there is no thing such as a "unified way", you can surely create some kind of folder within your javascript folder and download the third-party library you want then import it in your application.js and that's will work fine, But if you are doing this then why using a package manager (Yarn) or webpacker at all?

I wrote an article that explains some few tips about webpack on rails and I explained how you can install and use QuillJS for example... here is the link:

https://medium.com/@technoblogueur/rails-6-and-webpacker-what-you-need-to-know-e3534fded7ff

I will try to find some time and get back to this answer to update it with more code and examples but in the meantime the article above can save your day :)

like image 73
medBouzid Avatar answered Nov 09 '22 08:11

medBouzid