2022-08-15 Pinia-下一代vue状态管理工具 定义Storevuex123456789101112131415/** * store/vuexStore.js */import { createStore } from 'vuex'// 创建一个新的 store 实例export const vuexStore = createStore({ // ...})/** * ma... 阅读全文…
2022-07-23 用npm ci来优雅的进行前端持续部署 前言npm依赖版本管理是前端开发过程中经常遇到的问题,统一依赖版本的重要性不言而喻。但是在实际场景里面,应该怎么做? 不可或缺的 package-lock.json我们知道 package.json(npm init) 文件只记录通过 npm install 方式安装的模块信息,而这些模块所依赖的其他子模块的信息不会记录。而package-lock.json(npm install) 文件锁... 阅读全文…
2022-07-23 对npm包版本管理的思考 npm包版本号控制原理npm包管理及依赖版本管理是通过package.json文件实现的。当你使用npm安装或更新一个包的时候,package.json里就自动添加了一条信息,包括包名和版本号。npm默认安装最新版本,然后在其版本号之前添加一个 ^ 符号。比如 ^16.8.0,它表明最低应使用 16.8.0 版本。并且在这之上,拥有相同大版本号的任何版本都是OK的。毕竟小版本和bugfix版... 阅读全文…
2022-06-19 初探微前端之single-spa入门 查看 single-spa demo 1. 微前端概述 Why Not Iframe 1.1 什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 微前端建构与框架无关,每个微应用都可以使用不同的框架,甚至不使用框架。 1.2 微前端的价值 增量迁移迁移是一项非常耗时且艰难的任务,比如有一个管理系统使用 JQuery 开发维护已经有... 阅读全文…
2022-02-19 如何保证前端代码质量(3) 年前的最后一个礼拜,由于所负责项目的暂停版本排期,于是乎有几天的空闲的时间,就想着把项目的代码质量搞上去。背景是,半年前我开始负责这个项目的前端开发,发现当时代码质量不理想。加之团队内部也着手把代码规范这件事落实下来。于是乎,就有了这个系列的文章。 我打算从三个方面对代码规范需要做的事情进行总结,后续有新的想法会继续更新。 代码质量-1 使用自动化工具提高代码质量 代码质量-2 制订代码规... 阅读全文…
2022-02-19 如何保证前端代码质量(1) 年前的最后一个礼拜,由于所负责项目的暂停版本排期,于是乎有几天的空闲的时间,就想着把项目的代码质量搞上去。背景是,半年前我开始负责这个项目的前端开发,发现当时代码质量不理想。加之团队内部也着手把代码规范这件事落实下来。于是乎,就有了这个系列的文章。 我打算从三个方面对代码规范需要做的事情进行总结,后续有新的想法会继续更新。 代码质量-1 使用自动化工具提高代码质量 代码质量-2 制订代码规... 阅读全文…
2022-02-19 如何保证前端代码质量(2) 年前的最后一个礼拜,由于所负责项目的暂停版本排期,于是乎有几天的空闲的时间,就想着把项目的代码质量搞上去。背景是,半年前我开始负责这个项目的前端开发,发现当时代码质量不理想。加之团队内部也着手把代码规范这件事落实下来。于是乎,就有了这个系列的文章。 我打算从三个方面对代码规范需要做的事情进行总结,后续有新的想法会继续更新。 代码质量-1 使用自动化工具提高代码质量 代码质量-2 制订代码规... 阅读全文…
2021-06-02 初识pnpm 缘起node_modules很久以前,前端圈子里就流传着这么一张关于node_modules的图 node_modules困境 这就是当时的node_modules困境,当使用 npm... 阅读全文…
2021-05-11 解决vue项目兼容低版本浏览器的方法 公司项目,因为一些特殊原因,需要兼容到 IE,最低还要兼容到 chrome 33,记录一下解决过程。 起因是在项目中引入了一个新包 crypto-js,其中的一个文件 enc-base64url.js 中的 parse 和 stringify 方法使用ES6的默认参数语法,导致低版本浏览器无法解析:12parse: function (base64Str, urlSafe=true) ... 阅读全文…
2021-04-07 自动化构建工具gulp 前端工程化-初识前端工程化 前端工程化-自动化构建工具gulp gulp 是一个前端自动化构建工具。他可以将开发流程中让人痛苦或耗时的任务自动化,从而减少你所浪费的时间、创造更大价值。 查看本文对应的的演示项目请点击这里 hello-gulp。 gulp的特点 简单:代码优于配置、node 最佳实践、精简的 API 集,gulp 让工作前所未有的简单。 高效:基于 node 强大的流(s... 阅读全文…