Efficient IE11 support

[jpeg729]

IE 11 will continue to be supported by Microsoft for several years, and people tell me that I have to support IE 11. However, I write code in ES2015, so I am going to have to transpile it to es5 and bundle it with all the necessary polyfills for older browsers. But I don't want modern browsers to have to load the huge bundle. I don't think I am alone in wanting that.

I would like <script src="myscript.js"> to be transformed into something like this

<script type="module" src="modern-bundle.js"></script>
<script nomodules src="legacy-bundle.js"></script>

with a little boilerplate to prevent browsers like safari 10.1 from running the legacy bundle if they have already run the modern bundle.
IE 11 downloads both bundles, but only runs the legacy bundle.

Answers to objections

• Edge, Chrome and Opera already support type="module".
• The next version of Firefox will support type="module".
• IE 11 downloads both bundles, but IE 11 is generally used on a desktop computer with a solid internet connection.
• The other desktop browsers that download both bundles are becoming less and less used.
• The number of mobile browsers in use that will download both bundles is diminishing.
  and yet some of us still need to support IE 11.

Of course, I would like parcel to support this by default, but I would settle for a plugin. How hard would it be to write a plugin that enables this? Where should I start?

[fathyb]

I think this is more of an RFC and doesn't have much to do with IE11. If I understand correctly what you want is to target both old browsers and new ones supporting ES6 modules?

How should we handle imports to non-js modules, like CSS? Should we generate intermediary modules for it? How should handle CommonJS (require, exports)? Example :

• main.js

import {foo} from './bar'

console.log('Foo', foo)

• foo.jsx

import React from 'react'
import {fooClass} from './index.css'

module.exports.foo = <h2 className={fooClass}bar</h2>

• foo.css

.fooClass {
  background: url('./asset.png')
}

That said I think this is an extremely cool feature to have.

[devongovett]

Sounds like #41?

[jpeg729]

I was aiming for something a little more specific than #41.
What I wanted to suggest here is that parcel could by default produce legacy/modern bundles.

[rtsao]

One problem I've experienced with this strategy is handling non-strict mode dependencies. Normally when bundling, strict mode can be individually applied to dependencies.

However, scripts loaded with <script type="module"> are interpreted as ES modules, which are automatically run with strict mode, with no way to opt out. Therefore, one constraint with this strategy is the entire bundled codebase must be strict mode (which is hardly a given with many CommonJS dependencies).

[devongovett]

This is done as of #6247. If you use <script type="module">, a nomodule version will also be created if your browserslist target requires.