在我目前的项目中,我们正在根据v1规范构建本机Web组件,我们目前正在将其打包在单个包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等。
就像是
import { compTable, compYearmonth } from "@comp-webcomponents";
就像是
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' });
我在我的Web组件项目中使用Typescript。我将所有单独的组件放在一个src文件夹中,并在其中创建一个index.ts文件并单独导出每个组件。
export {compDiv, compTable, comeYearmonth} from './compDiv';
export {example} from './example';
你可以阅读它并按照这个tutorial中的指示尝试。在我用tsc
构建并且我的类型声明在我的dist文件夹中之后,我publish to 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);