闻心阁

一蓑烟雨看苍生,半壶浊酒笑红尘

使用Husky管理项目的Git Hooks(以配置Uni-app的ESLint和Commit Lint为例)

2021-03-07 约 1 分钟读完 搬砖秘籍
Git目前是毫无争议的项目版本管理的王者,而前端的项目大了之后我们通常需要利用一些Git Hooks来保证项目的质量。包括但不限于: eslint tslint 单元测试 E2E测试 style lint commit lint others checks 有的同学可能要说,没有这些项目质量也会很好,是的,一般这么说的,要么项目小,要么团队人少。如果你的项目人数>30,又是多分支开发的话,就会大概率需要这玩意。 初识Husky 原生的Git Hooks写法比较麻烦,Husky 做了比较好的封装。截止本文发布之日(2021-03-07),Husky已经发布了5.x版本,建议使用最新的版本,因为它有几个优势: 0依赖,没有依赖第三方的任何JS包 轻量,20K左右,Husky4要1MB 快,0.01s的量级,Husky要0.5s 跨平台,Linux、macOS、Windows都支持 安装 npm install husky --save-dev && npx husky init 是,就这一句就够了,自动会初始项目。观察你的项目,你会发现多了一个.husky目录,package.json中添加了prepare的命令: 添加ESLint 这里有一个策略,如果每次提交都进行全局的ESLint Check的话,效率会很慢。所以我们需要添加一个策略,就是每次提交的时候,只对你所修改的文件的做ESLint,这样效率会提高不少。要实现这个功能,需要借助一个非常好用的包:lint-staged。 先安装: npm install lint-staged --save-dev 配置命令: lint-staged有多种配置方法。 package.json .lintstagedrc .lintstagedrc.json .lintstagedrc.yaml .lintstagedrc.yml lint-staged.config.js, .lintstagedrc.js, or .lintstagedrc.cjs file in JS format 我个人还是习惯用package.json里写,也可以选择其他的。uni-app的Lint配置比较特殊,配置如下: "lint-staged": { "src/**/*.{js,ts,tsx,vue}": [ "vue-cli-service lint --fix src" ] }, 老的写法里还会加上git add这种,新版本已经不用了,都会自动加上。 配置Commit Lint 说起Commit Lint,有一个非常牛逼的库推荐给大家:conventional-changelog/commitlint: 📓 Lint commit messages 继续阅读

pm2 是怎样处理端口冲突的?

2020-04-04 约 1 分钟读完 搬砖秘籍
使用pm2在本地启动了2个项目,2个项目都是使用了3000的端口,发现2个项目都启起来了。这是什么黑科技啊? 定位一下3000端口 先定位了一下3000端口的占用情况。 lsof -i tcp:3000 结果: 是73333 看一下pm2 pm2 ls PID并不是73333 什么关系 使用下面命令 ps -ef | grep 95706 ps -ef | grep 95656 原来是 PID 和 PPID, 所以就明了了:父进程进行端口监听,然后分发给子进程进行处理。 思考 那2个项目中的API路径一样怎么办?

pm2 环境变量不生效的解决方法

2020-04-03 约 1 分钟读完 搬砖秘籍
pm2 设置环境变量有2种方法。 方法一 NODE_ENV=XXXXX pm2 XXXX 方法二 使用一个单独的配置文件,可以参考官网 https://pm2.keymetrics.io/docs/usage/environment/ 如: pm2 start ecosystem.config.js --env production 设置不生效 尝试了上述2种方法发现都不行,最近找到解决方案。如果实例已经建立了,即在 pm2 ls 中可以看到,那先需要运行 pm2 delete YOUR_INSTANCE 把原来删除才可以。

Xcode 升级 React Native Unknown argument type '__attribute__' in method 解决方案

2019-10-16 约 1 分钟读完 搬砖秘籍
最近MacOS系统更新,顺便把XCode的版本也进行了升级,但升级之后出现了错误: [RCTModuleMethod.mm:376] Unknown argument type '__attribute__' in method -[RCTLinkingManager getInitialURL:reject:]. Extend RCTConvert to support this type. 解决方案 参考这个issue:https://github.com/facebook/react-native/issues/25138 解决见这个PR:https://github.com/facebook/react-native/pull/25146 在 React/Base/RCTModuleMethod.mm 中的 RCTParseUnused 方法添加一行代码 static BOOL RCTParseUnused(const char **input) { return RCTReadString(input, "__attribute__((unused))") || RCTReadString(input, "__attribute__((__unused__))") || RCTReadString(input, "__unused"); }

使用 box-shadow 代替 border

2019-07-16 约 1 分钟读完 搬砖秘籍
在前端开发中给一个 div 添加边框,一般是使用border属性。 如下: <div class="box"> </div> CSS .box { background: blue; width: 100px; height: 100px; border: 3px solid red; } 效果图: 使用box-shadow实现 使用box-shadow也可以实现类似效果。 box-shadow: 0 1px 0 0 red; /* Border bottom */ box-shadow: 0 -1px 0 0 red; /* Border top */ box-shadow: -1px 0 0 0 red; /* Border left */ box-shadow: 1px 0 0 0 red; /* Border right */ box-shadow: 0 0 0 1px red; /* All the borders by using the spread properties */ 为什么要使用box-shadow 遇到了这样一个需求,当这个box被hover的时候,出现一个边框,这时候就会涉及一个盒模型的问题,当使用border的时候,会修改盒模型,但box-shadow不会。 继续阅读

Momentjs 中无法更改 locale 解决方法

2019-05-09 约 1 分钟读完 搬砖秘籍
Moment.js 是前端中一个非常强大的处理日期时间的库。有多强大?以致于每次引用它的时候都要考虑一下到底是不是需要一个这么重的库引用进来。而最近一个项目中用到了多语言的日期格式,需要将日期格式化成当地的日期显示格式,比如日本的金耀日、月耀日等等。 开始直接使用了Moment.js的locale函数 moment.locale('ja'); 结果不行,还是显示的中文的日期,后面在github上找到一个解决方案 import "moment/locale/ja" moment.locale("ja") PS:目前这个解决方案在我项目是可以work的,但无法保证后续moment更新之后,会不会直接『修复』这个问题。

修改 HTML5 中 video 样式

2019-04-04 约 1 分钟读完 搬砖秘籍
前几天收到一个需求,要实现一个背景视频播放的效果,在网上找了几个解决方案。 video.js 这是一起封装非常好的JS库了,可以实现非常棒的效果,一个效果图: 不过在我发现这个库之前,前人已经用了原生的<video>实现了,所以要在原生的基础上做修改。 显示 shadow DOM 要想自定义样式,需要先把浏览器的 shadow DOM 开启,开启方式如图: 打开之后就可以看到webkit内核对video的默认显示样式了 几个常用的控制样式 video::-webkit-media-controls-panel video::-webkit-media-controls-play-button video::-webkit-media-controls-volume-slider-container video::-webkit-media-controls-volume-slider video::-webkit-media-controls-mute-button video::-webkit-media-controls-timeline video::-webkit-media-controls-current-time-display video::-webkit-full-page-media::-webkit-media-controls-panel video::-webkit-media-controls-timeline-container video::-webkit-media-controls-time-remaining-display video::-webkit-media-controls-seek-back-button video::-webkit-media-controls-seek-forward-button video::-webkit-media-controls-fullscreen-button video::-webkit-media-controls-rewind-button video::-webkit-media-controls-return-to-realtime-button video::-webkit-media-controls-toggle-closed-captions-button 具体看字面意思应该就可以理解了,这是不做赘述了。 一个不算总结的后话 当前的解决方案其实更偏向移动端,在IE上还需要特殊写样式来HACK,要跨浏览器还是推荐使用框架来实现~