前言
-
本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。
-
这是源码共读的第35期，链接：juejin.cn/post/711356… 。
学习目标
- 了解如何给vite自动添加eslint和prettier
- 学习如何下载包到本地
如何使用
通过运行npm init vite-pretty-lint，选择vue和yarn一键安装（以vue框架和yarn为例）；
阅读思路
- git clone github.com/tzsk/vite-p… 下载项目
- 打开package.json文件，通过bin找到入口文件路径
lib/main.js - 从main.js文件中看run()函数是主要执行入口
从上图可以看到主流程执行了以下几个关键操作：
- 下载相关的包（通过child_process的exec子进程下载包）；
- 把相关包的规则组合生成相关的文件并写入到本地；
- 一种json格式 .xxx.json ： 这种比较好实现，组合成json格式的数据后 fs.writeFileSync(xxxx, JSON.stringify(eslint, null, 2));
- 一种是js,ts等格式 vite.config.js：这种需要通过babel转化，先把js文件通过babel解析为ast数据格式，经过各种type判断整合数据，然后再通过Babel的transformFromAstSync方法转换成处理好的js文件，最后通过fs.writeFileSync(viteFile, viteConfig);写入到本地文件中；
相关包：
-
commonPackages = [ 'eslint', 'prettier', 'eslint-plugin-prettier', 'eslint-config-prettier', 'vite-plugin-eslint', ];
-
相关文件写入：
- .eslintrc.json
- .prettierrc.json
- .eslintignore
- vite.config.js
-
总之，vite 项目自动添加 eslint 和 prettier的本质把相关的包和通用文件及相关规则封装起来，通过终端命令后选择的方式，匹配出相应的包和相应的规则并下载到使用的当前项目的本地及文件写入当前项目中；
关于控制台命令的方式选择操作如何实现
import chalk from 'chalk'; // 主要用来改变console的颜色
import gradient from 'gradient-string'; // 炫彩风格的字符串 渐变色 可以和chalk结合起来一起使用
import { createSpinner } from 'nanospinner'; // Node.js 终端微调器，进度、成功、失败等状态友好展示，也可用 ora 代替
import enquirer from 'enquirer'; // cli终端友好提示库 类似与inquirerjs库
enquirer提供了cli终端相关的不同类型的选项，用来实现npm init vite-pretty-lint之后关于框架和下载工具的选择；
- enquirer与inquirerjs库有何区别？
- 使用场景：Enquirer 和 Inquirer.js 都可用于创建交互式命令行界面的工具。
- 主要区别： Enquirer 更加轻量级， Inquirer.js 提供了更多的功能和更大的生态系统。
总结
-
学习到了通过 exec(
npm install --save-dev xxx xxx, { cwd: projectDirectory }, (error) => {})的方式，代码自动下载相关包到对应的项目目录； -
了解到项目中如何自动添加eslint和prettier
