Question

我在Web组件中使用socket.io-client连接，需要导入socket.io-client Java库（socket.io-client github）。

Usage in web-component: var socket =  io.connect(socket_url);

所有导入socket.io-client.js的方法均会因在我的Web组件中直接使用以下不同的导入变量而失败：

import io from 'socket.io-client'

我搜索并发现（solution）socket.io-client没有提供聚合物导入所需的ES模块。从该答案中得出的建议解决方案建议将socket.io javascript直接包含在主要index.html中。因此，我现在使用

在我的index.html中导入socket.io-client脚本。

<script src="node_modules/socket.io-client/dist/socket.io.slim.js" crossorigin></script>

此解决方案可在以下环境中进行开发和测试：

npm start

在浏览器的http://127.0.0.1:8081中，构建工作正常，并且应用程序和套接字实现按预期工作。

但是当我开始生产的构建过程并与之配合使用时：

npm run build:prpl-server
npm run serve:prpl-server
...
prpl-server listening http://127.0.0.1:8080

构建成功，但是应用程序无法在浏览器中运行，控制台中出现以下错误：

with源的加载失败 “ http://127.0.0.1:8080/es6-bundled/node_assets/socket.io-client/dist/socket.io.slim.js”。

因此，在构建过程中，不会将socket.io ... js文件放入/复制到构建文件夹中。在构建目录中甚至没有node_assets文件夹。但是代码和测试有效-因此导入和脚本似乎正常工作。我在完成最终版本时做错了什么，但不明白是什么。

所以问题是如何正确导入index.html或Web组件中的socket.io-client javascript，以将其正确输出到最终版本中？

Answer 1

我认为您需要将"node_modules/socket.io-client/dist/**"添加到polymer.json的extraDependencies部分中，以便构建过程考虑到文件

看起来像这样

{
  "extraDependencies": [
    "manifest.json",
    "node_modules/@webcomponents/webcomponentsjs/**",
    "push-manifest.json",
    "node_modules/socket.io-client/dist/**"
  ]
}

如何在Polymer 3 PWA入门套件应用中导入socket.io.client javascript以进行服务器构建

1 个答案: