CommonJS formatter, Browserify, ES3, and reserved-word export names

[ericf]

A pattern we're seeing is people consuming our npm package's CommonJS transpiled output via require(), then bundling up their app code with our package via Browserify. This all works fine for modern, ES5+ browsers, but breaks down in ES3 browsers because reserved-word property names are accessed via dot-notation: .default.

The CommonJS formatter was recently updated so that it's transpiled output is ES3 compatible (at least everything except import * as which uses non-polyfillable getters/setters). It would be great to extend this ES3 support to transpiled CommonJS modules importing other transpiled CommonJS modules. The major culprit is .default accesses:

var foo = require('foo');
// ...
var foo1 = new foo.default();

Since the transpiler should only care that the way imports/exports are accessed and defined is ES3 compatible we don't have to worry if other code in the modules is not. Therefore, I think we could switch from using dot-notation access of imports to de-refs:

var foo = require('foo');
// ...
var foo1 = new foo['default']();

If we wanted to we could even scope this to ES3 reserved words…but that will complicate the implementation.

[ericf]

@eventualbuddha totally happy to do a PR for this change, I can work with @caridy on it since he's more familiar with the code base.

[matthewrobb]

Might I suggest instead hanging default exports off of ._default or something to avoid string based property lookup?