Сделайте веб-компоненты связанными в пакет npm, чтобы веб-компоненты могли быть выборочно импортированы

Question

В моем текущем проекте мы создаем собственные веб-компоненты в соответствии со спецификацией v1, которую мы в настоящее время webpack собираем в один пакет comp-webcomponents.js.

Это файл точки входа для нашего текущего пакета:

import 'document-register-element';
import 'nodelist-foreach-polyfill';
import 'babel-polyfill';

import 'components/tabs/comp-tabs';
import 'components/workspace-switcher/workspace-switcher';
import 'components/table/comp-table';
import 'components/date/comp-date';
import 'components/datepicker/comp-datepicker';
import 'components/datetime/comp-datetime';
import 'components/decimal/comp-decimal';
import 'components/number/comp-number';
import 'components/editor/comp-editor';
import 'components/time/comp-time';
import 'components/input/comp-input';
import 'components/button/comp-button';
import 'components/toggle-button/comp-toggle-button';
import 'components/yearmonth/comp-yearmonth';

Некоторые компоненты имеют зависимости от поставщиков, такие как jQuery, datatables.net, jquery-ui, lodash и т. Д.

Вопрос 1. Какие шаги потребуются, чтобы другие проекты могли выборочно импортировать отдельные веб-компоненты?

Что-то вроде

import { compTable, compYearmonth } from "@comp-webcomponents";

Вопрос 2. Что потребуется для того, чтобы сделать каждый веб-компонент пакетом npm, который можно установить с использованием одного пространства имен?

Что-то вроде

npm install --save @comp-webcomponents/comp-div

Пример компонента:

class CompDiv extends HTMLDivElement {
  constructor(...args) {
    const self = super(...args);
    self.property = null;
    return self;
  }
  connectedCallback() {
    console.log('connected CompDiv');
  }
}

customElements.define('comp-div', CompDiv, { extends: 'div' });

Даже ссылки или другие полезные ресурсы высоко ценятся!

Answer 1

Я использую Typescript с моими проектами веб-компонентов. У меня есть все мои отдельные компоненты в папке src, и я также создаю там файл index.ts и экспортирую каждый компонент отдельно.

export {compDiv, compTable, comeYearmonth} from './compDiv';
export {example} from './example';

Вы можете прочитать об этом и следовать инструкциям в этом руководстве , чтобы попробовать. После того, как я собрал tsc и мои объявления типов находятся в моей папке dist, я публикую в NPM . После публикации я могу импортировать так:

import { compTable, compYearmonth } from "@comp-webcomponents";

Вы также можете заглянуть в Stencil , компилятор, который генерирует повторно используемые веб-компоненты.

Вот так выглядит мой веб-компонент:

export class ExampleComponent extends HTMLElement {

  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(ExampleComponent.template.content.cloneNode(true));        
    }

    connectedCallback() {
      console.log('hello');
    }
}

    ExampleComponent.tag = 'example-component';
    ExampleComponent.template = document.createElement('template');
    ExampleComponent.template.innerHTML = `
    <template>
      <p>hello</p>
    </template>
    `;
    customElements.define(ExampleComponent.tag, ExampleComponent);