javascript - StencilJS using component in HTML file - Stack Overflow

admin管理员组

文章数量:1426225

I want to use a ponent created using StencilJS in a regular basic HTML file. I followed these steps:

I have created a stencil ponent to create the basic my-ponent example:

npm init stencil

I want to use this ponent in an HTML file, so I ran

npm run build

I then created an html project with the following structure:

And then I moved the files from the dist folder into the script folder. And I added script tag in the head of my html file that references the ponent.js file like this:

<script src="script/{ponent_name}/{ponent_name}.js"></script>

And I used the ponent in the html like this:

<my-ponent first="Stencil" last="'Don't call me a framework' JS"></my-ponent>

But my ponent isn't being rendered. I get an error involving a esm.js file. Can someone help me with this process of piling my stencil ponent to be using in a basic HTML project?

I want to use a ponent created using StencilJS in a regular basic HTML file. I followed these steps:

I have created a stencil ponent to create the basic my-ponent example:

npm init stencil

I want to use this ponent in an HTML file, so I ran

npm run build

I then created an html project with the following structure:

And then I moved the files from the dist folder into the script folder. And I added script tag in the head of my html file that references the ponent.js file like this:

<script src="script/{ponent_name}/{ponent_name}.js"></script>

And I used the ponent in the html like this:

<my-ponent first="Stencil" last="'Don't call me a framework' JS"></my-ponent>

But my ponent isn't being rendered. I get an error involving a esm.js file. Can someone help me with this process of piling my stencil ponent to be using in a basic HTML project?

• javascript
• html
• stenciljs

Share Improve this question Follow edited Dec 13, 2019 at 18:56 Mandalina asked Dec 13, 2019 at 18:51 MandalinaMandalina 44666 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Stencil bundles your dist into modules and lazy-loads only the required code based on the ponents you are actually using in your HTML. So you should serve the whole dist folder along with your website.

The remended way is to have the following two script tags in your html file:

<script type="module" src="/dist/[namespace]/[namespace].esm.js"></script>
<script nomodule src="/dist/[namespace]/[namespace].js"></script>

(where [namespace] is whatever is set in your stencil.config.ts)

This will instruct browsers who support ES Modules to use the esm bundle, and other browsers will use the ES5 (cjs) bundle.

If my-ponent is the only ponent that you're using from your library, then only that code will be lazy-loaded by your page. Stencil knows about ponent interdependencies and how to lazy-load them accordingly.

---

There is a new experimental output target (called custom-elements-bundle) that allows you to bundle everything into one js file, which will simplify distribution in some cases. It's only available with the new refactored piler (which is available using the --next flag, after installing @stencil/core@next) (Stencil 2 has been out for a while now).

本文标签： javascriptStencilJS using component in HTML fileStack Overflow