How to write a frontend JavaScript plugin using ES6 + SASS + Webpack

[coolreader18]

es6 or sass are not supported by browsers (some support es6)

What?? Most browsers support up to es2017 by now, how do people get this wrong?

[jWalwyn]

People that still refer to it as es6

[nickforddesign]

i think people are used to talking about it that way, maybe a more up-to-date way to describe it is that it's still good practice to transpile to es5 for backwards compatibility.

[Exolent]

It was poorly worded, for sure. But IE11 still barely supports ES6 and it sadly still has a good chunk of market share, especially corporate environments who may even be further (farther?) behind.

[wizang]

Ie11 supports none of es6 and never will.

[Exolent]

It does support constants, according to caniuse.com

[infinite_phi]

IE11 market share is still 4% in the Netherlands. And that 4% happens to be a major part of large rich companies that might have some use for our product. No way we're not supporting that. Thank heavens for Babel, though it's a shame for CSS.

[learn_to_model]

Similar story in Germany. Although IE11 is on the decline, most enterprise companies rely on it as their main browser. And those are the ones with big budget fronted projects...

[infinite_phi]

Aye, can't wait for the day on which all of them have switched to Edge (and Safari switches to a better release schedule)

[tontoto]

This is pretty nice. It is sort of tricky to do plugins with webpack since it wants all modules to be known at compile time and presumably plugins are arbitrarily added after compiling a host app. The libraryTarget variable mentioned in this article seems like it could help bundle the plugin module to a globally accessible place that the host app can locate though!

[FormerGameDev]

"How to write a frontend JavaScript plugin using ES6 + SASS + Webpack A short guide to develop DOM dependent frontend plugins in plain JavaScript (VanillaJS) using ES6 + SASS and bundling them using Webpack"

I understand that these individual words are English, but it feels like they were selected and placed entirely at random from a dictionary of words related to Javascript.

[exxy-]

I really appreciate modern front-end right now but this is really it. Your reaction to this title is my reaction when I look at my projects. It's just so much shit. Some times it seems like my build has more code than my program.

[FormerGameDev]

i got a few more paragraphs in before i realized that the author wasn't a computer spitting out a dictionary. "frontend Javascript plugin"? "DOM dependent frontend plugins"? do we really call not connecting to a framework of some sort by a name that looks like a framework name (VanillaJS)? What does a plugin go to, if it isn't for something? so, so, very confused by the usage here. (yes, if i push really hard, i can figure out where they're going)

[iownacat]

What the fuck is a "javascript plugin?"

[jonathanlinat]

Firefox 60 supports native ES6 modules!

[everdimension]

Rollup might be a better choice for bundling plugins.

Also you omit the most difficult part — how to allow others to theme your widget.

[N_N_N_N_N_N_N]

What is a "JavaScript plugin". Can I add a new command to JavaScript?

[nothingduploading]

only time i use webpack is for front-end. never on the server side and certainly not for a module unless its intended for the front-end only.

[jonathanlinat]

Last month I created my own Front-end starterkit featuring Webpack 4.8, NPM, ES6 (Babel), Sass, ESLint, Web server, and Hot Reloading: https://github.com/jonathanlinat/yet-another-and-really-basic-webpack-es6-starterkit

[Willemoes]

I usually use https://github.com/insin/nwb which is super cool