Как я могу использовать LitElement с Webpacker (rails Webpack) для пользовательских веб-компонентов? - PullRequest
Новая
       84

Как я могу использовать LitElement с Webpacker (rails Webpack) для пользовательских веб-компонентов?

1 голос
/ 12 марта 2020

Для тех, кто может не знать Rails, теперь используется Webpacker, интеграция с Webpack. Существует /packs dir, который будет передан для использования на html странице: 

<script src="/packs/bundle-06cd8a4ad388853ace59.js"></script>

Я написал тестовый веб-компонент. 

import { LitElement, html } from 'lit-element';


class TestComponent extends LitElement {

  render(){
    return html`
      <!-- template content -->
      <p>ZZZZZZZZZZ</p>
    `;
  }
}
customElements.define('test-component', TestComponent);

Я импортирую это в мой packs/bundle.js как: 

import '../web_components/test-component'

В браузере я получаю ошибку: 

Uncaught TypeError: Class constructor LitElement cannot be invoked without 'new'

Webpack превращает это в: 

var TestComponent = function (_LitElement) {
  _inherits(TestComponent, _LitElement);

  function TestComponent() {
    _classCallCheck(this, TestComponent);

    return _possibleConstructorReturn(this, (TestComponent.__proto__ || Object.getPrototypeOf(TestComponent)).apply(this, arguments));
  }

  _createClass(TestComponent, [{
    key: 'render',
    value: function render() {
      return Object(__WEBPACK_IMPORTED_MODULE_0_lit_element__["b" /* html */])(_templateObject);
    }
  }]);

  return TestComponent;
}(__WEBPACK_IMPORTED_MODULE_0_lit_element__["a" /* LitElement */]);

customElements.define('test-component', TestComponent);

I Я не совсем уверен, как заставить это работать, но я бы очень хотел начать использовать веб-компоненты.

Пожалуйста, помогите !!

1 Ответ

0 голосов
/ 21 марта 2020

Кажется, это распространенная проблема .

Нашел решение, которое работает для меня, надеюсь, оно вам пригодится. Просто добавьте следующий тег script внутри application.html.erb. Это polyfill, вы можете узнать больше об этом здесь 

<!-- ADD POLYFILL  -->
<script type="text/javascript" src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/custom-elements-es5-adapter.js"></script>

<!-- be sure that the webpack tags are AFTER the polyfill -->
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
<%= yield %>

Полифилл также может быть добавлен через NPM, но я предпочитаю просто использовать CDN

...