随笔分类 - 前端工程化
monorepo实践：yarn workspace + vite + typescript + react
摘要：前言 最近需要用到多包管理 monorepo 开发新项目，所以提前预研一下项目搭建。 monorepo(monolithic repository)是一种项目架构，就是用一个仓库管理多个项目（应用，库），react和babel的源码仓库都是用这种方式在管理。 优缺点略过，可以参考：精读《Monore
阅读全文
Vite+React搭建开发构建环境实践
摘要：前言 使用 Vite 已经有两年了，期间使用它开发过单页面应用，也开发过浏览器扩展插件，对比日常工作中用到的 webpack 构建速度大幅提升，开发体验也好很多。 虽然相比于 webpack 来说简单了很多，但是仍然有一些配置需要记录一下，以便之后可以快速搭建一个本地开发构建的环境。 使用 crea
阅读全文
自制Chrome扩展插件：用于重定向js
摘要：前言 作为一个前端开发， 在调试生产环境的代码时，是否苦于生产环境代码被压缩，没有sourcemap？ 有没有想过将生产环境的js直接重定向为本地开发环境的js？ 玩微前端时，有没有想过用本地的子应用js去替换线上的子应用js？ 或者有没有想过修改别人网站的文件，直接完成某些非常规操作？ 最近因为项
阅读全文
解析Markdown文件生成React组件文档
摘要：前言 最近做的项目使用了微前端框架single-spa。 对于这类微前端框架而言，通常有个utility应用，也就是公共应用，里面是各个子应用之间可以共用的一些公共组件或者方法。 对于一个团队而言，项目中公共组件和方法的使用难点不在于封装不在于技术，很多时候在于团队内部成员是否都能了解这些组件，以避
阅读全文
微前端框架single-spa初探
摘要：前言 最近入职的一家公司采用single-spa这个微前端框架，所以自学了此框架。 single-spa这个微前端框架虽然有中文文档，但是有些零散和晦涩。 所以我想在学习之余，写篇博客拉平一下这个学习曲线。 什么是微前端？ 微前端的灵感来源于服务端微服务的理念。 可以简单理解为，在开发一个复杂前端应
阅读全文
分享一个博客园皮肤制作脚手架
摘要：前言 最近本着新年新气象的想法，想换套新的博客园皮肤。 之前自己做了一套制作皮肤的解决方案，这是当时分享皮肤以及解决方案的博客： "分享一款博客园皮肤及其解决方案" 。 不过在制作新的皮肤过程中，使用这个解决方案时还是遇到了很多问题。 而为了更方便地制作新皮肤，就升级了原先的解决方案，搭建了这套博客
阅读全文
使用@babel/preset-typescript取代awesome-typescript-loader和ts-loader
摘要：前言 之前写过一篇旧React项目安装并使用TypeScript的文章： "在React旧项目中安装并使用TypeScript的实践" 。 博客里使用awesome typescript loader对Typescript代码进行检测和转换。 而这几天又修改了一下自己的脚手架，使用@babel/pr
阅读全文
使用dva改造React旧项目的数据流方案
摘要：## 前言 最近在给自己的脚手架项目转到TypeScript时，遇到了一些麻烦。 项目之前采用的是react + react-redux + redux-thunk + redux-actions +redux-promise的体系。 当项目转TypeScript时,react和react-redu
阅读全文
在React旧项目中安装并使用TypeScript的实践
摘要：前言 本篇文章默认您大概了解什么是TypeScript，主要讲解如何在React旧项目中安装并使用TypeScript。 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多，但都是一些语法概念或者简单例子，真正改造一个React旧项目使用TypeScript的文章很少。 所以在这里记录
阅读全文
webpack打包经验——处理打包文件体积过大的问题
摘要：前言 最近对一个比较老的公司项目做了一次优化，处理的主要是webpack打包文件体积过大的问题。 这里就写一下对于webpack打包优化的一些经验。 主要分为以下几个方面： 1. 去掉开发环境下的配置 2. ExtractTextPlugin：提取样式到css文件 3. webpack bundle
阅读全文
分享一款博客园皮肤及其解决方案
摘要：前言 要分享的皮肤就是您现在看到的这款，虽然还有不少瑕疵，但是这个皮肤也算是大致完成。 本皮肤完全使用css样式，无需申请js权限，对移动端的也做了相应处理，也许您可以从其 中得到些借鉴。 当然皮肤其实是次要的，主要是分享一下这个解决方案。 这里是项目地址：cnblogs-skin 2020-1-1
阅读全文
【Webpack的使用指南 02】Webpack的常用解决方案
摘要：前言 说是解决方案实际上更像是webpack的插件索引。 写这一篇的目的是为了形成一个索引，将来要用时直接来查找即可。 索引目录 1. 自动构建HTML，可压缩空格，可给引用的js加版本号或随机数：html webpack plugin 2. 处理CSS：css loader与style loade
阅读全文
【Webpack的使用指南 01】Webpack入门
摘要：使用Webpack有一段时间了，但是感觉之前学的用的都比较零散，所以在这里整理一下Webpack的使用知识，从入门到进阶。 创建项目 首先创建最简单的一个项目 npm init 得到以下项目结构： 安装Webpack 先来个全局的 npm i webpack g 再安装项目中的 npm i webp
阅读全文
