使 Webcomponents 捆绑一个 npm 包，以便有选择地导入 Webcomponents

Question

在我当前的项目中，我们正在根据 v1 规范构建本机 Web 组件，我们目前正在单个捆绑包comp-webcomponents.js中对其进行webpack处理。

这是我们当前捆绑包的入口点文件：

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：需要执行哪些步骤才能使其他项目有选择地导入单个 Web 组件？

类似的东西

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

我将Typescript与我的Web组件项目一起使用。我将所有单独的组件都放在一个 src 文件夹中，我也在其中创建了一个 index.ts 文件并单独导出每个组件。

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

您可以阅读有关它的信息并按照本教程中的说明进行尝试。使用tsc构建并且我的类型声明位于我的 dist 文件夹中后，我发布到 NPM。发布后，我可以像这样导入：

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

您还可以查看 Stencil，这是一个生成可重用 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);