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?
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.
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.