How to build into a single ESM module for offline use?

[datvm]

I am not familiar with Node and its technologies and have been trying to use Rollup or Webpack to pack the whole thing into a single JS file without any success. Could someone please give me some guide on this?

I want a (preferrably a single file) build so I can refer to it in an HTML file. No server side, just a WebView app so I need everything offline. Similar to how right now you can refer to https://unpkg.com/@material/[email protected]/all.js?module or https://unpkg.com/@material/[email protected]/common.js?module

[Aworldc]

try using esbuild with the following options:

$ esbuild --bundle --minify --format=esm --outfile=bundle.js "path/to/all.js"

[datvm]

Thanks, turned out I still need to use their command to build the SCSS files. I couldn't run it in Windows without WSL. Your esbuild command works!

[datvm]

I just tried it in an HTML page, it works. Now I just need to find a way to download all the Fonts for Google Sans and Symbol for offline use.

[Aworldc]

ah yes. fonts are always a pain point.

[asyncLiz]

We also have a quick start that includes a building section!

If you saw that but had problems, please let us know! We'll want to fix the guide if so.

[datvm]

I tried that one at first (even running npm run build) but unfortunately that script doesn't work on Windows (missing Linux commands). Strangely I tried running it with an equivalent Powershell command instead but no CSS file was generated. I had to run it with WSL to get the SCSS and TypeScript compiled and then use the above answer esbuild to pack all the JS files into one bundle.

[datvm]

@asyncLiz I created this GitHub Action to build and bundle the component into a single ESM package. It's really simple on Linux environment really. The minified file is 441KB, very good 👍 It's also surprisingly much faster than running on my Windows WSL, it took about 2-3 minutes for compiling SASS vs a few seconds on Github Actions.