Make dwv importable as an es6 module

[ivmartel]

DWV must be importable as an es6 module (different than current amd). This is needed for its integration in frameworks such as React or Angular2.

Originates from #373, #367 and #363.

[ivmartel]

As of today, es6 modules are only supported natively in Chrome (>=61), Opera (>=48) and Safari (>=10.1): see caniuse.com/#feat=es6-module.

For the others:

• Firefox (55): set dom.moduleScripts.enabled to true in about:config
• Edge (15): set Experimental JavaScript Features to true in about:flags

[mingjuitsai]

Tried to require in Vue with

const dwv = require('dwv');

but getting

Failed to compile.

./node_modules/modernizr/lib/build.js
Module not found: Error: Can't resolve 'generate' in '/Users/mingjuitsai/Sites/mripro/node_modules/modernizr/lib'
 @ ./node_modules/modernizr/lib/build.js 149:2-72
 @ ./node_modules/modernizr/lib/cli.js
 @ ./node_modules/dwv/dist/dwv.min.js
 @ ./src/service/dicomService.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/DicomViewer.vue
 @ ./src/components/DicomViewer.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/Case.vue
 @ ./src/components/Case.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

I'm using vue-cli's webpack template
https://github.com/vuejs-templates/webpack

[BrianMcRails]

Curious what the priority is with this request, I have a react application that I would love to incorporate your viewer in to. Have you tried this already and run in to issues? If so what were the friction areas? Thinking of forking and trying to make it a react component but I’m curious what problems you’ve run into

[ivmartel]

This issue is on hold, not because of frictions, but because I'm waiting for modules to be supported natively on Firefox so that I do not have to compile each time I want to try the code. Seeing that Mozilla is not moving too much on this, I'll maybe have to change my debug browser...
If you can have a look into it that would be cool! I'm happy to help if you have any troubles.

[Doubledream]

Tried to require in Vue with

import dwv from 'dwv';

but failed to compile.

These dependencies were not found:

*  in ./~/dwv/dist/dwv.min.js
* i18nextXHRBackend in ./~/dwv/dist/dwv.min.js
* i18nextBrowserLanguageDetector in ./~/dwv/dist/dwv.min.js

[ivmartel]

Ok, moving up the priority list! The plan is to use import/export everywhere and add a webpack step in the build process to create a browser compatible bundle.

[ivmartel]

A good explanation page on contentful.com: es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling (April 2017).

[ivmartel]

@mingjuitsai, your problem is more related to #467.
@Doubledream, yours is the next one after resolving the modernizr issue and is related to #468.

[ivmartel]

@mingjuitsai & @Doubledream, check out the new dwv-vue repo for an example integration with Vue.js

[ivmartel]

Support update: now on all major browsers apart from IE!
See https://caniuse.com/#feat=es6-module and fundamentals/primers/modules on developers.google.com.

[ivmartel]

Note (to not forget): https://alexomara.com/blog/dual-packages-in-node-js-conditional-exports/