客制化 由于公司和公司的业务不同，所以在 ngx-planet 的基础上，需要作出一些针对于业务的拓展 目前分出四个基础项目 @yunzai/stars:封装了 用户认证,元素权限,i18n 等系统初始化信息的内容，需要发包的，意为繁星。 star-universe: portal 项目，所有子前端项目的入口，意为宇宙。 star-dust:一些可能会通用的 components 都放到这个项目里，统一管理，意为星尘。 star-uranus:模版项目，意为天王星。 开发环境 可以看到桌面共有四个编辑器，开发时需要跑起其中三个项目。 star-universe,star-dust,star-uranus @yunzai/stars 因为是基础包，所以扩展了哪些功能点，先做一个介绍，因为发包，所以 planet 前缀都被我改名成为了 star 前缀，针对于 ngx-planet 加载过程请看前一篇link start。 接下来看项目结构 首先基于 ngx-planet 加入了 auth,config,i18n,providers,sto.... 置顶！ 有更新！ 关于微前端实现原理与ngx-planet(三)客制化 前端
道标 准备好源码，然后跟着文章去看代码，在每个代码块的第一行，我都把 filename 写上了，并且打开了 gitalk。 项目结构 - packages/planet |--src |--application |--planet-application-loader.spec.ts |--planet-application-loader.ts # 应用加载器 |--planet-application-ref.spec.ts |--planet-application-ref.ts # 应用的引用 |--planet-application.service.spec.ts |--planet-application.service.ts # 应用逻辑处理Service |--portal-application.spec.ts |--portal-application.ts # Portal应用 |--component |--planet-component-loader.spec.ts |--planet-component-loader.ts # 组件加载器 |--p.... 置顶！ 有更新！ 关于微前端实现原理与ngx-planet(二) 前端
微前端？ 简单来说 从使用角度考虑 D 应用是由 ABC 三个应用/组件组合而成，通常在 Angular/Vue/React 单项目中很容易实现，但为了复用解耦，D 应用现由 3 个独立部署并带有通信机制的应用/组件组合而成。 从部署角度考虑 A,B,C,D 为并行四个打包后的静态文件，当有 E 应用使用 A,B,C,D 应用中的组件或者事件时通过类 eureka 服务发现注册的方式去复用组件或应用。 当然，这只是众多思路中的一种 当然，这只是众多思路中的一种 当然，这只是众多思路中的一种 好处： 应用自治： 只需要遵循统一的接口规范或者框架，以便于系统集成到一起，相互之间是不存在依赖关系的。 单一职责： 每个前端应用可以只关注于自己所需要完成的功能。 技术栈无关： 你可以使用 Angular 的同时，又可以使用 React 和 Vue。 这就好像使用 k8s 集群和 grpc 调用一样 架构模式 基座模式： 通常有一个 main/portal 应用来充当基座，提供基础服务，剩下的应用可插拔在基座上。好像 dashboard 和 wi.... 置顶！ 有更新！ 关于微前端实现原理与ngx-planet(一) 前端
简介 写一份自定义的angular脚手架吧 写之前我们先解析一下antd的脚手架 前提 先把 Angular Schematic这篇文章读一遍,确保了解了collection等基础 antd脚手架 克隆项目 git clone https://github.com/NG-ZORRO/ng-zorro-antd.git 开始 打开项目 在schematics下的collection.json为入口,查看内容 一共定了了4个schematic,每个schema分别指向了各文件夹的子schema.json,factory指向了函数入口，index.ts ng-add/schema.json { // 指定schema.json的验证模式 "$schema": "http://json-schema.org/schema", "id": "nz-ng-add", "title": "Ant Design of Angular(NG-ZORRO) ng-add schematic", "type": "object", // 包含的属性 "properties": { "project": ...... AngularCli Angular
前言 相对于官方demo,给出自己的理解, 秉承我一贯的作风，没有废话，直接讲代码，看注释，自己体会 React 基础 Cli npm install create-react-app 创建项目 create-react-app demo HelloWorld // HelloWorld组件 // 返回一个标签 class HelloWorld extends Component { render() { return ( <div> <h1> Hello World</h1> </div> ); } } // 使用HelloWorld组件 class App extends Component { render() { return <HelloWorld> </HelloWorld>; } } JSX 表达式 // 重写HelloWorld组件 class HelloWorld extends Component { // 一个函数，接受user返回字符串 formatName(user) { retur....... React Javascript
入门 官方文档 高阶 修仙之路 构建第三方包 angular-cli 的 ng g lib 不太好用,所以还是用ng-packgr 建立父项目 ng new project --style less --prefix pre 调整项目结构 cd project # 建立第三方包文件夹 mkdir -p projects/mylib # 在父项目中生成模块 ng g module mylib # 将mylib.module.ts移动到 project/mylib下 mv mylib.module.ts ./projects/mylib # 在project/mylib下生成component/service # 注意，component要export出来 cd project/mylib ng g c mycomponent ng g s myservice # 至此基本项目结构完成 模块依赖 当你编写第三方依赖包的时候,你的service/component或许需要一些数据来驱动，往往这些数据/对象是使用者提供的 # 建立model文件夹 mkdir -p project/my...... Angular6 Angular
争渡