Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can ES6's module loader also load assets (html/css/...)

ES6's modules are based on a flexible loader architecture (although the standard is not final, so ...).

Does this mean ES6's loader, based on system.js, can load all assets? I.e. CSS, HTML, Images, Text, .. files of any sort?

I ask because I'm starting to use WebComponents & Polymer which have their own HTML import, and implementing them with ES6, which has its own import/loader (system.js).

like image 482
backspaces Avatar asked Jul 24 '14 00:07

backspaces


People also ask

How do I load a module in HTML?

Simply add type="module" to your script tags and the browser will load them as ES Modules. The browser will follow all import paths, downloading and executing each module only once.

Do browsers support ES modules?

Well, it's been a while and now all major browsers support ES Modules. So I'd like to show you the super simple start to ES Modules! Notice the type="module" attribute there. That's all we need to do to inform the browser that the JavaScript code is a "module" rather than a "script".

Which of the following is the correct approach to import the module so that you can execute the modules using an HTML file?

Use any of the following approaches to import the module. To execute both the modules we need to make a html file as shown below and run this in live server. Note that we should use the attribute type="module" in the script tag.


1 Answers

If you use SystemJS then you can load assets by using plugins:

// Will generate a <link> element for my/file.css System.import('my/file.css!')     .then(() => console.log('CSS file loaded')); 

Alternatively, you can use an import statement. This will make sure that the CSS file is loaded before the your script executes:

import 'my/file.css!'; 

Finally, you can retrieve the contents of the file using the text plugin:

import cssContent from 'my/file.css!text'; console.log('CSS file contents: ', cssContent); 

Another option is to add the css as a dependency in JSPM config files. Basically adding the dependency in the specific package .json file and then running 'jspm install' which will add the override to package.js & jspm.config.js

like image 176
urish Avatar answered Sep 20 '22 07:09

urish