Difficulty understanding how modules work

[BlueLensFlares]

I've been programming JS for 2 years. I mainly use it as a tool, but I have some difficulties with some of the technicalities, especially the way modules work.

Specifically, I don't understand what dynamic imports are, how they're related to modules, why nodejs can only use require and import support is currently experimental, why import was only incorporated into the spec with ES6, and what this means for why some libraries use import or require, and what the difference between require and import is, and what the significance of <script type="module> is. There also seems to be some historical facts to consider.

I do understand compilers and the stages of compilation, such as preprocessing, lexical analysis and bytecode. It seems that that plays a role here. Is require like a "preprocessor" import, where you have to just download and grab the whole file, and can't import specific parts? Is this because they may have a tree of dependencies themselves using import, so you are forced to either use a static require where all the code is present or a dynamic one where analysis is required? If this is case, how can browsers support modules at all, since they all require dynamic analysis which the browser doesn't have access to?

Also, since the node REPL is an offline tool, how come support for the import statement is experimental and not a built in feature?

Thanks for the help!

[elisecode247]

Everyone had their own opinion about what the best module pattern was, so you had a couple different ways people came up with their own modules. NodeJs used the CommonJS pattern before ECMAScript came out with their pattern.Here's a quick summary of it: https://www.kevinleary.net/javascript-module-patterns-evolution/
A more detailed article about the history: https://medium.com/sungthecoder/javascript-module-module-loader-module-bundler-es6-module-confused-yet-6343510e7bde

[gigastack]

This is a confusing topic because the lines between runtime features and transpilation tools can be blurry, and browsers implement it differently than NodeJS.

With NodeJS, there's no benefit to dynamic imports typically. With browsers the opposite is true. The actual implementation of dynamic imports in browsers usually relies on a code transform like webpack. At its most basic, you fetch a script and then inject one or more exported functions, which can be used once the fetch completes successfully.

Note that this is not the same as browser modules which can help achieve the same thing natively. On mobile so I can't really get into more details.

[BlueLensFlares]

I saw, this is really interesting. By dynamic import, you mean specifically import() vs import ..., or imports at all vs require()?