Install every module/library/script/tool/helper — whatever you want with npm. This project uses rollup with some plugins to make all those awesome tools usable for your browser/frontend. Then just use the new ES2015-modules import-syntax and you are all set. Have a look at the included modules for fontloading and using breakpoints in your JavaScript.
For JavaScript it’s the same as with Sass: there is one main-file, that will be loaded as the entry-point for all your JavaScript, include all your other modules from there.
A very basic sample is provided in the folder ./src/js/.
The recommended way would be to create your own modules, document them and throw them on npm. If this is not feasible, just create a file in ./src/js/modules/ with the name of your module, for example somemodule.js
To keep things consistent throughout the project I would recommend one simple rule:
One module, one file, one function
Meaning: every module should get its own file (e.g. in /src/js/modules/somemodule.js), the module should have the same filename as the exported function, and there should be only ever one function, that said module exports.
With ES6 this could look like this:
// use ES2015 modules to import other stuff you might need
import stuff from 'othermodule';
// those two vars will be used in your module, but won't be exported
const wontBeExported = () => { ... };
const wontBeExportedEither = 12;
// that's the function this module will export
export default () => {
// do stuff...
return 'sth'; // if needed
};If you have to export multiple, similar functions that should live in one module, you can do so with the new ES6-modules, but I would advise to stick to the pattern above, and then just do sth. like:
export default () => {
...
// using new ES6 Enhanced Object Literals to export multiple functions
return {
funcOne () {
console.log('fuck yeah');
},
funcTwo () {
console.log('this is nice');
}
};
};
This way you can throw similar functions into one module, and use it like this:
import someModule from './modules/somemodule';
someModule().funcOne();
someModule().funcTwo();The idea is: don’t make me think. And this way I just have to remember that I will always get one function if I import sth.
Keep your modules as short, concise and reusable as possible and refactor all the time :)
Since ES6 is here to stay: use it. You still can write ‘normal’ JavaScript, but I really recommend to check some of the new features out. Though there are features that are not well supported, I recommend only those, that can be easily transpiled with babel.js and don’t require a polyfill:
For more information refer to the Learn ES2015 page on babeljs.io. If you want to use ‘advanced’ features like WeakMap etc., you have to use the polyfill from babel.
If you want to use promises this package includes es6-promise to include a fallback for IE<=11.
For general “somebody wants a simple website with carousels and stuff” I hereby recommend some plugins to save some time:
For an insane list of awesome stuff, have a look at those two lists: https://github.com/sorrycc/awesome-javascript and https://github.com/sindresorhus/awesome.