以Babel为例，讲述插件的机制
Babel 是一个 JavaScript 编译器 Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情： 语法转换 通过 Polyfill 方式在目标环境中添加缺失的功能（通过引入第三方 polyfill 模块，例如 ） 源码转换（codemods） Babel 和...
实现自定义脚手架
首先，每次创建项目后都需要很多重复性操作，比如安装UI库、css预处理器。在业务层面，每次也要添加一些必备的功能，比如登录、404页面等。其次，可以锻炼自己的技术。 脚手架创建项目的流程： 1. 让用户选择模板； 2. 根据用户输入填充模板； 3. 下载模板文件到创建的新文件夹中； 从框架来看，创建项目的时候需要选择是vue框架还是react框架，以及是否需要添加 typescript。 从插件来看，需要安装UI库、CSS预处理器、路由...
搭建前端脚手架
需求： 公司里前端初始项目有多个比如： 管理系统、electron、h5... 每次新项目都需要去找仓库里对应的基建代码？于是准备自搭一个脚手架，实现新项目时直接使用脚手架创建对应项目的模板。 采用monorepo的模式来管理脚手架、在这里只提供核心代码实现，废话不多说开干！开干！ 1、初始化项目 2、修改package内容 3、使用第三方包解析交互命令 使用prompts来解析命令，实现目标如通过 创建项目，如图： 在 文件中 使用...
汇总前端脚手架开发中常用的第三方库
在前端工程化方面我们使用的各种工具，绝大部分都是使用 写的。 比如，打包工具 webpack 及 rollup；前端框架 Vue 自带的脚手架工具 vue cli；以及 CSS 样式工具scss、less等等。 在日常工作中难免会遇到一些需求，需要自己创建一个脚手架工具来提升整个团队的研发部署效率。 目前，npm上汇集了大量优秀的开发脚手架的第三库，熟练掌握这些库，可以大大提升我们的开发效率。本文将介绍一些在开发前端脚手架方面非常常用的...
面试官：”Vite为什么快？“
面试官：”Vite为什么快？“ 阅读8分钟 前面一篇文章介绍了如何做 Vite 的插件开发 ，这篇文章介绍清晰 Vite 的构建原理，为什么比 Webpack 构建速度快这么多。 1\. 一句话解释 Webpack 的构建原理 前端之所有需要 类似于 Webpack 这样的构建工具，是为了提高项目的开发效率，Webpack 通过分析js中的 require 语句，分析出当前 js 文件所有的依赖文件，通过递归的方式层层分析后，得到整个项...
前端测试之Jest深入浅出
1\. 为什么要做前端测试 首先，我认为前端测试并不是所有项目都必须的，因为写测试代码是需要要花费一定时间的，当项目比较简单的时候，花时间写测试代码可能反而会影响开发效率，但是需要指出的是，我们前端开发过程中，编写测试代码，有以下这些好处： 1. 更快的发现bug，让绝大多数bug在开发阶段发现解决，提高产品质量 2. 比起写注释，单元测试可能是更好的选择，通过运行测试代码，观察输入和输出，有时会比注释更能让别人理解你的代码（当然，重要...
axios
https://www.kancloud.cn/yunye/axios/234845