Как импортировать socket.io.client javascript в полимерное приложение для начинающих PWA 3 для сборки сервера

Question

Я использую соединение socket.io-client в своем веб-компоненте и мне необходимо импортировать java-библиотеку socket.io-client ( socket.io-client github ).

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

Все способы импорта socket.io-client.js не работают с использованием различных вариантов импорта, как показано ниже, прямо в моем веб-компоненте:

import io from 'socket.io-client'

Я искал и обнаружил ( решение ), что socket.io-client не предоставляет ES-модулей, которые требуются для импорта полимера. Предложенное решение, взятое из этого ответа, предлагает включить javascript socket.io непосредственно в основной файл index.html. Итак, я импортирую скрипт socket.io-client в мой index.html с

<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

Сборка прошла успешно, но приложение не запускается в браузере со следующей ошибкой в ​​консоли:

Загрузка не удалась для источника с «http://127.0.0.1:8080/es6-bundled/node_assets/socket.io-client/dist/socket.io.slim.js”.

Таким образом, файл socket.io ... js не помещается / не копируется в папки сборки во время процесса сборки. В каталоге сборки даже нет папки node_assets. Однако код и тестирование работают - поэтому импорт и скрипт, кажется, работают правильно. Я делаю что-то не так для финальной сборки, но не понимаю, что.

Итак, вопрос в том, как правильно импортировать JavaScript-код socket.io-client в index.html или веб-компонент, чтобы правильно вывести его в окончательную сборку?

Answer 1

Я думаю, вам нужно добавить "node_modules/socket.io-client/dist/**" к extraDependencies части Polymer.json, чтобы процесс сборки учитывал файлы

Это будет выглядеть примерно так

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