NodeJS 在本地使用Stencil JS组件

busg9geu 于 2022-12-03 发布在 Node.js

关注(0)|答案(1)|浏览(129)

tl;dr：如何在不发布到npm的情况下使用stenciljs组件：从原始模板项目构建中复制并粘贴dist文件夹，然后在新项目中使用dist/yourComponent/yourComponent.esm.js和dist/esm/yourComponent.js？？？
嘿，自学成才的菜鸟在这里学习一些web开发。Stencil JS听起来很酷。所以做一些教程等，然后只想在本地托管的项目上玩一下stencil组件。所有的stencil构建/输出文档似乎都是为了把你的组件--甚至只是为了你自己使用--放在npm上。在像我这样的情况下没有必要，即使你是一个专业的开发人员，你应该可以选择不发布到npm，如果你这样选择的话，对吗？？好的，你npm run build你的组件，然后从你的模板构建中复制并粘贴整个dist文件夹，然后把它放到你的小游戏项目中。但是你使用什么<script>源代码？？所以在dist > yourComponent文件夹中，您将看到类似yourComponent.esm.js的内容，并且使用此文件 * 似乎 * 可以工作，但这与您在原始模板组件上看到的内容有点不同-如果您查看那里，您还将看到另一个脚本文件，即

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

所以我假设第二个脚本是一个备份，以防在使用ecmascript模块时出现任何问题（因此使用.esm.js与.js）.但后来我在另一个子文件夹中找到了yourComponent.js，
dist > esm！所以，我也包括了它，我只是想确保这应该是我正确使用模具组件所需要的全部，而不发布到npm。谢谢！

node.js

来源：https://stackoverflow.com/questions/74624142/using-stencil-js-component-locally

1条答案

按热度按时间

11dmarpk1#

以下方法对我很有效：

模板配置ts*：

...

  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },

    ...
  ],

  ...  

  bundles: [
    {
      components:
        [
          'my-component'
        ]
    },
  ],

  ...

然后，我对组件运行npm start命令：

> my-component@0.0.1 start
> stencil build --dev --watch --serve

.....

[16:05.8]  build, my-component, dev mode, started ...
[16:05.9]  transpile started ...
[16:07.4]  transpile finished in 1.50 s
[16:07.4]  copy started ...
[16:07.4]  generate lazy started ...
[16:07.5]  copy finished (16 files) in 98 ms
[16:11.3]  generate lazy finished in 3.94 s
[16:11.4]  build finished, watching for changes... in 5.52 s

[16:11.4]  http://localhost:3333/

之后，我就可以在本地的另一个项目中使用这个组件了：

<script type="module" src="http://localhost:3333/build/my-component.esm.js"></script>
<script nomodule src="http://localhost:3333/build/my-component.js"></script>

赞(0）回复(0）举报 2022-12-03

我来回答

NodeJS 在本地使用Stencil JS组件

1条答案

相关问题

热门标签

最新问答