如何无需发布至NPM即可本地使用Stencil JS组件？

你的思路是对的，这么引用可以正常运行，但有个小细节需要调整，以下是具体说明和优化方案：

核心原理 #

Stencil打包生成的两个脚本分工明确：

• yourComponent.esm.js：ES模块版本，针对支持ES模块的现代浏览器，加载效率更高
• yourComponent.js（非ESM版本）：UMD/IIFE格式的兼容版，专门给不支持ES模块的旧浏览器（比如IE11）使用，nomodule属性会让现代浏览器自动忽略它

纠正路径引用 #

你从dist/esm目录取的yourComponent.js其实是组件的原始ES模块源码，更适合给Webpack、Vite这类打包工具导入，不建议直接在浏览器中引用。正确的兼容版脚本应该在dist/yourComponent目录下，和ESM版本放在一起。

假设你把dist/yourComponent整个文件夹复制到测试项目的public/components/yourComponent目录下，正确的HTML引用代码应该是：

<script type="module" src="/components/yourComponent/yourComponent.esm.js"></script>
<script nomodule src="/components/yourComponent/yourComponent.js"></script>

额外优化建议 #

• 如果不需要兼容旧浏览器，可以只保留ESM版本的引用，去掉nomodule的脚本，减少加载资源
• 若测试项目使用打包工具（如Vite、Create React App），可以直接在JS/TS文件中导入组件，无需在HTML中写脚本：

  // 导入组件定义，自定义元素会自动注册
  import '/path/to/dist/esm/yourComponent.js';
  

• 引用完成后，直接在HTML中使用你的自定义组件标签即可，比如<my-stencil-button></my-stencil-button>

内容的提问来源于stack exchange，提问作者ahpto