本文参加了由公众号@若川视野建议的每周源码共读活动,点击了解概况一同参加。
信任咱们在前端开发中都运用过很多前端脚手架,如vue-cli,create-vite,create-vue等;本篇文章将会为咱们具体介绍这些前端脚手架是怎么完结的,而且从零完结一个create-kitty
脚手架发布到npm上。
pnpm建立Monorepo环境
运用pnpm办理对项目进行办理是非常方便的,极大的处理了多个包在本地调试繁琐的问题。
什么是Monorepo?
便是指在一个大的项目库房中,办理多个模块/包(package),这种类型的项目大都在项目根目录下有一个packages文件夹,分多个项目办理。大约结构如下:
-- packages
-- pkg1
--package.json
-- pkg2
--package.json
--package.json
简略来说便是单库房 多项目
目前很多咱们熟知的项目都是选用这种形式,如Vant,ElementUI,Vue3等。打造一个Monorepo环境的东西有很多,如:lerna、pnpm、yarn等,这儿咱们将运用pnpm来开发咱们的脚手架create-kitty
。
运用pnpm
装置
首要新建文件夹kitty-ui
;然后履行
npm install pnpm -g
初始化package.json
pnpm init
新建装备文件 .npmrc
shamefully-hoist = true
这儿简略说下为什么要装备shamefully-hoist。
假如某些东西仅在根目录的node_modules时才有效,能够将其设置为true来提升那些不在根目录的node_modules,便是将你装置的依靠包的依靠包的依靠包的…都放到同一级别(扁平化)。说白了便是不设置为true有些包就有可能会出问题。
monorepo的完结
接下便是pnpm怎么完结monorepo的了。
为了咱们各个项目之间能够相互引证咱们要在根目录下新建一个pnpm-workspace.yaml文件将咱们的包相关起来
packages:
- 'packages/**'
这样就能将咱们项目下的packages目录下的一切包相关起来了,当然假如你想相关更多目录你只需求往里面添加即可。依据上面的目录结构很显然你在根目录下新packages文件夹,packages文件夹新建create-kitty
以及测试用的cli-demo
文件夹,并别离履行pnpm init
。
脚手架简略完结
在create-kitty
的package.json
中新增bin
属性然后指向index.js
。这儿去掉了main
属性,由于咱们开发的不是东西包。
{
"name": "create-kitty",
"version": "1.0.0",
"description": "",
"bin": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
当然,bin也支撑目标格式,让脚手架能够运用多个指令
"bin": {
"create-kitty": "index.js",
"create-app": "index.js"
},
新建create-kitty/index.js作为脚手架进口
#! /usr/bin/env node
console.log("hello kitty")
留意cli进口文件需求加#! /usr/bin/env node
指定脚本的解释程序为node,否则会报错
本地测试脚手架
来到测试包cli-demo
文件夹下直装置create-kitty
pnpm add create-kitty
然后就会发现cli-demo
下的package
呈现依靠,一同加上scripts
{
"name": "cli-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"create-kitty": "create-kitty"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"create-kitty": "workspace:^1.0.0"
}
}
然后履行pnpm run create-kitty
说明
当咱们上线的时分能够直接履行npm create kitty
或者npm init kitty
,它们其实便是履行npx create-kitty
解析用户输入参数
一般脚手架都会依据用户输入不同指令来做出不同操作,比方用户输入kitty-ui -v
提示版本号,kitty-ui -h
显示协助信息等。而完结这些基本原理便是process.argv
将create-kitty
下的进口文件index.js
修改为
#! /usr/bin/env node
console.log(process.argv);
然后履行这个文件并带几个参数
然后会发现用户传的参数在process.argv
数组的第二位今后,这样咱们就能够依据用户输入不同参数做不同操作了。可是这样很不方便,所以咱们能够运用框架来处理。
运用第三方库解析参数
首要装置command-line-args
库
pnpm add command-line-args -S
接下来看它是怎么获取用户输入参数的
#! /usr/bin/env node
import commandLineArgs from 'command-line-args';
//装备指令参数
const optionDefinitions = [
{ name: 'version', alias: 'v', type: Boolean },
{ name: 'arg1', type: String },
{ name: 'arg2', type: Number },
];
const options = commandLineArgs(optionDefinitions);
console.log(options);
留意这儿运用了es6的语法,所以需求将package.json
中的type指定为module
接下来实战一些,检测用户输入--help
指令,然后咱们输出一个协助的装备。
首要装置command-line-usage
pnpm add command-line-usage -S
首要引入commandLineUsage
,然后写个装备
import commandLineUsage from 'command-line-usage';
//协助内容
const helpSections = [
{
header: 'create-kitty',
content: '一个快速生成组件库建立环境的脚手架',
},
{
header: 'Options',
optionList: [
{
name: 'version',
typeLabel: '{underline boolean}',
description: '版本号',
},
{
name: 'arg1',
typeLabel: '{underline string}',
description: '参数1',
},
{
name: 'arg2',
typeLabel: '{underline number}',
description: '参数2',
},
],
},
];
在command-line-args
中装备个help
指令,当获取到help
的时分直接打印
const optionDefinitions = [
{ name: 'help', alias: 'h', type: Boolean },
{ name: 'version', alias: 'v', type: Boolean },
{ name: 'arg1', type: String },
{ name: 'arg2', type: Number },
];
const options = commandLineArgs(optionDefinitions);
if (options.help) console.log(commandLineUsage(helpSections))
可是这样如同不太好看。这儿能够凭借chalk
东西给打印加个色彩
pnpm add chalk -S
我比较喜欢绿色,所以让控制台输出绿色的字体
import chalk from 'chalk';
...
if (options.help) console.log(chalk.green(commandLineUsage(helpSections)))
当然它还有很多用法,感兴趣能够自己去研究。到这儿关于用户参数解析部分差不多就结束了,下面介绍怎么完结交互式指令
交互式指令
当咱们运用脚手架时,有些会提示咱们输入项目称号和挑选模板等,比方履行npm create vite
的时分
假如仅仅简略交互能够经过node自带的process.stdin
或者readline
模块完结。比方用readline
完结一个简略的交互式指令
import readline from 'readline'
...
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
rl.question('你是谁?', function (anwser) {
console.log(`我是${anwser}`);
//添加close事件,否则不会结束
rl.close();
});
可是这儿并不打算用原生的交互,而是运用prompts
东西完结。首要装置
pnpm add prompts -S
然后模拟一个交互式表单,其中又输入文字,暗码,单选,多选
import prompts from 'prompts'
const promptsOptions = [
{
type: 'text',
name: 'user',
message: '用户'
},
{
type: 'password',
name: 'password',
message: '暗码'
},
{
type: 'select',//单选
name: 'gender',
message: '性别',
choices: [
{ title: '男', value: 0 },
{ title: '女', value: 1 }
]
},
{
type: 'multiselect', //多选
name: 'study',
message: '挑选学习框架',
choices: [
{ title: 'Vue', value: 0 },
{ title: 'React', value: 1 },
{ title: 'Angular', value: 2 }
]
},
]
const getInputInfo = async () => {
const res = await prompts(promptsOptions)
console.log(res)
}
getInputInfo()
然后履行看下作用
咱们拿到用户输入的表单即可履行相应的操作。
拉取模板
当咱们获取到用户输入或挑选的信息的时分,咱们就能够输出对应模板给用户。这儿有两种挑选,一种是直接将模板放在包里,另一种是长途拉取git库房。本篇文章暂时先介绍第二种方法
首要装置download-git-repo
,运用它的clone方法
pnpm add download-git-repo -S
然后装置一个loading
插件ora
pnpm add ora -S
写一个clone函数(这儿便于文章解说全都写在一个文件里,后续会进行模块的规划)
const gitClone = (remote, name, option) => {
const downSpinner = ora('正在下载模板...').start();
return new Promise((resolve, reject) => {
download(remote, name, option, err => {
if (err) {
downSpinner.fail();
console.log("err", chalk.red(err));
reject(err);
return;
};
downSpinner.succeed(chalk.green('模板下载成功!'));
resolve();
});
});
};
界说长途库房模板列表以及分支而且对项目称号进行一些校验,然后在获取到用户挑选信息后履行gitclone
const remoteList = {
1: "https://gitee.com/geeksdidi/kittyui.git",
2: 'xxx'
}
const branch = 'master'
const getInputInfo = async () => {
const res = await prompts(promptsOptions)
if (!res.name || !res.template) return
gitClone(`direct:${remoteList[res.template]}#${branch}`, res.name, { clone: true })
}
getInputInfo()
然后添加一些个性化校验
const promptsOptions = [
{
type: 'text',//单选
name: 'name',
message: 'project-name',
validate(val) {
if (!val) return '模板称号不能为空!';
if (fs.existsSync(res.name)) return '项目名已存在'
if (val.match(/[^A-Za-z0-9u4e00-u9fa5_-]/g)) return '模板称号包括非法字符,请重新输入';
return true;
}
},
{
type: 'select',//单选
name: 'template',
message: 'select a framework',
choices: [
{ title: 'kitty-ui', value: 1 },
{ title: 'kitty-demo', value: 2 }
]
}
]
最后看下履行作用
clone成功后加上提示告知用户怎么运用,然后进行发布
const gitClone = (remote, name, option) => {
const loadingOra = ora('正在下载模板...').start();
return new Promise((resolve, reject) => {
download(remote, name, option, err => {
if (err) {
loadingOra.fail();
console.log("err", chalk.red(err));
reject(err);
return;
};
loadingOra.succeed(chalk.green('success'));
console.log(`Done. Now run:rn`);
console.log(chalk.green(`cd ${name}`));
console.log(chalk.blue("npm install"));
console.log("npm run devrn");
resolve();
});
});
};
发布
一般来说发布前要进行打包生成commonjs以支撑低版本node,这儿暂时不进行打包操作,直接履行pnpm publish
即可完结发布(留意,pnpm发布时需求先将代码提交到长途库房)。
运用
随意新建文件夹然后履行npm init kitty
或者npm create kitty
一同文件中呈现了咱们的模板文件
总结
本篇文章介绍了怎么运用pnpm建立Monorepo
环境以及本地开发包的测试。一同解说了怎么运用command-line-args
,download-git-repo
,prompts
等东西的运用,最终完结了一个交互式的指令行的脚手架create-kitty
。
后面会对create-kitty
进行完善,让它成为一个能够快速建立vue3组件开发环境的脚手架,假如你对组件库开发感兴趣的话,欢迎关注Vite+TypeScript从零建立Vue3组件库专栏一同讨论学习。组件库的一切完结细节都在这个专栏里。
假如这篇文章对你有所协助的话,点个赞吧!
源码地址
create-kitty