Develop Reference

How to properly import JS and CSS files in Webpacker?

I installed Webpacker gem into my Rails app and have difficulties to import JS and CSS files from assets folder to app/javascript/packs folder.
I'm mentioning that app/javascript/packs/application.js looks like this:
/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb
console.log('Hello World from Webpacker')
and it works properly(in console I get this "Hello World.." text.)
I tried to copy, for example jquery.slimmenu.js into packs folder and to include it like this:
//= require jquery.slimmenu.js
but it's not finding in console, there is just application.js and bunch of 404 not find JS and CSS files

your main.js file can be in any directory in app/javascript
for example, create app/javascript/components
then add in your application.js
import 'jquery'
require("../components/main");
then in your HTML add
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
and script from application.js must be loaded

How to import javascript files from the same directory as a Rails view

How can I precompile and import a javascript file, while keeping it in the same folder as the views its associated with?
For example, I'd like to keep companies.js inside the same /view directory as my other company views
For example:
/app/views/companies/_form.html.erb
/app/views/companies/index.html.erb
/app/views/companies/new.html.erb
/app/views/companies/edit.html.erb
/app/views/companies/companies.js <--- like this
This allows better organization than a large number of javascript files in /app/assets/javascripts/.
I've seen it done before, but I've been unable to replicate it now.
Using <% javascript_include_tag 'companies' %> tries to find the file in /assets/javascripts/.

Try change the manifest file in app/assets/config/manifest.js to compile .js in view's folders.
E.g
//= link_directory ../javascripts .js
add this with the path to your view folder

Rails asset pipeline require from public folder?

Is this a good practice to require assets located under public folder? e.g. I have lots of javascript under public/mythirdparyjs folder and I want to make these javascript files available for only specific page, what will be the best way to do this?

Thirdparty js files should be in your vendor folder. Once you precompile them for production they will be then moved into your public folder automagically. To call certain files on specific pages you need to remove the require_tree directive and also pay attention to which files are called in your application.js asset file. At the bottom of every view page (html.erb) you can add the following to run only page specific js:
<%= content_for :javascript do %>
<script type='text/javascript'>
YOUR FUNCTIONS HERE
</script>
<% end %>
Then in your application/layout view at the bottom before the closing body tag you should add:
<%= javascript_include_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.js"] %>
<%=yield :javascript %>
This will then run any js on a page by page view basis and include any require statements for any files in the corresponding controller's js asset file.
UPDATE to address comment: If you have a gem you installed and then need to require certain js files, these should be required from your app/assets/javascripts folder in either the application.js file (if you want that gem to be usable throughout your application) or in the controller specific js file if you only need that functionality on a few pages. For example, the angular gem is probably used throughout your application so you would add the //=require statement to the application.js file in your app/assets/javascripts folder. If you manually download some js libraries you should put them in the vendor/javascripts folder however you still require them in your app/assets/javascripts folder files wherever needed.

javascript_include_tag not working

i'm using a javascript_include_tag in one of my 'partial' rhtml files. yet, when the page loads, I get an error in firebug saying that the class included in the javascript file was not defined. Basically, the javascript file is not getting added. I have kept the js file in the public/javascripts folder
Please help

First, what version of rails are you running? I know with my version of rails(3.1.1) the javascript_include_tag defaults to the app/assets/javascript directory not the public/javascripts folder. Placing files in the assets/javascript folder should allow you to properly link to them in a similar fashion.
This will include all js files residing in the assets/javascript folder and should already be at the top of your views/layout/application.html.erb file.
<%= javascript_include_tag "application" %>
Also any subdirectories will be included by the above tag. Hope this helps.

Load order with javascript_include_tag :all

So I've recently started to include quite a few .js files in to my web application and some of them depend on each other so load order is important.
However rails caching just seems to load a all.js file with no particular order to the files.
What's a good way to solve this issue?

You can do as follows
First, load the default JavaScript files.
Then load other scripts in the order that you want
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag "script_1", "script_2", "script_3" %>

The load order depends on your Javascript manifest file. In Rails 3.1 you can go to
app/assets/javascripts/application.js
At the bottom of the file you will see directives for rails how what / how to include files into the Rake pipeline. In the below example, I included a new directive that will include all the files in the directory called "Templates". I also made sure that the Handlebars.js templating file is called before all of the files in the "Templates" directory, otherwise the browser would throw an exception
//= require handlebars
//= require_tree ../templates
//= require_tree .
Hope it helps!

I've been experimenting with the YUILoader Module, it seems pretty nifty, though I am currently frussing about loading up custom modules. It's totally doable, I just couldn't figure it out in 5 mins.
http://developer.yahoo.com/yui/yuiloader/ (YUI2.8.1)
http://developer.yahoo.com/yui/examples/yuiloader/index.html