feat(build): add an option to use SystemJS

[hronro]

fix #554

[hronro]

@yyx990803 fixed.

[frehner]

Interesting!

This would probably require additional work, but do you think you would in the future allow the bare import specifier resolution to be handled by SystemJS' import-map support instead of by Vite?

[hronro]

@yyx990803 Is there something else I can do to help this PR merged?

[aleclarson]

Rebase to master while you're at it 👍

[hronro]

@aleclarson Rebased. Could you check it again?

[aleclarson]

@yyx990803 You can test yourself with this: https://github.com/aleclarson/repro/tree/vite-588

But I've tested myself, and it's all working ;)

[aleclarson]

Interesting!

This would probably require additional work, but do you think you would in the future allow the bare import specifier resolution to be handled by SystemJS' import-map support instead of by Vite?

@frehner Import maps are working as expected 👍

You just need to define rollupInputOptions.external in your Vite config.

Open to contributions that parse the systemjs-importmap scripts out of index.html, parse the imports map for specifiers, and inject those specifiers into rollupInputOptions.external automatically.

PS: You'll want to put your import-map.json in the public directory, so your index.html has access when in production environment.

[aleclarson]

UMD bundle interop

Some packages (like React) don't have a SystemJS bundle, but they often have a UMD bundle.

The minimal loader (which is embedded in your index.html when useSystemJs: true is defined) does not support UMD bundles, so you need to provide a CDN url for Vite to use the full-featured SystemJS loader instead:

useSystemJs: 'https://unpkg.com/systemjs@6.7.1/dist/system.min.js',

[hronro]

May I know is there anything block this PR getting merged?

[aleclarson]

May I know is there anything block this PR getting merged?

Just waiting on @yyx990803 to approve it. ⏳

[hronro]

Hi @yyx990803 and @aleclarson, I just notice v2.0.0-beta.1 has released. I havn't look at the v2 deeply yet, I just wonder if supporting Systemjs in still on the plan of Vite. If it is, I can change my PR to base on v2.

[yyx990803]

For v2 we will likely provide an official plugin (@vitejs/plugin-legacy) which produces a separate legacy bundle, and transforms the produced HTML to conditionally load the legacy bundle when native dynamic import is not supported.

It's discussed a bit in the docs here: https://vitejs.dev/guide/build.html#browser-compatibility

References:

• Vue CLI modern mode https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode
• https://github.com/rollup/rollup-starter-code-splitting
• https://github.com/alloc/vite-plugin-legacy

[jacekkarczmarczyk]

@yyx990803 SystemJS could be used not only because old browsers don't support dynamic imports, but also because importing hashed chunks is not optimal for long term caching (which could be solved by using import maps, but it's currently supported natively only in chromium-based browsers).

See #6773, sveltejs/kit#4482, rollup/rollup#3407, rollup/rollup#4709