Question

对于那些可能不知道Rails现在使用Webpacker（与Webpack集成）的人。有一个/packs目录，该目录将被转换为可在html页面上使用：

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

我已经编写了一个测试Web组件。

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);

我不确定如何使它工作，但是我真的很想开始使用Web组件。

请帮助！

Answer 1

这似乎是常见的issue。

找到了一个对我有用的解决方案，希望对您也有帮助。只需在application.html.erb内添加以下脚本标记。这是一个polyfill，您可以详细了解here

<!-- 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添加polyfill，但我更喜欢只使用CDN

如何将LitElement与Webpacker（Rails Webpack）一起用于自定义Web组件？

1 个答案: