CODEWITHSUNDEEP
javascriptweb-componentstenciljs
nipoma3298
nipoma3298

Reputation: 53

Bundle stencil.js into single file

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?

Upvotes: 4

Views: 2101

Answers (2)

Thomas
Thomas

Reputation: 8849

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.

Upvotes: 4

Danny '365CSI' Engelman
Danny '365CSI' Engelman

Reputation: 21143

Your question will get only a handful of views here on StackOverflow, because it is specific to an OpenSource tool.

OpenSource tools (nearly) always have a GitHub repo.

You can file issues there: https://github.com/ionic-team/stencil/issues

or the Slack channel: https://stencil-worldwide.herokuapp.com/

If you are learning Web Components, consider learning the core JavaScript technology first.

If you learn a Tool (like Stencil) before learning the Technology you will forever be asking questions you could have solved yourself... IMHO

If you use core Web Components technology you will not have any bundling issues.

Upvotes: -2

Related Questions