背景
脚手架是一个通用开发工具,之前本人写一下原生web工程时总是须要反复搭建开发环境、反复写简直雷同的配置文件。为了防止每次的反复工作,对立开发环境、标准,于是想到本人写一个脚手架用用,顺便记录一下。
目前集体习惯基于以后支流的webpack打包工具开发我的项目,所以此脚手架是基于webpack5开发的。
概览
本文咱们先实现作为脚手架最根本的性能:输出命令 创立对立的模板我的项目
开发
依赖
开发一个的脚手架,你至多须要如下npm包:
- commander:命令行解决工具
- inquirer:命令行交互工具
- download-git-repo:git仓库下载工具
- ora:终端loading丑化工具
- chalk:命令行输出/输入丑化工具
初始化我的项目
mkdir web-cli
cd web-cli
npm init -y
在 package.json
配置文件中定义bin
字段
node.js 内置了对命令行操作的反对 bin
字段能够定义命令名和关联的执行文件。
我的项目中会应用ES6模块化开发,须要转换成最终执行命令的node.js能辨认的common.js模块化,在script
定义Babel编译的命令
"bin": {
"web": "./bin/index.js"
}
在根目录下创立src/index.js
文件作为入口,并在行首退出一行 #!/usr/bin/env node
指定以后脚本由node.js进行解析
Babel配置
我的项目中会应用ES6模块化开发,须要配置Babel转换成最终执行命令的node.js能辨认的common.js模块化,装置相干依赖:
npm install --save-dev @babel/core @babel/cli @babel/preset-env
在 package.json
配置文件中script
字段定义Babel编译的命令
"scripts": {
"build": "babel src -d dist"
}
增加Babel配置文件babel.config.json
{
"presets": ["@babel/preset-env"]
}
测试一下成果
除了将我的项目发包再global装置外,咱们能够在我的项目根目录下执行npm link
命令把指定的执行文件链接到全局环境。咱们在入口代码中写一个输入hello world
#!/usr/bin/env node
console.log('helo world!')
执行npm link
后,咱们关上命令行终端输出:web
咱们能看到输入hello world
模板我的项目
咱们须要创立一个实现通用配置的模板我的项目并上传到GitHub的公共仓库,这一步就不多演示了。我创立了一个基于webpack5并实现htmlWebpackPlugin、css资源解决、JavaScript资源解决及根底优化等根底配置的我的项目模板:https://github.com/LeoJ340/we…
接下来,咱们须要通过输出命令拉取仓库代码并动静配置一些个人信息。须要实现的逻辑是:
- 在命令行输出创立我的项目的命令以及我的项目名
- 输出我的项目或作者的根本信息
- 去GitHub拉取模板我的项目到自定义我的项目名的目录下
- 依据读取的我的项目信息批改
package.json
配置
装置相干依赖:
npm install commander download-git-repo [email protected]
commander
commander是一个用来注册命令以及获取命令行参数的第三方库,commander的注册命令根本用法如下:
import { program } from 'commander';
program.command('命令 [参数]', '命令形容', opts).action(回调函数)
// 解析用户执行时输出的参数
// process.argv 是 nodejs 提供的属性
program.parse(process.argv);
download-git-repo
download-git-repo是一个用于下载GitHub、Gitlab上的公共仓库的库。根本用法如下:
import download from 'download-git-repo';
download(repository, destination, options, callback)
- repository:近程仓库的地址
- destination:下载到本地的门路
- options:配置参数(若传入函数,则笼罩回调函数)
- callback:回调函数
inquirer
inquirer是一个提供了命令行的交互操作的库(新版的inquirer只反对ESM,即应用babel编译也会报错,所以这里须要应用老版本),用法也很简略(摘自官网):
import inquirer from 'inquirer';
inquirer
.prompt([
/* Pass your questions in here */
])
.then((answers) => {
// Use user feedback for... whatever!!
})
.catch((error) => {
if (error.isTtyError) {
// Prompt couldn't be rendered in the current environment
} else {
// Something else went wrong
}
});
接下来,咱们批改一下入口代码:
#!/usr/bin/env node
import { program } from 'commander';
import inquirer from 'inquirer';
import download from 'download-git-repo';
program.version('1.0.0')
// 注册create命令,name作为参数 指我的项目名
program.command('create <name>').action(name => {
// 获取一些我的项目信息
inquirer.prompt([
{
name: 'author',
message: '你的名字是:'
},
{
name: 'version',
message: '版本号',
default: '1.0.0'
},
{
name: 'description',
message: '我的项目形容',
default: 'a web project template with Babel & ESLint'
}
]).then(res => {
// 拿到信息参数
const { author, version, description } = res
const beginTime = new Date().getTime()
download(`LeoJ340/webpack-template`, `./${name}`, err => {
const time = (new Date().getTime() - beginTime) / 1000
console.log(err || `create project finish in ${time}s`)
})
})
});
program.parse(process.argv)
到这里,咱们实现了脚手架最根本的输出命令、下载仓库的性能。通过inquirer
获取的参数能够应用nodeJS的fs
文件库批改package.json
文件
优化
到目前为止,咱们实现的脚手架最根本的性能,然而咱们发现…命令行太丑了。于是决定优化一下,这里须要依赖两个库:chalk、ora
chalk
chalk是一个命令行丑化工具,可能让你输入五彩斑斓的命令。
npm i [email protected]
import chalk from 'chalk';
console.log(chalk.green(`create project finish in 1s`))
ora
ora是一个实现命令行loading成果的库。应用办法也很简略:
npm i [email protected]
import ora from 'ora';
// 定义一个loading
const loading = ora('template downloading...');
// 启动loading
loading.start()
// loading 胜利
loading.success()
// loading 进行
loading.stop()
基于下面上个第三方库再优化一下代码,就实现了最后版的脚手架开发
源码仓库
GitHub:https://github.com/LeoJ340/web-cli,欢送star⭐⭐⭐
如果你感觉本文对你有帮忙,还请帮忙点个赞❤,如果你有不同的见解,欢送评论区探讨。
发表回复