详解利用Angular实现多团队模块化SPA开发框架(2)

3、实现

基于以上的一些思考,我们首先需要实现一个基础的平台网站,这个没什么难度,直接用 Angular 实现即可。有了这一套东西,我们的登录注销,基本的菜单权限管理,也就实现了。

在这个基础之上,我们也能实现公共服务、公共组件了(封装一系列常用的玩意)。

如何模块化?如何打包?

注意:此模块并非Angular本身的模块。 我们通过约定,在 modules/ 下的每一个目录都是一个业务模块。一个业务模块一般会包含,静态资源、CSS以及JS。根据这个思路,我们的打包策略就是:遍历 modules/ 的所有目录,对每一个目录进行单独打包(webpack多entry打包+CSS抽取),另外使用 gulp 来处理相关的静态资源(在我看来,gulp才是构建工具,webpack是打包工具,所以混合使用,物尽其用)。

一般来说,webpack 会把所有相关依赖打包在一起,A、B 模块都依赖了 @angular/core 识别会重复打包,而且框架中,也已经打包了 @angular 相关组件。这个时候,常规的打包配置就不太合适了。那该如何做呢?

考虑到 Angular 也提供了 CDN 版本,所以我们将 Angular 的组件通过文件合并,作为全局全量访问,如 ng.core、ng.common 等。

既然这样,那我们打包的时候,就可以利用 webpack 的 externals 功能,把相关依赖替换为全局变量。

externals: [{
 'rxjs': 'Rx',
 '@angular/common': 'ng.common',
 '@angular/compiler': 'ng.compiler',
 '@angular/core': 'ng.core',
 '@angular/http': 'ng.http',
 '@angular/platform-browser': 'ng.platformBrowser',
 '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
 '@angular/router': 'ng.router',
 '@angular/forms': 'ng.forms',
 '@angular/animations': 'ng.animations'
}

这样处理之后,我们打包后的文件,也就不会有 Angular 框架代码了。

注:这个对引入资源的方式也有一定要求,就不能直接引入内层资源了。

如何动态加载模块

打包完成之后,这个时候就要考虑平台如何加载这些模块了(发布过程就不说了,放到指定位置即可)。

什么时候决定加载模块呢?其实是访问特定路由的时候,所以我们的顶级路由,会使用Promise方法来实现,如下:

const loadModule = (moduleName) => {
 return () => {
  return ModuleLoaderService.load(moduleName);
 };
};

const dynamicRoutes = [];

modules.forEach(item => {
 dynamicRoutes.push({
  path: item.path,
  canActivate: [AuthGuard],
  canActivateChild: [AuthGuard],
  loadChildren: loadModule(item.module)
 });
});
const appRoutes: Routes = [{
 path: 'login', component: LoginComponent
}, {
 path: 'logout', component: LogoutComponent
}, {
 path: '', component: LayoutComponent, canActivate: [AuthGuard],
 children: [
  { path: '', component: HomeComponent },
  ...dynamicRoutes,
  { path: '**', component: NotFoundComponent },
 ]
}];

      

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/666.html