Import-For-Web shines when employed with multi-page application systems

Available import statement syntax

Source: MDN

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { default as alias } from "module-name";
import { export1, export2 } from "module-name";
import { export1, export2 as alias2, /* … */ } from "module-name";
import { "string name" as alias } from "module-name";
import defaultExport, { export1, /* … */ } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

Supported import statement syntax by I4W

There are four forms of the import declarations. Import-For-Web currently supports two: Named and Default import declarations.

import defaultExport from "module-name";
import { export1 } from "module-name";
import { export1, export2, /* ...and many more */ } from "module-name";

Supported export statement syntax by I4W

export default somethingToExport;
export { first_thingToExport, second_thingToExport, /* ...and many more */ };

Examples

// /src/modules/module-1.js
const add = (a, b)=> a + b;
export { add };    

// /src/modules/module-2.js
const sub = (a, b)=> a - b;
export default sub;    

// /src/modules/index.js

//<@imports>
import { add } from "./module-1"
import sub from "./module-2"
//</>

consol.log(add(8,9) - sub(6,3));

export { add, sub };    

What Actually Happens

In the above codes, export and export default are transpiled into I4W.export =. I4W.export is a setter which stores expoted values into an object where they can be accessed by other modules via the import statements.
In betwewn the imports tag: //<@imports> and //</> is where Import-For-Web looks for import declarations. import is transpiled into const, from is transpiled into = and "module_name" is transpiled into I4W.require('/modules/project_name@project_version/filename.js')

Assuming the package.json file as:

// /package.json
{
    "name": "my_app",
    "version": "1.0.0",
    "main": "src/modules/index.js"
}    

The transpiled form of the example codes above are:

// dist/modules/module-1.js
I4W.pathname = '/modules/[email protected]/module-1.js'
!function(){
    const add = (a, b)=> a + b;
    I4W.export = { add };  
}();  

// dist/modules/module-2.js
I4W.pathname = '/modules/[email protected]/module-2.js'
!function(){
    const sub = (a, b)=> a - b;
    I4W.export = sub;  
}();  

// dist/modules/index.js


I4W.pathname = '/modules/[email protected]'; // Excludes the filename since this file is referenced as the main field in the package.json

// Include statements sets up the dependencies of the module
I4W.include('/modules/[email protected]/module-1.js')
I4W.include('/modules/[email protected]/module-2.js')

//Setting onload callback starts loading all dependencies asynchronously and in parrallel
// All dependencies must be loaded before the onload() callback will execute.
I4W.onload = function(){
    const { add } = I4W.require('/modules/[email protected]/module-1.js');
    const sub = I4W.require('/modules/[email protected]/module-2.js');

    consol.log(add(8,9) - sub(6,3));

    I4W.export = { add, sub }; 
}

NOTICE: Did you observe how each file includes the current version of the project? This makes it easy to either upgrade to newer versions or downgrade to older versions of your project modules cached by users' browsers.You can also upgarde or downgrade some few modeles instead by keeping both versions of your project.

Rules

• import statements must be surrounded with an imports tag: //<@imports> and //</>
• Only codes in the /src/modules folder shall be transpiled, bundled and minified by I4W.
• Output files are stored in dist/modules folder.