时间戳

首页 > 解决方案 > 我们可以使用 webpack 来决定在构建时使用业务配置在应用程序中提供哪些组件吗？

angular - 我们可以使用 webpack 来决定在构建时使用业务配置在应用程序中提供哪些组件吗？

问题描述

我正在构建一个 Angular 应用程序。我们的组件库中有数百个组件。我想为特定客户加载特定组件。如果我可以在构建时使用业务配置并决定特定客户端需要哪些组件，而不是在代码中编写逻辑并根据业务配置渲染这些组件，那就太好了。

考虑我有客户 A、B，他们分别使用组件 x、y、z 和 p、y、z。A 和 B 有独立的部署。我可以构建一个使用 webpack 独立为 A 和 B 提供服务的包吗？

标签： angularwebpack

解决方案

是的你可以。
有几种技术可以实现这一点：

  1. File replacements

例如，您有components.module.ts这样的事情： 

@NgModule({
 declarations() {
  XComponent,
  YComponent,
  ZComponent,
 }
})
class ComponentsModule{}

它将用于客户端A。然后您应该创建components-b.module.ts包含以下内容的文件（模块类的名称应该相同，但文件名可以不同）： 

@NgModule({
 declarations() {
  PComponent,
  YComponent,
  ZComponent,
 }
})
class ComponentsModule{}

要应用文件替换，您应该将自定义配置添加到您的angular.json： 

 "configurations": {
  "production": {
    ...
  },
  "clientB": {
    "fileReplacements": [{
      "from": "path/to/components.module.ts",
      "to": "path/to/components-b.module.ts"
    }]
   }

并运行它：ng serve --configurateion=clientB
请注意：角度团队建议为不同的客户创建不同的项目，而不是配置。

  1. Webpack aliases
    与第一种方法几乎相同，但来自不同的方面。您可以使用customWebpackConfig属性并获取自己的 webpack 配置。
    在此配置中，您可以定义别名： 

    {
     resolve: {
      alias: {
       '@myAliasToComponentsModule': client === 'A' ? 'path/to/moduleA' : 'path/to/moduleB';
      }
     }
    }

然后在您的应用程序中使用它：
import { ComponentsModule } from '@myAliasToComponentsModule'

推荐阅读