Bundle stencil.js into single file

Question

I'm trying to use a stencil web-component in a system that requires a single js file. To be more precise, this is because the target system will take all javascript files and bundle them regardless. When i add the ES6 javascript files, this throws errors, which i think is because they are supposed to be lazy-loaded.

How can i generate a single bundle.js file, that can simply be added using the script tag?

Answer 1

You can use the Custom Elements Bundle output target.

The dist-custom-elements-bundle output target is used to generate custom elements as a single bundle.

To use this file without a bundler you also need to disable the externalRuntime config:

export const config: Config = {
  outputTargets: [
    {
      type: 'dist-custom-elements-bundle',
      externalRuntime: false,
    },
    // ...
};

Note that you will still need to register (or "define") your components (and set the asset path if applicable) after you include the script.