Differential Serving Loader

• Differential Serving Loader
  • General Info
  • Example of the .assets.json file
  • Usage
    • Use prebuilt bundle
      • 1. Install
      • 2. Download
    • Build yourself
      • 1. Install with dependencies
      • 2. Clone/download
  • CHANGELOG
  • LICENSE

General Info

IMPORTANT: This is only to be used in development!

The problem: When having two transpilation configs for Webpack (i.e. differential serving: modern/es6 and legacy/es5), webpack plugins being used to load javascript into HTML, together with html-webpack-plugin, can be used only with one configuration (either main or legacy). The same stands for the manipulation with htmlWebpackPlugin.files.js. Therefore this seems to be the only solution for now.

This project is created to work with abstraction, but if you produce a valid .assets.json (built with assets-webpack-plugin, see an example below) and have it running on the same server as the page, it should work with any setup.

It contains test/abstraction.dsl.js and test/abstraction.dsl.min.js files. When you include one of them in HTML, it will read .assets.json for the information about javascripts, produced with the bundler, and load found bundles the "module/nomodule" way. Modern bundles should have mjs and the legacy js extension, for it to work properly. Files with .mjs extension will be loaded with type="module" and .js files with nomodule defer attributes. This way, all produced javascripts are present in the index.html, and the page can be tested on modern and legacy browsers at the same time, during development.

There is also a Safari 10.1 nomodule fix, if required.

NOTE: Since this bundle runs in browser and can't read files on your disk, it uses fetch to read the .json file. Therefore .assets.json has to run on the same server as the page. All required polyfills, including whatwg-fetch are bundled, to support legacy browsers, and the file is quite large.

Example of the .assets.json file

This is an example of the .assets.json file being used with this setup, that can be found in the "test" folder:

NOTE: Comments are not valid in .json, they are here just for info!

{
   "index": { // Page
      "js": "assets/index.es5.js", // nomodule bundle
      "mjs": "assets/index.mjs" // module bundle
   },

   "homepage": {  // Page
      "js": "assets/homepage.es5.js", // nomodule bundle
      "mjs": "assets/homepage.mjs" // module bundle
   }
}

Usage

Do not use it as a webpack entry, you should include it in HTML another way.

Use prebuilt bundle

There are two ways to use it: install or download.

1. Install

Install this package without dependencies and use files from node_modules:

npm i -D --omit=optional @v1ggs/abstraction-dsl

// This is how you can get it with JS
const path = require('path');
const absDSL = path.resolve(
   process.cwd(),
   'node_modules',
   '@v1ggs',
   'abstraction-dsl',
   'test',
   // minified bundle
   'abstraction.dsl.min.js',
);

2. Download

Download either test/abstraction.dsl.js or test/abstraction.dsl.min.js and include it in HTML:

<script src="/path/to/abstraction.dsl.js"></script>

Before using prebuilt bundle, make sure you have a valid .assets.json (see example above) running on the same server as your HTML page, at the root, e.g. localhost:8080/.assets.json. You achieve that using your bundler.

Build yourself

There are two ways to build it: install or clone/download.

1. Install with dependencies

npm i -D --include=optional @v1ggs/abstraction-dsl

Create .abstraction.dsl.config.js file in the root dir, where package.json file is.

This is what the default config looks like:

// .abstraction.dsl.config.js

module.exports = {
   // dist dir (root-relative)
   dist: 'test',

   // This is where this bundle will look for `assetsJson`.
   // A path, relative to the site root (w/o a leading slash):
   // e.g. `assetsJson: 'somedir/.assets.json'` will be loaded from
   // `http://localhost:8080/somedir/.assets.json`.
   assetsJsonUrl: '.assets.json',

   // Built file's name: if you change this, you have to change it
   // in `test/index.html` as well.
   fileName: 'abstraction.dsl.js',
};

Build:

# Build the package
npx bdsl

# Minify the package
npx mdsl

2. Clone/download

git clone https://github.com/v1ggs/abstraction-dsl

Navigate in the terminal to this folder and install dependencies:

# install dependencies
npm i

Config file .abstraction.dsl.config.js is already there, just modify it.

Build:

# produce the bundle
npm start

# minify the bundle
npm run min

# open the test page in browser
# use CTRL-C to stop the server
npm test

CHANGELOG

CHANGELOG

LICENSE

MIT