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

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

[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.

[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.