使用 Angular 构建可跨框架使用的 Web Components 教程-七爪网

当前前端开发领域，组件能在不同框架间通用成为一大焦点。许多优秀的组件却受限，仅适用于个别框架，这让人感到些许遗憾。然而，Web组件标准的推出，为我们带来了新的曙光。

一组件的局限性与Web的优势

经常遇到的情况是，出色的组件往往只能在特定框架中应用，这无疑缩小了它们的使用范围。在具体的项目开发过程中，不同团队可能会选择不同的框架，比如vue或react等。然而，Web组件遵循的是一种标准的HTML组件规范，它打破了框架的束缚，使得组件可以在不同框架间通用。设想一下，如果某个日期选择器组件仅限于框架内部使用，那么在vue项目中就需要重新开发相似的功能，这无疑会耗费大量时间和资源。而采用Web组件后，这种情况就能得到避免，无论是框架内还是框架外，都可以灵活使用。

大型企业项目开发常需多团队协作，各团队所倾向的框架各不相同。若能借助Web组件实现组件间的共享，无疑将大幅提升开发速度，并显著降低重复开发的工作负担。

import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';

二创建基本的应用

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
  ],

首先，我们需要通过运行“ngnew–stylescss–falsem”这个指令来搭建一个应用。这过程可能需要一些时间，所以请耐心等待。这是搭建应用的基础操作，前提是您已经掌握了框架的相关知识，并且已经搭建好了开发所需的基本环境。若您未安装适当的环境或对框架知识不够熟悉，可能会在此时遇到障碍，进而影响后续步骤的进行。

<input [matDatepicker]="picker" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

安装完基础环境后，正确执行指令极为关键。若遇到语法失误或版本不兼容等问题，都可能干扰系统正常运作。这时，需仔细核对指令是否准确，以及环境变量是否正确配置等因素。

三安装依赖库与创建日期选择器组件

我们需要用ngadd@/来安装Web所需的库，这是构建Web组件的基础。接着，我们安装组件库，并在app..ts文件中导入相关模块。这样，我们便可以开始尝试制作日期选择器组件了。这个过程有点像拼装机械模型，每一个部件都必须安装得恰到好处，才能确保整个组件能够正常工作。

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
  ],
  providers: [],
  bootstrap: [],
})
export class AppModule implements DoBootstrap {
  constructor(injector: Injector) {
    const dateComponent = createCustomElement(AppComponent, { injector });
    customElements.define('m-date', dateComponent);
  }
  ngDoBootstrap(appRef: ApplicationRef): void {}
}

启动yarnstart–open后，浏览器会自动打开并展示日历图标。点击图标，会出现日期选择界面。这说明我们成功创建了一个基础日期选择组件。每一步操作都需精确无误，否则可能会导致结果不理想。例如，若依赖库安装出现问题，组件将无法正常展示。

四将组件封装为Web组件

在构造函数中，通过使用@/方式，我们能够打造Web组件，并依照Web规范中的相关要求进行元素的注册。这一步骤对于将普通组件转变为Web组件至关重要。它好比将地方特色产品进行加工和包装，目的是为了便于在更广泛的市场进行销售。


  <body>
    <m-date></m-date>
  </body>

每一步都必须严格按照规定来执行。若出现失误，组件可能无法正确注册，进而无法在其他场合应用。这就像在包装时出了差错，使得特产变质，便难以在异地销售。

五使用Web组件

删除其中内容后，app-root不会自动加载。因此，我们需要在index.html中移除app-root标签，并加入m-date标签以启用先前注册的组件。值得注意的是，修改index.html后页面不会自动更新，需手动按F5刷新。刷新后，若能看见日历图标并能点击弹出日期选择窗口，则说明操作无误。

这个过程对我们细致入微的要求很高。一不小心忘记手动刷新，或者添加元素出错，就无法达到理想的效果。就好比拼图缺少一块或者放错了位置，都无法完成。

六在Linux编译打包Web组件


Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.467a0ab37287e536.js      | main          | 365.53 kB |                86.67 kB
styles.af496c625d1d99e8.css   | styles        |  73.07 kB |                 7.55 kB
polyfills.a1cc02388ba313f2.js | polyfills     |  33.06 kB |                10.65 kB
runtime.68788f74f641e937.js   | runtime       |   1.03 kB |               595 bytes

                              | Initial Total | 472.68 kB |               105.45 kB

编译yarnbuild会产生若干文件，其中包括三个JavaScript文件和一个CSS文件。若直接发布，用户导入会感到不便。在Linux系统中，可以通过执行特定命令将文件合并。合并完成后，只需在HTML文件中引入一个JavaScript文件和一个CSS文件，即可实现日期选择器的功能。

这种做法能增强组件使用的便捷度。然而，在Linux系统中，若命令输入有误，则无法顺利进行。以文件合并命令为例，一旦输入错误，便无法达到预期的文件合并效果。

最后有个小问题想请教大家，在使用不同框架的前端组件时，你们有没有遇到什么困难？欢迎在评论区留言交流。同时，也希望各位能点个赞，把这篇文章转发出去。

cat dist/m/*.js > main.js
cat dist/m/*.css > main.css

相关文章

微信