2023-05-21 使用Typescript和rollup开发一个工具库,并使用github actions来自动发布npm包 工程化 前端 在日常开发中,经常会遇到一些通用的逻辑,导致每次都需要复制粘贴。而我们作为 coder,可以将一些常用业务逻辑封装成通用的函数库,并发布到 npm 中。这样,每次遇到新的项目时,只需要 install 一下即可 这里我们已经有了一个fe-u
2022-12-01 lerna在单仓库管理多项目的使用小结 工程化 前端 lerna 是一个 monorepo 工具,用来在一个仓库中管理多个项目。而我最近向造个轮子,这个轮子需要抽离出一些组件库,且自身也会用到。而 lerna 就非常适合这种场景。 下载 全局下载 yarn global add lerna 或
2022-11-11 Webpack原理之HMR( Hot Module Replacement,可以翻译为「模块热更新」) Webpack工程化 前端 HMR 能够在保持页面状态不变的情况下动态更新代码模块,在 webpack 实现 HMR 之前,应用的加载更新都是一种页面级别的院子操作。即使再小的改动,如更新字体大小等都会重新加载整个页面,会降低整体开发效率,如: 对于复杂表单,你需要
2022-11-10 Webpack的loader和plugin的编写 Webpack工程化 前端 loader 的链式调用和顺序执行loader 就是一个 js 函数,它的作用就是接收源码,并返回新的源码。 如果是多个 loader 串行,则执行顺序是从右向左 module.exports = { rules: [
2022-11-08 如何搭建一个前端开发环境(六):如何优化webpack? Webpack工程化 前端 前端开发配置系列文章的 github 仓库为: https://github.com/SaebaRyoo/webpack-config ,如果您在看的过程中发现了什么不足和错误,感谢您能指出! 作为一个前端开发,Webpack 一定不陌生,
2022-11-07 如何搭建一个前端开发环境(五):状态管理库Redux和Axios请求配置 工程化 前端 前端开发配置系列文章的 github 仓库为: https://github.com/SaebaRyoo/webpack-config ,如果您在看的过程中发现了什么不足和错误,感谢您能指出! redux为什么使用在一个中大型的项目中,统一
2022-11-06 如何搭建一个前端开发环境(四):配置React-Router并对代码进行分割和动态import 工程化 前端 前端开发配置系列文章的 github 仓库为: https://github.com/SaebaRyoo/webpack-config ,如果您在看的过程中发现了什么不足和错误,感谢您能指出! React Router 快速了解React
2022-11-05 如何搭建一个前端开发环境(三):添加eslint+husky+lint-stage等预检工具 工程化 前端 前端开发配置系列文章的 github 仓库为: https://github.com/SaebaRyoo/webpack-config ,如果您在看的过程中发现了什么不足和错误,感谢您能指出! 上一篇讲了如何创建一个简单的开发环境搭建,但
2022-11-04 如何搭建一个前端开发环境(二):Webpack(二) - 添加React + TS Webpack工程化 前端 前端开发配置系列文章的 github 仓库为: https://github.com/SaebaRyoo/webpack-config ,如果您在看的过程中发现了什么不足和错误,感谢您能指出! 上一篇总结了基础的 webpack 概念。那
2022-11-03 如何搭建一个前端开发环境(一):Webpack(一) - 基础概念 Webpack工程化 前端 前端开发配置系列文章的 github 仓库为: https://github.com/SaebaRyoo/webpack-config ,如果您在看的过程中发现了什么不足和错误,感谢您能指出! 概念Webpack 是一个静态模块打包器,它将