Auth0.js: Publish a build in ES6 module format

[analytik]

Hi and thanks for the contributions to the JWT ecosystem.

I'm working on a project that targets only modern browsers (or, well, as of time of writing, bleeding edge features), and I would like to include your library as an ES6 module, e.g. putting something this in my html file:

<script type='module' src='vendor/auth0.min.module.js'></script>

Using Angular 4, Auth0 8.8.0, when I require the file either from your CDN, or from the npm package's build folder, if I try to include the minified file now, I get an error along the lines of "k is undefined".

To enable modules in browsers, for Firefox 54+ - go to about:config and set dom.moduleScripts.enabled to true. Using Chrome 60+ - go to chrome://flags and enable Experimental Web Platform features.

I might provide a sample later, but I suspect the issue can be solved by just configuring your build process to run webpack and create an ES6 module as a target? (I don't have experience with WebPack sadly.) Thanks!

[luisrudge]

Can you send a PR to make this happen? I'll review it and merge if you do, but we have other priorities right now and we can't commit to this in the near future.

[analytik]

Hrm, seems like Webpack does not export to ES6 modules yet.

I didn't submit a PR, as I don't have a clean solution, but this work for me - by creating rollup.config.js with

import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
    entry: 'build/auth0.js',
    dest: 'build/auth0-8.8.0.module.js',
    plugins: [
        nodeResolve({
            jsnext: true,
            main: true
        }),
        commonjs()
    ],
    format: 'es'
}

and then running npx rollup -c and et voilà, it works.

[luisrudge]

That's pretty cool. We were thinking about trying rollup with our codebase to see if we get a bit of size reduction and better tree-shaking. The extra bundle is also nice. Do you think you can add a PR with rollup having both es5 and es6 bundles? That'd be amazing.

[analytik]

I don't know Rollup much, but I'll give it a try some time later this week!

However, it might not be as straightforward as I hope - I tried building it from /src/ folder, but ran into issues with native Node.js modules being used. The sample config above just wraps the already webpack'd module.

[analytik]

Welp, I give up. After spending a few more hours on it, I ended up with a 949kiB unminified monster, but after after switching the order of rollup plugins I got it back to reasonable 284kiB (still, 17kiB bigger than official build). I don't have the strength to finish it properly, since I don't know what current WebPack setup is doing, and also Rollup plugin documentation right now leaves a lot to be desired.

Either way, neither of the builds was usable no matter how much I shuffled the plugin order and configuration. (Halfway through it left a bunch of lines like var debug = require('debug')('superagent');.)

Here is my current state:

npm i -D rollup-plugin-replace babel-plugin-external-helpers babel-preset-es2015 rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-json rollup-plugin-node-builtins rollup-plugin-node-globals rollup-plugin-node-resolve rollup-plugin-uglify

rollup.config.js:

import babel from 'rollup-plugin-babel';
import cjs from 'rollup-plugin-commonjs';
import nodeBuiltins from 'rollup-plugin-node-builtins';
import nodeGlobals from 'rollup-plugin-node-globals';
import nodeResolve from 'rollup-plugin-node-resolve';
import rollupJson from 'rollup-plugin-json';
import rollupReplace from 'rollup-plugin-replace';
import uglify from 'rollup-plugin-uglify';

export default {
    entry: 'src/index.js',
    dest: 'build/auth0-8.8.0.module28.js',
    plugins: [
        rollupJson(),
        nodeResolve({
            preferBuiltins: true,
            jsnext: true,
            main: true
        }),
        nodeGlobals(),
        nodeBuiltins(),
        // HACK: removes formidable's attempt to overwrite `require`
        rollupReplace({
            include: 'node_modules/formidable/lib/*.js',
            values: {
                'if \\(global\\.GENTLY\\) require = GENTLY\\.hijack\\(require\\);': '',
            }
        }),
        cjs({
            exclude: [
                'node_modules/superagent/package.json',
                'node_modules/superagent/lib/node/**'
            ],
            include: [
                'src/**',
                'node_modules/**',
            ],
            // namedExports: {
            //     'node_modules/process/index.js': ['nextTick'],
            //     'node_modules/events/events.js': ['EventEmitter'],
            //     'node_modules/buffer/index.js': ['isBuffer'],
            // },
        }),
        // babel({
        //     babelrc: false,
        //     exclude: 'node_modules/**',
        //     presets: [['es2015', {modules: false}]/*, 'stage-0'*/],
        //     plugins: ['external-helpers'],
        // }),
        // uglify({
        //     compress: {warnings: false}
        //     // comments: false
        // })
    ],
    moduleName: 'auth0-js',
    format: 'es',
    sourceMap: true
};

I hope someone brave will have more success though :) For now, I'll use the es-module-wrapped webpack build for myself, so as far as that goes, this ticket can be closed.

[luisrudge]

Thanks for the effort! I'll get back to this issue when we evaluate rollup. 🎉