背景

脚手架是一个通用开发工具，之前本人写一下原生web工程时总是须要反复搭建开发环境、反复写简直雷同的配置文件。为了防止每次的反复工作，对立开发环境、标准，于是想到本人写一个脚手架用用，顺便记录一下。

目前集体习惯基于以后支流的webpack打包工具开发我的项目，所以此脚手架是基于webpack5开发的。

概览

本文咱们先实现作为脚手架最根本的性能：输出命令 创立对立的模板我的项目

开发

依赖

开发一个的脚手架，你至多须要如下npm包：

  • commander：命令行解决工具
  • inquirer：命令行交互工具
  • download-git-repo：git仓库下载工具
  • ora：终端loading丑化工具
  • chalk：命令行输出/输入丑化工具

初始化我的项目

mkdir web-clicd web-clinpm 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';// 定义一个loadingconst loading = ora('template downloading...');// 启动loadingloading.start()// loading 胜利loading.success()// loading 进行loading.stop()

基于下面上个第三方库再优化一下代码，就实现了最后版的脚手架开发

源码仓库

GitHub：https://github.com/LeoJ340/web-cli，欢送star⭐⭐⭐

如果你感觉本文对你有帮忙，还请帮忙点个赞❤，如果你有不同的见解，欢送评论区探讨。