production use

[lubomirblazekcz]

I'm trying to create modern build stack using javascript modules and dynamic imports. And today this is very much possible for example with rollup and modules from npm, with esm.sh even better for loading modules directly from CDN.

The problem is production use and old browsers, it's possible now to use rollup and @babel/env to use javascript modules and dynamic imports as amd with requirejs, but that only works for npm imported es modules. (eg. https://web.dev/publish-modern-javascript/#@rollupplugin-babel)

      dir: 'dist/js',
      format: 'esm',
      entryFileNames: '[name].es5.js',
      chunkFileNames: '[name].[hash].es5.js',
      plugins: [
        getBabelOutputPlugin({
          presets: [['@babel/env', { modules: 'amd', targets: {
              esmodules: true,
            } }]],
        }),
      ]

So my question is, if it's possible to do something like import React from 'https://esm.sh/react?target=amd'? That way there could be a rollup plugin that would add correct urls for legacy builds.

And ssh.sh could be very much be used as CDN for es modules in production. Thoughts?

[lubomirblazekcz]

Or another, probably easier approach would be installing esm dependencies with npm and compile it to amd for legacy builds. And for modern builds similar plugin for rollup could be created https://github.com/trygve-lie/rollup-plugin-esm-import-to-url to auto translate dependencies to esm.sh urls.

But that's still heavily depends on npm, and including es modules as https://esm.sh/module is easier and works out of the hand in browser without compiling and is better suited for future use with deno

[ije]

@evromalarkey thanks for your suggestion! but esm.sh' goal is to bring web dev to es next, i suggest you using unpkg.com to import modules as amd.

[ije]

import React from 'https://esm.sh/react?target=amd'

you only can import a module from es module.

[ije]

and esbuild dont' support amd format that is the inner bundler of esm.sh. Please check https://esbuild.github.io/api/#format

[lubomirblazekcz]

Understood, then probably better and best approach for using esm.sh in production would be using plugin like this https://github.com/mjackson/rollup-plugin-url-resolve to resolve the urls and do amd build for legacy browsers.