JavaScript Modules

david karapetyan on November 23, 2018

My plan of having no babel, webpack, and various other heavyweight tools is starting to hit some walls. They're not insurmountable walls but I've... [Read Full]
markdown guide
 

I can't wait until there is a standard module format.

es6 modules. you already discussed them.

 

That's still in flux and most of the libraries out there are written in something else so there is still a lot of tooling required to recompile and bundle everything.

 

I agree with @nektro , the standard is ES6 modules, it's just that some haven't caught up with it yet. Due also to the inane amount of tooling that was written before and retro-compatibility (many JS libraries still support all the module options under the sun in their shipped code).

I'm optimistic about the future of modules, it's just going to take a little time.

Babel deserves a second look though, because in the future it will be less about translating code (browsers are catching up with native features) and more about allowing people to use "future" features in the present. I find it an interesting project, more than webpack to be honest.

Currently typescript gives me all the future features and rollup handles the bundling. It's working out better than I expected.

I'm talking about these features, like the pipeline operator.

Are they in TypeScript?

Class properties, decorators, default exports/re-exports, namespaces, numeric separators, and a few more are all there.

TypeScript has a few things that are actually not in that list like boilerplate constructors for declaring instance variables and null removal without if checking, e.g.

class A {
  constructor(readonly i?: SomeType) { }
}
const iValue = (new A(123)).i!;

If the pipeline makes it to the standard then it will show up in TypeScript but it is consistently ahead of the standard so I usually get all the nice features before they even end up in the standard.

 

es6 modules are not in flux and there's not need to compile. but older modules that sill use AMD simply expose a global variable instead of using import syntax

If you can get stackedit-js to work with modules without a module loader then let me know.

 

UMD (which the name inclines (Universal)) basically uses all the other standards. This comes with a small downside: the compiled code will be a little bit larger (probably other downsides too, but I have not researched that enough to say much, hehe).

I always compile my code to UMD and set my package.json file to point to the UMD module and set the esnext property to my none-compiled code. This I do especially if I develop a package to be used in both web and node.

One issue though, if using webpack and babel, is that the compiler expects the window object to exist, this can be fixed by setting the output properties globalObject to the following (in webpack.config.js or whatever you name your files!):

globalObject: "typeof self !== 'undefined' ? self : this"
 

If you can, use standard modules (sometimes called es modules). They're built in to the language.

Unfortunately, node isn't quite caught up, and more unfortunately still, they'll be burdening JavaScript modules with a weird file extension (mjs), even though you can run node with es modules today - sans .mjs

But any ways, you can totally use modules in every major browser today. JavaScript modules aren't another in a proliferation, they're the standard. Use em!

 

JavaScript module is one of the most confusing techniques/methodologies. I had to re-learn it every a couple months or when I need to because there are too many several ways to accomplish the same task, eventually, unlike other stricter language.

Do Rollup and Webpack fall into a broader tool to package js/css/html into these modules?

 

Yes, I'm currently using rollup to compile es6 modules generated by typescript. It's a bit of a mess.

 

You ask such good questions of the code. This was really helpful in helping me understand the module options out there. Looking forward to seeing how your solution develops.

code of conduct - report abuse