如何在 ElectronJs 中使用 StencilJs 组件

Question

使用 Stencil 组件启动项目，我创建了一个简单的 my-component 对象并将其发布到 npm 此处：https://www.npmjs.com/package/@marekknows/my-component

然后我使用 electron-webpack-quick-start 项目创建了一个使用前面提到的组件的简单应用程序。此处代码：https://github.com/mmakrzem/myApp

我可以使用 npm start 启动运行电子应用程序，但是我的组件不会在 window 中呈现。 Stencil 文档 (https://stenciljs.com/docs/distribution) 描述了如何使用节点模块，但我怀疑它还有更多内容可以使这项工作正常进行。

我生成的代码是这样的：

<html>
  <head>
    <meta charset="utf-8">
    <script>     
      require("module").globalPaths.push( "C:/Users/mkrzeminski/Documents/webWork/__help/myApp/node_modules")
      require("source-map-support/source-map-support.js").install()
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="renderer.js"></script>
    <div>Hello Electron</div>
    <script src="node_modules/@marekknows/my-component/dist/my-component.js"></script>
    <my-component></my-component>
  </body>
</html>

但是 Electron (chrome) 开发工具说：

Refused to execute script from 'http://localhost:56759/node_modules/@marekknows/my-component/dist/my-component.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

我也不知道在我的组件 node_modules\@marekknows\my-component\dist\collection\assets 中找到的图像应该如何被 Electron 正确解析。

Answer 1

通过执行以下操作，我终于能够正常工作：

将我在 /dist/collection/assets 下的节点包中找到的所有资产复制到我自己的 static/assets 文件夹中
复制所有编译好的javascript源码到static/js/

然后从 html，如果我参考在静态中找到的代码，一切都会正确解析。

我不知道为什么我需要将东西从我的 node_modules 目录移动到我的本地应用程序目录，但至少它可以工作！

如何在 ElectronJs 中使用 StencilJs 组件

How to use a StencilJs component in ElectronJs

webpack

electron

stenciljs