How can I use this library with no bundling?

[carlosvega]

I'm trying to include this module in as:

<script type="text/javascript" src="/static/vendor/node_modules/vuex-map-fields/dist/index.esm.js"></script>

But afterwards is not possible to use any of the modules and functions.

I know the appropriate way to develop would be to bundle everything together etc and use a different approach but we are dealing with flask assets etc and would like to try this library before changing the JS asset design.

[maoberlehner]

If you target modern browsers you can use ESM.

// I've not tested this, but should work.
import { mapFields } from '/static/vendor/node_modules/vuex-map-fields/dist/index.esm.js';

Otherwise you can use the UMD build.

<script type="text/javascript" src="/static/vendor/node_modules/vuex-map-fields/dist/index.js"></script>
<script>
// I've also not tested this but should work something like this:
const vuexMapFields = window['vuex-map-fields'];
</script>

See: https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm