stefanjudis/dep-1.js

## readme.md

      
    Raw
  

              readme.md
            
          
    How can I ship these files with and (!) without actually bundling them

In a browser that supports es6 modules these files will work out of the box. The browser will make the requests as it understands import.
<html>
  <head>
    <title>ES6 modules tryout</title>
  </head>
  <body>
    <!-- in case ES6 modules are supported -->
    <script src="dist/modules/index.js" type="module"></script>
    <!-- in case ES6 modules aren't support -> fallback to bundle -->
    <script src="dist/bundle.js" nomodule></script>
  </body>
</html>

I'm looking for a build process that creates me:

A bundle that is transpiled for browsers that don't support es6 modules


-> dist/bundle.js (minified and prod ready)


Seperated files for browsers that support es6 modules (served then with preload and H2)


-> dist/modules/index.js (minified and prod ready)
-> dist/modules/dep-1.js (minified and prod ready)
-> dist/modules/dep-2.js (minified and prod ready)


## dep-1.js
import dep2 from './dep-2.js';

export default function() {
  return dep2();
}

## dep-2.js
export default function() {
  return 'Hello World. dependencies loaded.';
}

## index-wip.html
<html>
  <head>
    <title>ES6 modules tryout</title>
    <script>
    function checkJsModulesSupport() {
      // create an empty ES module
      const scriptAsBlob = new Blob([''], {
        type: 'application/javascript'
      });
      const srcObjectURL = URL.createObjectURL(scriptAsBlob);

      // insert the ES module and listen events on it
      const script = document.createElement('script');
      script.type = 'module';
      document.head.appendChild(script);

      // return the loading script Promise
      return new Promise((resolve, reject) => {
        // HELPERS
        let isFulfilled = false;

        function triggerResolve() {
          if (isFulfilled) return;
          isFulfilled = true;

          resolve();
          onFulfill();
        }

        function triggerReject() {
          if (isFulfilled) return;
          isFulfilled = true;

          reject();
          onFulfill();
        }

        function onFulfill() {
          // cleaning
          URL.revokeObjectURL(srcObjectURL);
          script.parentNode.removeChild(script)
        }

        // EVENTS
        script.onload = triggerResolve;
        script.onerror = triggerReject;
        setTimeout(triggerReject, 100); // reject on timeout

        // start loading the script
        script.src = srcObjectURL;
      });
    };

    const deps = [
      './dist/modules/dep-1.js',
      './dist/modules/dep-2.js'
    ];

    checkJsModulesSupport()
      .then(
        () => {
          deps.forEach( dep => {
            let link = document.createElement( 'link' );
            link.rel = 'preload';
            link.as = 'script';
            link.href = dep;
            document.head.appendChild( link );
          } );
        }
      )
      .catch( () => {
        // do nothing!!!
      } );
    </script>

    <!-- in case ES6 modules are supported -->
    <script src="modules/index.js" type="module"></script>
    <!-- in case ES6 modules aren't support -> fallback to bundle -->
    <script src="bundle.js" nomodule defer></script>
  </head>
  <body>
  </body>
</html>

## index.js
import dep1 from './dep-1.js';

function getComponent () {
  var element = document.createElement('div');
  element.innerHTML = dep1();

  return element;
}

document.body.appendChild(getComponent());
	import dep2 from './dep-2.js';

	export default function() {
	return dep2();
	}
	export default function() {
	return 'Hello World. dependencies loaded.';
	}
	<html>
	<head>
	<title>ES6 modules tryout</title>
	<script>
	function checkJsModulesSupport() {
	// create an empty ES module
	const scriptAsBlob = new Blob([''], {
	type: 'application/javascript'
	});
	const srcObjectURL = URL.createObjectURL(scriptAsBlob);

	// insert the ES module and listen events on it
	const script = document.createElement('script');
	script.type = 'module';
	document.head.appendChild(script);

	// return the loading script Promise
	return new Promise((resolve, reject) => {
	// HELPERS
	let isFulfilled = false;

	function triggerResolve() {
	if (isFulfilled) return;
	isFulfilled = true;

	resolve();
	onFulfill();
	}

	function triggerReject() {
	if (isFulfilled) return;
	isFulfilled = true;

	reject();
	onFulfill();
	}

	function onFulfill() {
	// cleaning
	URL.revokeObjectURL(srcObjectURL);
	script.parentNode.removeChild(script)
	}

	// EVENTS
	script.onload = triggerResolve;
	script.onerror = triggerReject;
	setTimeout(triggerReject, 100); // reject on timeout

	// start loading the script
	script.src = srcObjectURL;
	});
	};

	const deps = [
	'./dist/modules/dep-1.js',
	'./dist/modules/dep-2.js'
	];

	checkJsModulesSupport()
	.then(
	() => {
	deps.forEach( dep => {
	let link = document.createElement( 'link' );
	link.rel = 'preload';
	link.as = 'script';
	link.href = dep;
	document.head.appendChild( link );
	} );
	}
	)
	.catch( () => {
	// do nothing!!!
	} );
	</script>

	<!-- in case ES6 modules are supported -->
	<script src="modules/index.js" type="module"></script>
	<!-- in case ES6 modules aren't support -> fallback to bundle -->
	<script src="bundle.js" nomodule defer></script>
	</head>
	<body>
	</body>
	</html>
	import dep1 from './dep-1.js';

	function getComponent () {
	var element = document.createElement('div');
	element.innerHTML = dep1();

	return element;
	}

	document.body.appendChild(getComponent());