Awesome Command-line Utilities

2018-07-09 · 48 min read

近年来,在 Node.js 的推动下,前端技术大放异彩,告别“石器时代”,进入“工业时代”。随着前端项目复杂度的不断加深,工程化、规范化、自动化等主题,摆在了所有前端开发者的面前,而这些主题无不例外都是构建在以 Node.js 为基础的工具上的。

在最近的实践过程中,发现了不少好用的库。在这里集中整理,推荐给大家,帮大家省去一些搜索和试用的时间。

下面推荐的库大部分都是我使用过的,可能还有同类型更好的选择,欢迎大家补充。

JavaScript 中的位运算和权限设计

2019-03-30 · 62 min read

1. 内容概要

本文主要讨论以下两个问题:

  • JavaScript 的位运算:先简单回顾下位运算,平时用的少,相信不少人和我一样忘的差不多了
  • 权限设计:根据位运算的特点,设计一个权限系统(添加、删除、判断等)

使用 Cloudflare Pages 部署静态网站

2022-07-06 · 30 min read

2021 年底的时候,我通过 web archive 找回了所有网站页面,重新整理并使用 react + SSG 的方式,搭建了当前这个站点。最开始的时候是部署在 vercel 上的,整体用起来还是很方便的,但是访问速度比较尴尬,按照 vercel 官方的说明改了 DNS 解析,结果我测试发现,国内无代理可以直接访问,但是香港却不行...

webpack5 升级记录

2021-03-15 · 19 min read

升级

webpack 5 发布已经挺久的了,但是项目使用的部分核心库,没有配套升级。所以一直 pending 到现在。

具体过程不细说,每个项目的配置不同,可能问题也不同。我把我遇到的问题记录在了文章结尾,供大家参考。

基于 rem 的前端布局方案

2020-04-29 · 11 min read

本文很简单,分享一下我们目前使用的 rem 布局方案,大体的思路和之前社区里的其他方案基本一致,但是在实际使用中发现不少问题,逐渐演变成了今天的模样。

目前这套方案大体上是比较稳定的,可能日后随着设备的更新、迭代、升级,vw 等新方案会越来越普及,布局也就不会像现在这么麻烦了。

SSR 框架分享

2019-11-29 · 2 min read

这是2019年11月做的一次内部分享,介绍我在新团队搭建的一套 SSR 框架。

这套框架后续进行了多次迭代,这里主要介绍初版的实现原理等内容,大家凑合看。

Egg 和 Webpack 项目搭建实践

2019-03-30 · 13 min read

最近的项目技术栈使用 Egg + React,因为本身有 Egg,所以不希望在单独启动类似 webpack-dev-server 的工具来运行前端,而是在开发模式下,前端直接基于 Egg 运行起来。想法是好的,可是实现起来颇费了一番周折。最终的效果在  Egg-Webpack-Starter,有同样需求的朋友可以看看。下面详细讲讲配置和使用方法:

我们主要的目的是使用 Egg + Webpack 搭建一套前后端统一的开发环境,主要包括:

  • 后端 Node.js 使用 Egg 框架
  • 前端使用基于 webpack 的工作流,与具体框架无关(使用 react 做演示)
  • 开发过程中无需分别启动前端与后端应用(基于 egg-webpack)

npm 根据 scope 区分用户及仓库地址

2018-12-31 · 9 min read

简介

npm 很早就支持了 scope 功能,当前很多流行的库采用这种形式发布,如 babel:

{
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0"
  }
}

scope 是一种很好的包管理方式。统一的“命名空间”,清晰、好辨识;在 registry 中使用统一的 organization 管理,不必担心命名冲突和冒用等。