diff --git a/.changeset/two-ducks-shave.md b/.changeset/two-ducks-shave.md new file mode 100644 index 00000000..49ffba9d --- /dev/null +++ b/.changeset/two-ducks-shave.md @@ -0,0 +1,5 @@ +--- +'microbundle': minor +--- + +Support ESM Import Maps diff --git a/package-lock.json b/package-lock.json index 5cd9089f..37d08b7b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12494,6 +12494,11 @@ } } }, + "rollup-plugin-import-map": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/rollup-plugin-import-map/-/rollup-plugin-import-map-2.2.2.tgz", + "integrity": "sha512-y97Myu5kvuIoLrfSxRd90ytjv4wbOFCoWdi1pKVRfE8eOAcJqUOyPCLM4y3gw2u276dB/pLSFi48cl29SatXPw==" + }, "rollup-plugin-postcss": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.0.tgz", diff --git a/package.json b/package.json index 99578512..b6396c77 100644 --- a/package.json +++ b/package.json @@ -104,6 +104,7 @@ "pretty-bytes": "^5.4.1", "rollup": "^2.35.1", "rollup-plugin-bundle-size": "^1.0.3", + "rollup-plugin-import-map": "^2.2.2", "rollup-plugin-postcss": "^4.0.0", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.29.0", diff --git a/src/index.js b/src/index.js index f8232e6e..bd841452 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import glob from 'tiny-glob/sync'; import autoprefixer from 'autoprefixer'; import { rollup, watch } from 'rollup'; import builtinModules from 'builtin-modules'; +import { rollupImportMapPlugin as importMap } from 'rollup-plugin-import-map'; import resolveFrom from 'resolve-from'; import commonjs from '@rollup/plugin-commonjs'; import babel from '@rollup/plugin-babel'; @@ -439,6 +440,9 @@ function createConfig(options, entry, format, writeMeta) { plugins: [] .concat( + (modern || format === 'es') && + options['import-map'] && + importMap(options['import-map']), postcss({ plugins: [autoprefixer()], autoModules: shouldCssModules(options), diff --git a/src/prog.js b/src/prog.js index 894a3f11..f2b7d4fc 100644 --- a/src/prog.js +++ b/src/prog.js @@ -51,6 +51,11 @@ export default handler => { .example('microbundle --define API_KEY=1234') .option('--alias', `Map imports to different modules`) .example('microbundle --alias react=preact') + .option( + '--import-map', + 'Import ESM packages from a CDN, instead of including them in the ESM bundle', + ) + .example('microbundle --import-map import-map.json') .option('--compress', 'Compress output using Terser', null) .option('--strict', 'Enforce undefined global context and add "use strict"') .option('--name', 'Specify name exposed in UMD builds') diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap index 22869391..750c7713 100644 --- a/test/__snapshots__/index.test.js.snap +++ b/test/__snapshots__/index.test.js.snap @@ -1679,6 +1679,33 @@ exports[`fixtures build esnext-ts with microbundle 6`] = ` " `; +exports[`fixtures build import-map with microbundle 1`] = ` +"Used script: microbundle -f modern --import-map import-map.json + +Directory tree: + +import-map + dist + import-map.modern.js + import-map.modern.js.map + import-map.json + index.js + package.json + + +Build \\"importMap\\" to dist: +119 B: import-map.modern.js.gz +100 B: import-map.modern.js.br" +`; + +exports[`fixtures build import-map with microbundle 2`] = `2`; + +exports[`fixtures build import-map with microbundle 3`] = ` +"import{getCLS as o,getFID as l,getLCP as e}from\\"https://unpkg.com/web-vitals?module\\";o(console.log),l(console.log),e(console.log); +//# sourceMappingURL=import-map.modern.js.map +" +`; + exports[`fixtures build inline-source-map with microbundle 1`] = ` "Used script: microbundle --sourcemap inline diff --git a/test/fixtures/import-map/import-map.json b/test/fixtures/import-map/import-map.json new file mode 100644 index 00000000..be6d0698 --- /dev/null +++ b/test/fixtures/import-map/import-map.json @@ -0,0 +1,5 @@ +{ + "imports": { + "web-vitals": "https://unpkg.com/web-vitals?module" + } +} diff --git a/test/fixtures/import-map/index.js b/test/fixtures/import-map/index.js new file mode 100644 index 00000000..cc85e2ad --- /dev/null +++ b/test/fixtures/import-map/index.js @@ -0,0 +1,6 @@ +/* eslint-disable no-console */ +import { getLCP, getFID, getCLS } from 'web-vitals'; + +getCLS(console.log); +getFID(console.log); +getLCP(console.log); diff --git a/test/fixtures/import-map/package.json b/test/fixtures/import-map/package.json new file mode 100644 index 00000000..ce6abe72 --- /dev/null +++ b/test/fixtures/import-map/package.json @@ -0,0 +1,6 @@ +{ + "name": "import-map", + "scripts": { + "build": "microbundle -f modern --import-map import-map.json" + } +}