Menu icon Foundation
The right place for custom Javascript

Hi there

I just created my very first 6.4 project an I notice that JS handling has changed a lot. Now I'm wondering where's the right place to put my own script sind src/assets/js/myscripts.js isn't automatically included to app.js anymore. :-/

At the moment I'm writing my script in src/assets/js/app.js after $(document).foundation(); but it feels wrong.

Is there anybody able to help? I don't have any experiene with webpack so far...

Greetings from Switzerland

Ralph

javascriptfoundation 4.6

Hi there

I just created my very first 6.4 project an I notice that JS handling has changed a lot. Now I'm wondering where's the right place to put my own script sind src/assets/js/myscripts.js isn't automatically included to app.js anymore. :-/

At the moment I'm writing my script in src/assets/js/app.js after $(document).foundation(); but it feels wrong.

Is there anybody able to help? I don't have any experiene with webpack so far...

Greetings from Switzerland

Ralph

This post has been closed. No new replies can be added.

Rafi Benkual over 2 years ago

This discussion might help you: http://foundation.zurb.com/forum/posts/53597-please-help-installing-font-awesome

All of Foundation's plugins ship both as importable ES2016 modules, and as individual precompiled "drop in" files, named `foundation.tabs.js`, `foundation.accordion.js`, and so on. These files are also combined into one big file called `foundation.js`, which allows you to get every plugin at once.  The precompiled files live in the `dist` folder, while the importable modules live in the `src` folder.

 If you're not familiar with module bundling, you'll probably want to reference the precompiled files from `dist`.

Ralph Bolliger over 2 years ago

I‘m not sure if you got me right. It‘s not about Foundation plugins. It‘s about my very own JS code I write. In < 6.4 I was able to store all my scripts in a file in src/assets/js/custom.js for example. This was packed in app.js at the end. Since 6.4 gulp doesn‘t touch this file anymore.

I’ve got no experience with WebPack, but can I define input files somewhere as it is described in WebPack Docs?

Michal Pandyra over 2 years ago

Hi Ralph,

Ideally, you'd be writing your custom code in app.js file where the "$(document).foundation();" declaration lives. Personally, whenever I use jQuery I expand this to:

$(document).foundation().ready( function() {
  // Javascript logic starts here.
});

If, however, you're writing code independent of Foundation and jQuery and want to create your own file for whatever nafarious purposes, you can create "custom.js" in your "/src/assets/js" folder, like you have in the past.

WebPack uses an "entries" variable defined in config.yml when its run. You could include a new item in the list, as follows:

PATHS:
  entries:
    - "src/assets/js/app.js"
    - "src/assets/js/custom.js"

This will actually output a separate "custom.js" file in "/dist/assets/js/" with all of your code packed/minified 

If, however, you want to maintain a singular codebase and include all of your custom code in "app.js" then the solution would be to write it in "app.js" directly (as mentioned above) or maintain a separate file "custom.js" and import it as a WebPack module using something like:

import widget from 'custom';

 

This would load the object exported by your "custom.js" file into a variable called "widget". This variable can then be made globally accessible by defining it within the scope of the "window" object (window.MyAwesomeWidget = widget)