Доступ к пользовательским элементам Polymer3.0 из stati c html - PullRequest
Новая
       43

Доступ к пользовательским элементам Polymer3.0 из stati c html

0 голосов
/ 01 мая 2020

Я создал пользовательский элемент Polymer3.0. И он прекрасно работает, когда я ploymer serve.

У нас есть внутренний реестр предприятия NPM, в котором я опубликовал свой элемент.

Теперь я хочу использовать этот элемент полностью другой проект (который имеет только stati c HTML / JS) и обслуживается сервером NGNIX.

  • Возможно ли это? Если да, то как к нему подойти?
  • Нужно ли сервировать свой пользовательский элемент через node или http-server, чтобы я мог использовать его в c html в совершенно другом проекте?
  • Можем ли мы обслуживать элементы Polymer3.0, такие как CDN, я видел некоторые сообщения с unpkg, но для этого мне нужно опубликовать sh в глобальном NPM. R есть еще варианты?

1 Ответ

0 голосов
/ 02 мая 2020

Мне удалось решить проблему (на самом деле это я не смотрел на все варианты в polymer.json).

Если кому-то интересно, то вот что я сделал ...

  • В моем ploymer.json я добавил следующее
    • shell свойство json, чтобы указать на мой пользовательский элемент js file
    • Я также добавил в js свойство, "compile":true ..

Вот как выглядит мой polymer.json 

...
"shell": "xxxxx.js",
"builds":[
{
  "name": "prod",
  "preset": "es6-bundled",
  "bundle":true,
  "moduleResolution": "node",
  "addServiceWorker": true,         
  "inlineCss": true,          
  "inlineScripts": true,      
  "rewriteUrlsInTemplates": true, 
  "sourcemaps": true,     
  "stripComments": true,     
  "js": {"minify":true, "compile":true},
  "css": {"minify":true},
  "html":{"minify":true}
},
...

Я скопировал свои файлы в build/ папку на мой nginx сервер и размещать их как обычную папку. Конечно, я добавляю add_header Access-Control-Allow-Origin *; к моему conf файлу

В моем состоянии c HTML для импорта моего компонента все, что мне нужно было сделать, это 

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script>
 <script type="module" src="http://XXX_MY_NGINX_VIRTUAL_HOST_XXXX/my-custom-element.js"></script>
...