Импортные компоненты Полимер 2 в Полимер 3

Question

Я занимаюсь разработкой веб-компонента с использованием Polymer v3, и мне нужно включить некоторые пользовательские элементы, определенные в устаревших компонентах Polymer 2, в шаблон HTML моего нового компонента.

Поскольку импорт HTML больше не поддерживается в Polymer 3, какой подход я должен использовать, чтобы включить их?Если бы я использовал Polymer 2, я мог бы просто добавить следующее в файл HTML моего компонента:

<link rel="import" href="../my-legacy-component.html">

Я попытался добавить вышеуказанную ссылку в шаблон HTML моего компонента, но, похоже, это не работает,Я также пробовал различные import команды для прямой ссылки на файлы JS внутри устаревшего компонента, но получал различные непостижимые ошибки JS, поэтому я не уверен, что это правильный путь.

Я могуНеужели нет простого способа сделать это - действительно ли команда Polymer представит новую версию библиотеки, которая полностью несовместима со всеми компонентами, созданными с использованием более старых версий?

Answer 1

Я столкнулся с той же проблемой с модулем js-yaml ранее.У меня пока недостаточно репутации для комментария, поэтому я просто записываю его здесь.

1. Запустите sudo npm install -g js-yaml -> Это установит недостающий пакет для инструмента
2. Затем в корне вашего проекта запустите modulizer --import-style name --out . -> Это преобразует ваш компонент из Polymer 2 в Polymer 3. Опция --import-style name говорит инструменту использовать имя пакета вместо пути.--out заставит инструмент записать эти файлы в каталог.
3. После этого, если не появится сообщение об ошибке.Попробуйте обслужить его с помощью polymer serve --module-resolution=node -> Так как мы сейчас используем модули узлов, мы должны предоставить опцию --module-resolution=node.

Answer 2

Вы пытались использовать полимер-модулятор? Modulizer выполняет множество различных задач обновления, например:

• Определяет, какие файлы .html используются в качестве импорта HTML, и перемещает их в формат .js
• Переписывает в HTML для импорта в JS.
• Удаляет «обертки модуля» - IIFE, которые охватывают ваш код.
• Преобразует bower.json в package.json, используя соответствующие пакеты в npm.
• Преобразует "ссылки на пространство имен" в соответствующий импорт модуля JS, т.е. Polymer.Async.timeOut, в timeOut, импортированный из @ Polymer / Polymer / Lib / Util / Async.
• Создает экспорт для значений, присвоенных ссылкам на пространство имен. то есть Foo.bar = {...} становится экспортным константным баром = {...}
• Переписывает объекты пространства имен - объект со многими членами, предназначенный для использования в качестве модуля-подобного объекта, в модули JS.
• Перемещает шаблоны элементов Polymer из HTML в строку шаблона JS.
• Удаляет s, если они содержат только шаблон.
• Перемещает другой общий HTML-код в документе в строку JS и создает его при запуске модуля.

больше на github