如何在StencilJS中为第三方库分离捆绑包

问题描述

我将在Stencil项目中使用第三方Web组件库。但是，当我这样做时，所有依赖代码都包含在我的模板组件中，并且体积很大。如何在模板构建中分隔第三方组件/模块代码？

import { Component,h } from '@stencil/core';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';

@Component({
  tag: 'test-component',styleUrl: 'test-component.css',shadow: true,})
export class TestComponent {

  data: Array<Object>;
  grid: IgcDataGridComponent;

  constructor() {
    ModuleManager.register(
      IgcDataGridModule
    );
  }

  componentDidRender() {
    this.grid.dataSource = this.data;
  }

  render() {
    ...

    return (
      <div>Test component
        <igc-data-grid ref={el => this.grid = el as IgcDataGridComponent}
                       height="100%"
                       width="100%"
                       auto-generate-columns="true"
                       default-column-min-width="100"
                       summary-scope="Root"
                       is-column-options-enabled="true"
                       is-group-collapsable="true"
                       group-header-display-mode="Combined"
                       group-summary-display-mode="RowBottom"
                       column-moving-mode="Deferred"
                       column-moving-animation-mode="SlideOver"
                       column-moving-separator-width="2"
                       column-showing-animation-mode="slideFromrightAndFadeIn"
                       column-hiding-animation-mode="slidetoRightAndFadeOut"
                       selection-mode="SingleRow"
                       corner-radius-top-left="0"
                       corner-radius-top-right="0">
        </igc-data-grid>
      </div>
    );
  }
}

例如，在这段代码中，我需要将 igc-data-grid 组件捆绑到单独的文件中。同样， igniteui-webcomponents-core ， igniteui-webcomponents-grids 模块也需要放在单独的文件中，以便可能在其他模板组件中使用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript stenciljs