It depends on the project, however for a static website, I start out with
package.json for my build pipelinemake.js from other projects, like my websitepackage.json (like glob, fs-extra, etc.)tsconfig.jsonI mostly use Parcel, Pug, SCSS and (only if I cannot find a way around) TypeScript. Since the above steps are mostly the same all the time, I started fiddling with a boilerplate project, which allows me to have a light configuration and executes the above steps automatically.
For web apps, it's pretty similar, except that I use WebPack instead of Parcel for it's configurability. Also, I add Handlebars for my WebComponents. Lately, I actually want to ditch HBS, at least in favor of Pug, so that I reduce the number of languages, but I'd also love to give (P)React a try as a renderer inside my WebComponents (anyone has any experience with that?). Also, I am mostly using attributes for communication between the main app and components, however, especially for very dynamic apps, I'd like to try Flux instead, because a central storage seems more stable and faster than involving the DOM all over the place.
For my WebComponents, I use a custom base class, by the way, which makes the usage a lot easier. I don't think I have any public repositories using it, so I made a gist 🙂 The usage is:

enum EMySpanAttributes {
COLOR = 'color',
}
class MySpan extends BaseElement {
// automatically re-render when any of the included attributes change
static get observedAttributes(): string[] {
return [EMySpanAttributes.COLOR];
}
// render-code goes here
async render() {
const color = this.getAttribute(EMySpanAttributes.COLOR) ?? 'red';
const spanEle = document.createElement('span');
// copy over the inner text from the wrapper element
spanEle.innerText = this.innerText;
// convenience methods for drawing, querying, etc.
// You really want to put these into a template file and a separate stylesheet, though!
this.draw(spanEle.outerHTML, `span { color: ${color}; }`);
}
}
// And tag registration is also safe!
MySpan.registerTag('my-component');
Marco Alka
Software Engineer, Technical Consultant & Mentor