create-vite 源码阅读

前言

create-vite 主要是用于创建一个项目并根据用户选择配置的template将模板文件写入当前创建的目录中。 vite提供了多个模板及其ts版本。

重要插件

使用minimist解析命令行参数使用prompts包来实现命令行指引配置的功能。使用kolorist包实现不同颜色的关键词。

来看一下这些包的简单使用，方便后续查看create-vite中的源码。

minimist

通过process.argv获取命令行参数的字符串数组，前两个值是固定的，第一个是node程序路径，第二个则是当前执行的文件路径。之后的才是输入的各种参数

const { argv } = process;
console.log('argv', argv); 

> node src/index.js-v vv -f

argv ['/usr/local/Cellar/node@16/16.18.1/bin/node','/Users/zgm/Documents/Web/node/node-js/src/index.js','-v','vv','-f'] 

使用minimist后可以把输入的参数进行解析，使用_保存命令中的各种参数，当匹配到-或者--字符时忽略后边的所有的参数。-、--字符后边的命令会添加到对象中，当命令后边有参数(非options)，那么该命令的值就是后边的参数，否则值为true。

const argv = minimist(process.argv.slice(2), { string: ['_'] }); // _ 中的属性会被转为字符串类型
console.log(argv); 

> node src/index.js-v vv -f

{ _: [], v: 'vv', f: true } 

源码：

const argv = minimist(process.argv.slice(2), { string: ['_'] });
console.log(argv); 

> node src/index.js _asdf 123 321-v vv -f

{ _: [ '_asdf', '123', '321' ], v: 'vv', f: true } 

prompts

轻量级,美观且用户友好的交互式提示库。

单个提示的传入一个对象即可

const prompts = require('prompts');

(async () => {const response = await prompts({type: 'text',name: 'weather',message: 'What is the weather today?',});console.log(response);
})(); 

多个就需要传入数组

const prompts = require('prompts');

(async () => {const response = await prompts([{type: 'text',name: 'weather',message: 'What is the weather today?',},