工程化
文章平均质量分 90
旅行中的程序员
旅行中的程序员
展开
-
手把手实现一个web代码模板快速生成CLI工具
前言在上一篇文章中,我们实现了一个web工程通用脚手架工具,目的是快速搭建项目。在实际开发中,特别是后台管理系统,有很多相似的代码实现。于是乎,我们可以继续实现一个快速生成web代码模板的工具,告别复制/粘贴。基本流程基本思路其实很简单,就是通过命令调取定义好的模板,然后生成代码文件:项目结构xman-tcli├─ bin│ └─ xmant.js├─ command│ ├─ createFile.js│ └─ createManyFiles.js├─ config│ └─原创 2021-11-17 22:28:02 · 864 阅读 · 0 评论 -
手把手从0到1实现一个web工程通用脚手架工具
前言前端工程化是人们常常提到的东西,其目的基本上都是为了提高开发效率,降低成本以及保证质量。而脚手架工具则是前端工程化中很重要的环节,一个好用的web工程通用脚手架工具可以在很大程度上做到上面所提到的。我们不仅要会用市面上很多成熟的脚手架,还要能根据实际的项目情况,去实现一些适合自己项目的脚手架。本文就将和大家一起实现一个基础的通用脚手架工具,后续就可以随意拓展了。项目结构项目的整体结构如下,后面我们会一步步编写代码,最终实现整个脚手架工具。xman-cli├─ bin│ └─ xman.j原创 2021-10-18 10:09:59 · 590 阅读 · 0 评论 -
从项目搭建到发布插件到npm
前言在我们平时的开发工作中,我们可以把很多可以公用的组件和方法抽离出来,以npm插件的形式发布在npm或者自己的npm私库上,以达到复用效果。本文会以一个react插件为例,经历开发工程搭建—插件编写—npm打包发布等一系列步骤,和小伙伴们一起开发一个npm插件。工程搭建项目工程以为webpack5+、react17+、less、TypeScript为主体进行搭建。项目结构|-- demo |-- .babelrc |-- .gitignore |-- package.j原创 2021-09-15 20:51:49 · 199 阅读 · 0 评论 -
前端批量获取文件并打包压缩解决方案
前言前端文件下载我相信很多小伙伴并不陌生,下载文件的形式也有很多,例如,后端返回一个文件地址,我们把地址放在<a></a>标签里面点击下载;或者是通过后端接口返回文件流,我们再对流进行一系列的操作等等。单个件下载的解决方法有很多,但是当我们需要批量下载文件的时候,我们该怎么去做呢?方案面对这样的需求,我们提出了以下几个方案:方案一:直接获取后端返回文件地址数组,然后一个一个的去下载。但是这样每次下载一个文件,浏览器会显示比较多的下载任务;方案二:后端对先对文件进行打包压缩原创 2021-06-16 09:17:11 · 1500 阅读 · 3 评论