关于前端:前端脚手架开发入门

脚手架是一个通用开发工具，之前本人写一下原生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 进行解析

我的项目中会应用 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 是一个命令行丑化工具，可能让你输入五彩斑斓的命令。

npm i [email protected]

import chalk from 'chalk';
console.log(chalk.green(`create project finish in 1s`))

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⭐⭐⭐

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

关于前端:前端脚手架开发入门

背景

概览

开发

依赖

初始化我的项目

Babel 配置

模板我的项目

优化

chalk

ora

源码仓库