将npm组件捆绑在npm包中，这样就可以有选择地导入npm组件

Question

在我当前的项目中，我们将根据v1规范构建本地web组件，目前我们正在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、lodash等。

问题1:为了使其他项目能够有选择地导入单个What组件，需要采取哪些步骤？

有点像

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

问题2:要使每个web组件成为可以使用单个命名空间安装的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

我在我的web组件项目中使用类型记录。我在一个src文件夹中有我所有的独立组件，我还在其中创建了一个index.ts文件，并分别导出每个组件。

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

您可以阅读这方面的内容，并按照本教程中的说明进行尝试。在我用tsc构建并且类型声明在我的dist文件夹中之后，我就向国家预防机制发布了。一旦发布，我就可以像这样导入：

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

您还可以查看模版，这是一个生成可重用web组件的编译器。

这就是我的web组件的样子：

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