ES6 import vs <script src> in html [duplicate]

Question

I want to know what is the difference between

1- import XLibraryComponent from 'xlibrarycomponent' from ES6

vs the regular way

2- <script src="/X/Libray/Component/path"></script>

I am asking this because I am starting with React, I see that you inject some components doing import X from 'x' and with other components you injected into the html as the second way I post above.

So, what are the differences? and which is the best way?

Answer 1

If you're using actual ES6 modules in a browser (or other environment) that supports them, those are very different. This blog article has a good writeup of the differences.

The ES6 spec includes a number of rules around module loading that allow for modules to be somewhat deferred, to support circular dependencies and some other unusual cases.

The <script src="..."> syntax will include a script file synchronously and evaluate the contents as soon as the file has been loaded.

You cannot use the script src syntax for a real ES6 module, as they are included asynchronously and evaluated only once the module and any dependencies have been loaded.

To support this new case but allow scripts to be included in HTML, a new <module> tag has been introduced, which contains code to be executed asynchronously and supports module dependencies.

Note that none of this applies if you're using RequireJS or a similar module loader polyfill-type solution, since your imports will be turned into calls to the loader. The loader will then create a script tag with the appropriate source and use a system of callbacks to simulate the module loading process.