Lan Ju-CSDN博客

原创阿里低代码引擎 | LowCodeEngine - 如何将新组件库接入物料，以TDesign为例

阿里低代码引擎默认提供了以antd为例的物料，并搭建了以antd为物料的示例demo，但实际中我们使用的不一定就是antd，有可能是别的组件库，也有可能是自己公司的组件库，这里就以自己为例告诉大家如何将新组件库接入阿里低代码引擎的物料中，以腾讯的组件库tdesign为例。

2023-11-02 12:31:01 943 1

原创阿里低代码引擎 | LowCodeEngine - 多页面管理功能（提供完善 github 代码示例）

本文主要介绍基于阿里低代码引擎 lowcode-engine 如何实现多页面管理功能，并提供全网最完善的代码示例。

2022-08-13 16:15:05 4082 1

原创 egg 如何配置 cors（全网少数配完可行的文档）

首发于语雀文档@blueju前言：我查阅了不少文档，配置的方法都是有错误的，甚至官方文档都是错的，年久失修的状态。步骤：安装 egg-corsnpm i egg-cors --save启用 egg 插件 egg-cors\config\plugin.jsmodule.exports = { cors: { enable: true, package: 'egg-cors', },}此处官方文档中写的是：（是错的或者已过时无效的，反正我试了.

2022-03-16 13:20:22 1219 1

原创巧妙设置 npm，让 C 盘满血复活

首发自语雀文档@bluejuC 盘爆红有一天突然发现我的 C 盘爆红了，仅剩 3 个 G，我使用 spacesniffer 这个软件查了一下，原来是 npm 和 yarn 的缓存一共占了我 C 盘大概 20 多个 G，本来固态硬盘就小，这哪里忍得了。spacesniffer 下载地址：https://www.fosshub.com/SpaceSniffer.html话不多说，直接上干货。干货在你想放缓存的地方创建一个文件夹（假设我将其命名为 npm-cache），然后执行以下命令：.

2022-03-16 13:19:38 1115

原创低代码平台 h5-dooring 解读之渲染引擎

首发自语雀文档@blueju前言渲染引擎，一般来说我认为可以这么解释：将物料拖拽到设计器画布后，将其渲染成真实的组件的一种机制。接下来将从代码层面由外到里地解读 h5-dooring 的渲染引擎。SourceBoxSourceBox 组件是一个包含了工具栏、右键菜单、物料栏、画布、属性栏的大组件，由于渲染引擎所在的画布内的逻辑很多，便将其作为独立组件，名为 ViewRender。只需要将关键数据作为属性传入即可完成渲染，属性名为 pointData，直译较为奇怪，暂且可理解为原子数据，.

2022-03-16 13:18:44 1045

原创天，我竟不懂 getDerivedStateFromProps

首发于语雀文档@blueju前言上周，我去组员那检查工作情况的时候，他说有困难，有一个页面不知道怎么写？我瞅了瞅，大概需求是：填完表单后，下面的表格就会显示一些信息，还需要能支持搜索等操作。其实如果这些都写在同一个组件，so easy，但是它把显示表格单独写成了一个组件，大概是这样：复现当时帮他处理了，现在我模拟一个类似的场景来复现一下，使用了 antd 组件库。https://codesandbox.io/s/shi-yong-getderivedstatefromprops-shi-.

2022-03-16 13:17:32 497

原创关于 tarball data for *** seems to be corrupted. Trying one more time 的解决方法

首发于语雀文档@blueju前言新同事电脑上安装依赖出现了点问题，组员也未能解决，我也花了写些时间才解决，特此记录一下。报错信息大致如下：tarball data for @ngfed/fc-business seems to be corrupted. Trying one more time...Error: EPERM: operation not permitted...ENOENT: no such file or direcotry, open...环境公司内网.

2022-03-16 13:16:24 3565 1

原创关于打的 umd 包在使用时，报 require is not defined 错误的问题出处

首发于语雀文档背景：前端同事前辈写了一个提供给其他部门的 JS 插件，写的是提供给前端使用的工具类，使用的是 commonjs 规范，导出变量使用的是 module.exports = {} 的方式，使用的是 webpack 打包，打出的包可正常通过 script 标签引入使用，但无法通过 import xxx from "xxx"/ const xxx = require("xxx") 的方式引入使用。过程：鉴于前辈说不需要理会他的 webpack config（他也没发给我），叫我使.

2021-05-17 21:59:18 2690

原创 antd table input 失焦的问题

背景隔壁 zym 同事遇到了一个问题，在编辑表格时，每输入一个字符后都会失去焦点，需要重新点击聚焦后才能继续输入，如图：![47d1b5ab-38d7-4996-9168-d910423d096e.gif](https://img-blog.csdnimg.cn/img_convert/133b0bbf03b720c9958d4d6e6cab1f2c.gif#clientId=uba010fd1-f904-4&from=ui&height=390&id=u838d75d9&amp.

2021-05-13 19:07:27 2020

原创微前端中，为子应用配备开发环境临时导航菜单，提高开发效率

首发于语雀文档场景子应用开发过程中，势必需要频繁地切换菜单 ,但因为子应用打包后是要接入到基座的，因此不能有菜单等。但如此的话，日常的开发又会不方便，甚至影响开发效率。但我的个人直觉，貌似更正确的做法是：将子应用直接接入到基座中开发调试，因此目前场景下，我们需要的是：在开发环境下，我们希望有菜单，方便我们开发人员进入及路由切换；在生产环境下，我们希望没有菜单；因此我们可以在打包里做手脚。具体操作一般能考虑到这种场景的，势必也是使用 umi 有一段时间了，因此操作这块的介绍不会详.

2021-05-07 08:44:43 557

原创私有依赖的打包与上传

首发于语雀文档背景项目中有三四个私有依赖（只有 npm 包，无源码），包括我封装的一些插件组件，需要上传到 npm 私有库，提供给其他同事组们使用。公司已有 npm 私有库，使用的是 Nexus Repository Manager，上传的方式是：提交 tgz 格式的依赖包。最开始当初的我，直到因为这个原因（https://www.yuque.com/blueju/blog/wgewwi）接触到 npm pack 这个命令，才明白是使用它来打 tgz 格式的包。步骤对于只有 npm 包，.

2021-04-06 11:36:22 791

原创在微前端中，antd icon createFormIconfontCN 的本地化问题

首发于语雀文档前言用过 antd icon 的朋友们可能知道，其中介绍的用法是：https://ant.design/components/icon-cn/#components-icon-demo-iconfontimport { createFromIconfontCN } from '@ant-design/icons';const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d.

2021-04-06 11:32:40 2367 3

原创常见 git 需求整理（持续更新中）

首发于语雀文档突然感觉自己对 git 还是挺熟悉的，因为团队里新来的七八号应届生来问我 git 问题，基本没有答不上的情况，但为了能更好地对知识进行整理，还是记录一下为好。（希望能）持续更新…临时回到某次提交，但不想丢失现有修改详细背景介绍：黄组员跑过来问我，基座崩了，我知道哪次提交打包出来的代码是不会崩，我想跳回去打个包，但我又不想丢失现有的修改，怎么办呀？解决思路：找到要去的提交的 commit hash，以切换并新建分支的方式，回到这个要去的提交具体实操：git checkou.

2021-03-09 22:59:00 221

原创 mock 请求分发

首发于语雀文档背景是这样的我们公司的后管项目走的不是 resful 风格的 api，而是走后管网关，后管网关会将请求进行分发，具体怎么分发，有这么以下几点：请求全部走 POST请求 URL 统一为 /agrs数据提交方式为 application/json数据格式大致分为：系统报文头服务名接口名接口版本号系统标识本地报文头用户信息分页信息设备信息报文体视具体情况而变化的动态数据文件传输走 OSS，不走表单文件流…痛点我们前端当然.

2021-03-06 18:10:16 223

原创记录一下我离线依赖迁移安装的具体尝试过程

首发于语雀文档第 1 次直接安装，不可行，因为是私有依赖，根本安装不上。第 2 次流程：拷贝依赖到项目目录 library 中通过 webpack alias 别名的方式关联依赖不可行，npm run start 运行报错，缺少依赖。想想也是，依赖的依赖其实在我们 npm install 的时候也是一起安装上的，而我通过上述流程 1→2 的方式关联依赖，缺少了依赖的依赖被安装的过程，自然会报缺少依赖的错误。第 3 次依赖 react-color-ui依赖 reac

2021-01-11 22:05:52 370

原创 umi-request 获取数据流

首发于语雀文档前言微前端产品开发中使用到了 umi-request 这个，类似于 axios（但貌似又强于 axios），因为碰到文件下载的功能，也即是：获取数据流，记录一下。其实最重要的两点无非是：responseType 要设置成 blobhttps://github.com/blueju/umi-request-practice/blob/4f11c63e7b47f730ed1bcdde867c6f4575241485/example/get-data-stream.jsx#L.

2020-12-29 14:52:44 3083

原创 umi-request 统一异常处理实践

前言本人在工作中用到了 umi-request，百度谷歌搜了一遍，感觉都没找到超过 3 篇合适且含代码的文章，因此只能自行实践总结了。umi-request 有点不同umi-request 与 axios & xhr 不太一样，它是基于 fetch 实现的，因此它只有在网络错误的情况下，才会抛出错误（即：catch），即使接口返回的是 404/500 等错误。umi-request 自带提供一个错误处理函数 errorHandler，所有在 umi-request 中执行的代码如果抛出错误

2020-12-28 21:32:50 5766

原创 NPM如何只发布打包后的dist

首发于语雀文档前言因为项目要求，我写了一个基于 umi-request 的统一请求插件，但公司的私有库尚未搭建起来，虽然可以暂时通过 webpack alias 别名引用的方式解决，但为了其他同学能快速拉到我的插件，我只能暂时先只将 dist 上传到 npm 仓库上。一共有两种方式。.npmignore（黑名单方式）pkg.files（白名单方式）黑名单方式.npmignore即：在项目根目录下新建一个名称为 .npmignore 的文件，使用与 .gitignore 一样的.

2020-12-18 14:18:12 4516

原创搭建 umi + qiankun + antd 的微前端平台

关键词：umiqiankunant design pro非动态注册子应用非动态装载子应用（路由）背景银行项目，需要一个前端中台，承载各项目组开发的应用，本篇文章是在工作实践后所写，还是具有一定可借鉴性的，至于官网已经有相关内容还专门写这么一篇，还是因为在实践中官网中的部分不完善，导致搭建过程异常坎坷。搭建主应用工程主应用一般都是类后管平台，因此我使用 ant-deisng-pro 做主应用，使用以下命令创建：参考：https://pro.ant.design/index-cn.

2020-11-03 13:06:40 3142 2

原创 umi + qiankun 动态注册子应用解决方案

前言首发于语雀文档@blueju本篇文章可以被视为上一篇文章（https://www.yuque.com/blueju/blog/huuie8）的延续，上一篇文章大致讲述了搭建一个简易微前端平台的过程，其中关于子应用注册的配置是通过硬编码的方式，在构建打包前写入的。但是真实项目中，更需要的是动态注册子应用，比如说我正参与的这个项目。本篇文章的示例代码是基于上一篇文章示例代码改动的，上一篇文章示例代码对应的 GitHub 地址是：https://github.com/blueju/umi-qia

2020-11-03 13:05:19 3621 3

原创 umi +qiankun 主应用动态装载子应用（路由）解决方案

umi +qiankun 主应用动态装载子应用（路由）解决方案前言接上一篇（https://www.yuque.com/blueju/blog/gtgndg），上一篇中使用的都是运行时动态注册子应用，子应用路由仍然是写死的、非动态获取。然后真实项目中除了需要动态注册子应用，还很有可能需要动态装载子应用（路由），比如说：不同权限的用户需要给予他们不同的路由。此篇 blog 的代码是基于上一篇进行改动的，上一篇 blog 中的代码对应的 GitHub 地址是：https://github.com/bl

2020-11-03 13:04:35 13354 3

LanJu的博客