Develop Reference

Loading plugins in Webpack for a static website

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

Javascript project structure for dev and production using npm and grunt

I am trying to structure javascript files in a project. I have used NPM to manage the modules and planning to use Grunt to concatenate and compress the js and css files for deployment.
I am currently using the following structure
-[project root]
-- [node modules] :packages such as requirejs, jquery, semantic-ui etc using npm
--[war]
---[Dev]
----[css] multiple css files from modules (Question 2:?)
----[js] multiple js files from modeuls (Question 2:?)
- Gruntfile.js :for concatenate and compress
---[Production] -
----[css]:This is where the compressed and concatenated css files are kept
----[js] :This is where the compressed and concatenated js files are kept
Question 1: Is the above approach to structure the project correct ? Any other recommendations which allows to manage the packages, dev and production files.
Question 2: Can NPM or another tool allows me to pick up the js and css files from the [node modules] folder and place them to (dev>>css or dev>>js) folder ? If am doing this manually how do I track the versions ? Seems like I am missing something here, there must be a better solution.
Suggestions/recommendations/comments are much appreciated.
Thanks

The question is a bit too wide for SO format, but in general your structure is good. Instead of copying files from node_modules, you have your own JavaScript files under js and you import/require them to your own files.
//foo.js
//ES6 style imports
import {Foo as Bar} from "biz";
//Common JS style requires
var Bar = require("biz");
//AMD style requires
require(["biz"], function (Bar) {
If you want to use your node_modules in a browser, you'll want to bundle them using Browserify, Webpack, Rollup or similar. To automate this, you can easily use Grunt tasks such as grunt-browserify together with grunt-watch.
Same applies for your CSS files: You store your own files under css and if you need CSS files from node_modules you can import them to your own files: if you are using some preprocessor (such as SASS or LESS), the preprocessors usually inline your imports when building the .css-file. If you are just using plain .css files, see grunt-css-import for example.

Why does r.js combine and minify JS, then copy all the files to output dir?

I've been working with the RequireJS optimizer to create multiple optimized JS files for my project and have come across a problem that I’ve found mentioned in other posts but have not found a solution for.
When using r.js to optimized a single file, it pulls all the JS dependency into single file and drops it into the file specified by the “out” property in the build file. However, when trying to create two optimized files (i.e. multipage project using the ‘modules’ property), r.js creates two nicely optimized files but then drops ALL folders and files from the appDir into the output directory. That is, it pulls together and minifies all JS dependencies but then copies the individual files into the output directory.
I realize that r.js is not intended to be a deployment tool so is this by design or is there a way to tell r.js to not copy dependent files and directories into the output directory.

Yes, in your r.js build file, set the removeCombined option to true in order to preserve only the modules you specified to the output location.
{
...
//If set to true, any files that were combined into a build bundle will be
//removed from the output folder.
removeCombined: true,
...
}
See the r.js documentation's example build file.

How to use webshim with assetic in a Symfony2 project?

I would like to use Webshim in a Symfony2 project.
So far, the webshim library is in mybundle/Resources/public/components/webshim...
The webshim library has a polyfiller.js that loads specified scripts from the ./shims directory. This is also clearly explained from the webshim docs:
The code inside of the polyfiller.js automatically detects the path to the script it is run from and assumes, that the shims folder is in the same directory. This means, you have to make sure, that either the shims folder is placed parallel to the code of the polyfiller.js or to configure the path using the basePath option.
I'm using other libraries and they all end in the /web/js or /web/css directories as they should do. They are combined and have names like "6464de0.js" and are perfectly accessible.
But, webshim tries to load scripts from the shims folder. This makes sense when you look at the docs.
This is an example of 404's in the console:
GET http://domain.dev/app_dev.php/js/shims/combos/1.js 404 (Not Found)
How can I make the webshim library work with assetic?

I have the same issue and here is what I did:
Put the 'shims' folder in the public folder of your desired bundle (eg. AcmeBundle/Resources/public/js/shims) then when you do assets:install using the console command it will be installed in the Symfony/web directory.
Then set the webshim option so that it points to that path:
webshim.setOptions('basePath', '/bundles/acme/js/shims/');

RequireJs minifcation - complex directory structure

we have a problem at work, we are using require js but our folder structure is a bit different,
we have the following:
--js folder
--Folder
---some base js files
-Folder
---main
--src
---require.js
--- require JS modules
--plugin js files
--more js files
We would like to minify all these JS files to a SINGLe js file for production as such
---js folder
--min-all.js
Is this possible?
if so how? ..
Any help would be appreciated!
Thanks!
I just thought I would clarify that the other Folders contain standard non modular javascript files, they can be a mix of plugins or simple javascript helpers.

The short answer is: yes, RequireJS can do this.
Basically, you will need to create one JS file that requires all of the resources that you want minified. Then you will point the optimizer at that file and it will mash them all together.
require(["one", "../another/two", "folder/three", "folder/inner/four" ... ]);
If that file was called myfile.js, you would run the optimizer with similar parameters to this:
node r.js -o name=myfile out=optimized.js
If you have libraries or other files that you do not want included into the final optimized file, you would use the excludeShallow flag. e.g.
node r.js -o name=myfile out=optimized.js excludeShallow=jquery.min
There are more options so you should check out their optimization documentation if you haven't yet.