背景 由于我们经常会用到antd 风格的UI设计，而小程序开发我们更倾向taro实现，但是官方的ant-mobile并没有适配taro。所以我们考虑自己实现一个antd风格并且能适配taro的组件库。 设计目标 按照目标计划，我们同时构建出umd,es,cjs三种format。但是umd和es，cjs的构建产物是不一样的。umd中，我们需要一个js和一个css文件。而es和cjs我们考虑到按需加载的要求，需要遵循babel-plugin-import的加载策略，对文件结构是要要求的。 以es格式为例，组件文件下需要有个style文件夹，babel-plugin-import插件会在使用组件的时...

weapp是一款声称“重塑小程序开发体验”的开源框架，由于项目作者刚刚发布，使用的人数不是很多，我来看看到底怎么回事。 项目地址：github：[https://github.com/weapp-vite/weapp-vite](https://github.com/weapp-vite/weapp-vite)。 首先我们按照官方文档的快速开始教程，直接在控制台创建一个集成了常规前端工程配置项目模板（tailwindcss，sass，ts）。 npx weapp-vite create my-app，然后执行pnpm i 安装依赖包，得到以下结构： 参照package.json中的script...

在taro 官方文档中有对应的使用linaria作为css-in-js方案的文档 https://taro-docs.jd.com/docs/next/css-in-js 但是文档相对落后了，该文档试用与linaria 5.x，linaria已经升级到6.x,那么我需要对其进行相应的调整。 主要是将部分原来 linaria的包改成 wyw-in-js $ pnpm i @linaria/core @linaria/react @wyw-in-js/babel-preset @wyw-in-js/webpack-loader babel.config.js: module.exports = {...

背景 我们经常会遇到在上传头像的时候，需要对头像进行裁剪的需求，antd 官方推荐了https://github.com/nanxiaobei/antd-img-crop 和 https://github.com/sekoyo/react-image-crop ，虽然这两个组件也能满足一般的需求，但是我们从自身需求出发，希望有更可控的解决方案，并且希望后面通用的解决方案可以用在我们vue的组件库中，那么这种完全基于react的方案就不是很适用，这时候cropperjs这种不依赖react或vue等框架的组件库就成为了一个比较好的选择。 cropperjs github https://gith...

在鸿蒙Next中，想要实现渐变文本可使用2种方式 使用Canvas绘制 使用linearGradient与blendMode结合 以下提供2种方法的实现样例代码 一、Canvas绘制 Canvas(this.context) .onReady(() => { let str = '这是一段渐变颜色的文字' let size = this.context.measureText(str) let linearGradient = this.context.createLinearGradient(0, 0, size.width, size.height) linearGradient.addC...

原理 当我们使用 certbot 申请通配符证书时，需要手动添加 TXT 记录。每个 certbot 申请的证书有效期为 3 个月，虽然 certbot 提供了自动续期命令，但是当我们把自动续期命令配置为定时任务时，我们无法手动添加新的 TXT 记录用于 certbot 验证。 好在 certbot 提供了一个 hook，可以编写一个 Shell 脚本。在续期的时候让脚本调用 DNS 服务商的 API 接口动态添加 TXT 记录，验证完成后再删除此记录。 参考Github项目certbot-dns-aliyun 1、准备工作 一个阿里云的域名，要求备案 阿里云的ACCESS_KEY_ID和AC...

对于打印可定制样式的出货单这种需求，我们可以使用 [https://www.npmjs.com/package/react-to-print](https://www.npmjs.com/package/react-to-print) 这个库来实现。 该库会打印出被创建的React组件，支持css样式的创建。 首先我们引入这个库 npm install --save react-to-print 使用方法非常简单，传入一个触发按钮Icon，再把要打印的组件传入进去就好了，我们使用ref.current传递。其他api可以参考官方文档。 import ReactToPrint from 'rea...

我对 monorepo 的一些思考 我对 monorepo 的一些思考 前言 它的由来 技术选型 管理工具 语言与打包 调试工具 测试框架 代码规范与质量控制 本地引用与发包替换 发包流程 Github 相关配置 部署 使用手册 功能特性总结 如何使用？ 清除默认的包(可选) 模板包介绍 packages apps 更新包的依赖 配置自动发包 1. 在 Github 进行 PR 和发包 2. 在 npm 发包 内置脚本 配置同步方式 参数 总结 前言 最近在自己的新项目中，使用了 monorepo-template 模板，并不断地做了不少改进。 在此，我想借此机会分享一下这个模板的演变过程，以...

前言 绝大多数的系统都是需要登录才能访问的，因为很多信息要根据当前执行人的身份进行获取，并且不同的人可能权限也不一样。 首先，我们要区分下认证和鉴权，认证，就是确认你的身份信息，一般来说你成功登录就是通过认证。鉴权，就是鉴别你是否有权限，比如同样一个操作A可以进行，B就不能进行。 方案 那么在react的前端工程中，如果进行人认证和鉴权呢？我们主要考虑以下几个方案。 1.页面渲染的时候，进行认证校验，如果未认证则跳转到登录页或指定页面。 2.认证通过的标准是什么？web应用很多是无状态的，我们会在客户端通过 cookie或者sessionstorage来记录token,但是token的有效时间...

背景 我们要一个java锁的实现，如果是单机环境就使用线程锁，如果是分布式环境就使用分布式锁。线程锁是基于thread实现的，分布式锁是基于redission实现的。如果在单机场景下，其实我们并不需要redission的包，所以，我们的思路是默认情况下不引入redission包，如果需要用可以在项目中引入。如果只是打包的话我们可以通过maven的optional属性设置为ture来解决。但是，在打成spring boot start包实现自动装配的时候，一般情况下会显示去引入依赖，如果jar包不存在会报错。那么，我们需要一个方案来解决这个问题。 思路 我们其实在spring的cache中有类似...