Search code examples
dexie

Dexie.js: What is the dist/modern directory


Just downloaded Dexie.js-3.2.1.zip. Unlike a previous version I was using, this contains a dist/modern directory. How do files in this directory differ from those in the dist directory?


Solution

  • They are ES2018 compliant and not ES5. The modern subfolder contains one minified and one non-minified version of dexie in the newer ecmascript module format (.mjs) and also contains "modern" syntax that cannot be read by old browsers, such as arrow functions. The latter is how they differ from dexie.mjs directly under dist, which has legacy JS syntax except for the module format. Those under modern has both modern module format and JS syntax.

    If you do not care about Internet Explorer compability, you can choose to use the modern versions but they need to be included differently:

    <script type="module">
      import Dexie from 'path-to-download/dist/modern/dexie.min.mjs';
      const db = new Dexie('myDB');
      ...
    </script>
    

    You can also use import maps:

    <script type="importmap">
    {
      "imports": {
        "dexie": "path-to-download/dist/modern/dexie.min.mjs"
      }
    }
    </script>
    <script type="module">
      import Dexie from 'dexie';
      const db = new Dexie('myDB');
      ...
    </script>
    

    The modern version of dexie is also refered from its package.json so that bundlers such as webpack will find it and get a non-transpiled version of it.

    The benefit of using modern version is smaller size and theoretically faster execution and optimized memory consumption. But I do not think these things matter so much. You would never notice a difference in performance between the legacy and the modern version.