This is the approach we have in our legacy JS/Coffee files. We are going to use webpacker in one of our projects and we do want to know which solution is best to achieve the same effect.

current.js.coffee

# app/assets/javascripts/application.js

#=require 'foo'


# app/assets/javascripts/foo.coffee

init: ->
  console.log('this is function defined in foo')
  
 @Foo = { foo_func }
 
# app/views/partials/foo_partial.slim
  
  # some code that needs foo script to work.

  javascript:
    Foo.init()
    
#Reason: Load one precompiled JS file (application) on the first page load.
#Then call proper functions, trigger events and DOM listeners ONLY when visiting the proper view.

#Question: What is current best approach to achieve the same thing? (ideally using webpacker, keen to see code snippets)