Vuetify: [Feature Request] Add ES module format of ES5 compatible build to dist directory of NPM package

[davidkhess]

Problem to solve

Allows for a cleaner and non-transpiling build and debug environment, is aligned with future direction of ES Module standards and allows tree shaking via Rollup.js+SystemJS which reduces code deployment sizes.

Proposed solution

At the moment, the Vuetify npm package has an es5 directory which appears to have the per-file compiled source code but in CommonJS module format.

I'm proposing to add an additional ES Module format ES5 build to the dist directory. The precedent for this is that Vue itself is now available in an ES Module format:

https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

This means you can do a very clean and future proof deployment of native browser import in code and use Rollup.js+SystemJS to package it together for all browsers. This allows you to avoid the overhead and complexity of transpiling and simplifies debugging.

Some notes from Vue's dist/README.md on this:

CommonJS and ES Module builds are intended for bundlers, therefore we don't provide minified versions for them. You will be responsible for minifying the final bundle yourself.

CommonJS and ES Module builds also preserve raw checks for process.env.NODE_ENV to determine the mode they should run in. You should use appropriate bundler configurations to replace these environment variables in order to control which mode Vue will run in. Replacing process.env.NODE_ENV with string literals also allows minifiers like UglifyJS to completely drop the development-only code blocks, reducing final file size.

Also, more information here:

http://www.syntaxsuccess.com/viewarticle/bundle-angular-esm2015-with-rollup

[davidkhess]

And more info here: https://developers.google.com/web/fundamentals/primers/modules

[KaelWD]

The lib directory is esm, and will be tree-shaken automatically if you use webpack 4 with vuetify-loader. We did also start switching to rollup for the main dist build, but the current setup works great for most people so it isn't a priority.

[davidkhess]

I don't see a lib directory in the npm package. Does it need to be built post-install?

[davidkhess]

Nevermind – I was looking at version 1.2.9. I see it in 1.3.9. Thanks!

[davidkhess]

Well, the lib dir almost works for native ESM import. It doesn't use relative pathname imports like browsers currently require so I can't get very far. So I still think an ESM monolithic build output from rollup in the dist dir would be valuable (like Vue is doing).

In the meantime, I'll just keep using the existing monolithic builds via script tags.

[jberger]

I still can't use the lib directory as an es module because of the use of say ./util/colors rather than ./util/colors.js. With just a few tweaks this seems to be close to just working in the browser directly but sadly it doesn't seem to.

[davidkhess]

Still a need for this. While it may not be currently a priority, shouldn't this issue be open? I don't think the need for this is going to go away even if it is a lower priority.