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 }, ] }];
内容版权声明:除非注明,否则皆为本站原创文章。