Loading plugins in Webpack for a static website - javascript

I'm building a static website,
I have downloaded some template just get things started.
There are three main JS files in this template:
jquery.js
plugins.js
functions.js
They are loaded in the index.html file in that order.
I would like to use webpack for production.
I have created a new file: index.js and in that file, used require to load these files
require('jquery.js')
require('plugins.js')
require('functions.js')
This is not working because of probably scope issues, plugins.js for example doesn't know about jquery and so on.
I can move all the plugins from plugins.js to package.json and have it downloaded to node_modules and use it from there, but because it's a static website and just a FE to my app, I don't care much about updates to its packages (and another reason, there are a lot of plugins there...).
How can I make jquery.js and plugins.js symbols to be seen by functions.js?
Thanks

Related

JS, WebPack, Not Dynamically Loading Images Using Phaser3 Beyond Preload Function For IO Game

My attempts at making an IO game is failing, as I can't dynamically load images after I have packed the game using WebPack (a hypothesis). When I lazy load any assets whether it be cross origin or local, it doesn't seem to load and render.
in index.js I have this in phaser's create():
this.load.image('arc_red', 'https://art.pixilart.com/187aec08b8014f7.gif');//testing with this
this.load.once('complete', ()=>{console.log('image loaded!')}, this);
this.load.start();
when I use the preload, it does work. But dynamically it does not. I've been searching for nearly a day straight without any luck.
question:
Is my assumption correct? And if it is, what is a way I can dynamically load images after WebPack has packed the files?
I'm no webpack expert (and depending on the webpack version), but if you are not using a webpack.config, the default behavior is that there should be:
webpack bundle files are placed into the ./dist folder. So to answer your question, any file that is not in this folder is not bundled with webpack
Except if they are "inlined" in the main.js, I think images are not be inlined automatically/without plugin, or atleast in the version I used to use.
dev-server offers an extra folder, where "static" files can be placed, it is ./public(https://webpack.js.org/configuration/dev-server/)
So all files that are served from the dev-server must be in on of those folders.
I would place the images/assets into that ./public folder, and than they should be visible.
Info: I tripped over this once, files placed in ./public folder are accessed, as if they would be in the ./dist folder.

Handling urls of assets compiled by Rails's assets pipeline?

I'm using an external plugin in my rails project. I've placed the css for it inside vendor/assets/styles/pluginName, and the js in vendor/assets/scripts/pluginName. I've added vendor/assets to config.assets.path in application.rb, and I'm requireing the stylesheet and js file for the plugin in application.js and application.css
My question is, vendor/assets/styles/pluginName/styles.css refers to an image foo.png which is located at vendor/assets/styles/pluginName/foo.png. When the assets are pre-compiled, does foo.png remain at the same path, or do i need to do something so the paths don't break?
Reason for asking: Currently, everything works on localhost, but when i deploy and recompile the assets, the plugin's js seems to work, but the images are missing.

Bootstrap 3.1.1: I can't import all the bootstrap .js files, how is "= require" supposed to work?

I am using the latest Bootstrap v3.1.1 Sass.
Within the .zip file, I get
lib, tasks, templates, test and vendor.
I ignored everything and only use the vendor > assets folder.
The assets folder has all the fonts, stylesheets and javascripts I need.
I have gotten the file structure setup properly.
However when I am trying to import .js files from the javascript folder, I am having a bit of a problem.
Unlike the bootstrap.scss file that comes along. I can just uncomment the _.scss file that I need and it will work.
Within the bootstrap.js file, it contains some syntax that I haven't seen before. After a bit of Google, it says 'require' is a nodejs syntax.
I uncommented a few and try to see if they work. However it fails. the .js file I got back is exactly like the above screenshot. It doesn't concatenate modal.js, tooltip.js and popover.js. I did abit of Google, it says I need to have RequireJs?

How to manage CSS and JS files structure in web application (Custom vs plugins)?

I searched over the internet but I could not find an answer to my question. I am just trying to figure out a clean way to structure my CSS and JS files inside my project. Let us say for example I have a CSS folder and I have a custom my.css file and also I have a Scripts folder and I have inside it a myscript.js. I understand that my.css will go in the CSS folder and myscript.js will go under the Scripts folder in this folder setup :
root
css
my.css
Scripts
myscript.js
My question is, if I want to use a jQuery plugin like jstree for example. This library require me to add one js and one css file. Should I keep these files under the Scripts and CSS folder ?
Plan A
root
css
my.css
jstree.css
Scripts
myscript.js
jstree.js
Or should I separate them into a different folder for cleaner structure like this
PLan B
root
css
jstreeFolder ---> jstree.css
my.css
Scripts
jstreFolder ---> jstree.js
myscript.js
Is this structure acceptable? Any standard ways for achieving this ?
Any help is appreciated.
Root
-- styles
|-- your_file.css
-- scripts
|-- your_file.js
-- libs (or plugins)
|-- jquery
|-- jquery-ui
...
I think this structure will be nicer and all the third party libraries (no matter css or javascript libs) that you've chosen should be located under libs directory. It will make maintenance be easier and clear.
For mainentance reasons i prefer another approach. The library jstreee organise the javascript files, css-files and images in a certain way.
/libs/
/jstree/ // <-- folder
/themes/ <-- folder
/default/ <-- folder
style.css
32px.png
jstree.js
jstree.search.js
/other-plugin/
I put everything under libs and in a folder with the name of the library. This way the external dependency of a library is clear and the internal path structure (css files may point to images) of the external library is untouched.

single RequireJS optimizer file for multiple directory project

I'm wondering if it's possible to configure the RequireJS optimizer to fit with our current project structure.
The site directory is structured as below...
root
project1
scripts
main.js
main.min.js
project2
scripts
main.js
main.min.js
project3
scripts
main.js
main.min.js
I was wondering if it's possible to have a "main" file sitting at the root level that will optimize all the child project main.js files and place them within their respective directories. I noticed the multi-page optimizer example on the Requirejs homepage but i'm unsure how to configure that to work for my use case.
Is it just one main.js file per project? I think when I used require js modules, it optimized with this behavior, but in a separate build/distribution directory
see
http://www.bennadel.com/blog/2404-Compiling-Optimizing-A-Subset-Of-A-RequireJS-Application.htm

Categories

Resources