Question

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

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

我可以使用npm start开始运行Electron App，但是my-component不会在窗口中呈现。 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中应该如何正确解析图像。

Answer 1

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

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

然后从html中获取，如果我引用的是静态代码，则一切都可以正确解析。

我不知道为什么需要将所有内容从node_modules目录移动到本地应用程序目录中，但至少可以正常工作！

如何在ElectronJs中使用StencilJs组件

1 个答案: