langyanyanglei-CSDN博客

原创 qiankun 入门（react和vue）

一、umi使用qiankun 插件使用方式一、主站1.安装插件yarn add qiankun # 或者 npm i qiankun -S2.配置qiankun开启2.1注册子应用a. 插件构建时配置子应用umirc.ts qiankun: { master: { // 注册子应用信息 apps: [ { name: 'app1', // 唯一 id entry: '//localhost:700

2022-05-06 22:34:53 698

原创 qiankun问题排查记录

一、问题描述1.项目相关配置： umi + qiankun + ahooks, 在项目开发过程中碰到这样一个场景：条件改变列表进行筛选并使用useUrlState改变url参数，结果发现操作一次页面被渲染2次2.复现方式： umi + qiankun(2.4.0以下版本)，注册qiankun:{master:{}},然后更新history就会触发二、问题排查排查思路：组件—页面，业务逻辑— 相关api—依赖顺序来排除1.组件逻辑排查2.页面逻辑排查3.相关api及配置排查1.ap

2022-05-06 22:33:57 666

原创 umi+qiankun如何使用Webpack5 模块联邦题】

前言官方文档：https://www.webpackjs.com/通过阅读文档，使用webpack 模块联邦有两个问题需要解决：异步导入react实例唯一，依赖共享如果单纯在umi中使用模块联邦，可以使用umi插件的方式异步导入入口，依赖也可以使用shared来共享，但是这种方式在qiankun下使用会不兼容，在此我们主要说下umi+qiankun的思路，对umi插件有兴趣可以翻下之前发的一个umi的文章思考：1、异步导入如何解决？如果了解qiankun会知道，

2022-05-02 15:39:16 3016 2

原创 angular 入门

一、安装1.安装@angular/clicnpm i -g @angular/cli2.使用脚手架工具创建项目ng new angular-demo3.安装依赖cnpm install || cnpm i4.启动项目ng server --port 5000 --open创建新组件ng generate component NewComponentName6.创建模块ng generate module 模块名称7.创建服务ng generate service

2021-07-19 22:25:12 2394

原创 webpack之plugin编写 -- 从html-webpack-plugin源码的角度来看如何编写plugin

webpack之plugin编写 – 从html-webpack-plugin源码的角度来看如何编写plugin 准备写个webpack的plugin，打开官网文档https://www.webpackjs.com/contribute/writing-a-plugin，发现有点蒙圈，看完文档好像知道怎么写，但又写不出来，所以看下html-webpack-plugin的实现，从而整体了解下插件的整体流程一、html-webpack-plugin源码分析1.插件的作用这个插件都用过，它的作用可

2020-11-29 15:52:53 524

原创 webpack之tapable

webpack之tapable近期研究webpack loader和plugin编写，发现涉及到tapable,闲来无事翻翻源码结合使用方法记录一下原文 https://github.com/webpack/tapable/tree/master一、钩子类型tapable提供了很多钩子（Hook classes）const { SyncHook, // 同步钩子从上到下顺序执行 SyncBailHook, // 同步早退

2020-11-29 08:16:38 174 1

原创 antd3 -- antd4 api差异之form组件

一.form组件1.使用方式1.antd3 使用需要注册 ..... const WrappedHorizontalLoginForm = Form.create({ name: 'horizontal_login' })(HorizontalLoginForm); 2.antd4 无需注册直接使用2.antd 4 api1.form 使用： const [fo...

2020-04-09 12:43:59 5011

原创 umi之路由系统

1.路由注册1.约定式路由通过文件路径来渲染2.配置式路由1.umi3 配置方式在配置文件routes进行配置，格式为数组export default { routes: [ { exact: true, path: '/', component: 'index' }, { exact: true, path: '/user', component: 'user' ...

2020-04-09 12:43:07 5663 2

原创 umi 项目配置

一、运行配置约定src/app.tsx为运行配置配置项目1.patchRoutes 修改路由，可获得整个路由系统export function patchRoutes({ routes }) { routes.unshift({ path: '/foo', exact: true, component: require('@/extraRoutes/foo')...

2020-04-09 12:41:31 15318 1

weixin_42114897的博客