CLI介绍
命令行界面（英语：command-line interface，缩写：CLI），是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。
目前前端开发中,CLI是常用的工具。前端三大框架Vue、React、Angular都有对应的CLI，包括现在最流行的前端工程化的打包工具Webpack，也有对应的webpack-cli。
在现代的前端开发中,CLI提高了开发的效率。让相应的前端开发者免去了大量的重复性操作，节省了大量的时间。CLI可以完成的功能，包括但不限于初始化生成对应的项目模板、执行特定的脚本文件、在项目中创建新的模块 。下面来介绍一下前端工程师如何使用node.js来完成一个CLI。
创建项目
打开终端，创建moka-cli的目录
mkdir moka-cli
进入目录，初始化项目
cd moka-cli npm init -y
根目录下新建bin目录,并新建index.js文件，此时目录结构如下
|-- moka-cli |-- package.json |-- bin |-- index.js
开发cli需要借助commander、inquirer、chalk三个库
npm install commander inquirer chalk --save
修改package.json文件，使用es moudle,并新增moka命令
package.json
{
"name": "moka-cli",
"version": "1.0.0",
"description": "",
"main": "index.js",
+ "type": "module",
+ "bin": {
+ "moka": "./bin/index.js"
+ },
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"chalk": "^4.1.0",
"commander": "^6.2.1",
"inquirer": "^7.3.3"
}
}
接下来需要在/bin/index.js中编程,在第一行添加如下代码，这行代码是告诉系统要用node来执行这个文件。
#!/usr/bin/env node
再添加下面代码
#!/usr/bin/env node
console.log('moka-cli run!')
然后在项目根目录下全局安装项目
npm install -g
到这里，一个简单的CLI就完成了，可以打开终端，在任意目录下输入moka,控制台就会打印出对应的消息。
$ moka moka-cli run!
第三方库介绍
moka-cli希望实现可以创建前端开发模板的功能，可以使用moka命令来创建一个vue或react项目。
先来介绍一下使用到到第三方的库
commander
文档地址
用来实现命令的库，在moka-cli中会用来实现create命令，实现用下面的命令行来创建一个vue-demo的项目
moka create vue vue-demo
inquirer
文档地址
实现用户和终端交互的库，在moka-cli中使用create指令的时候会询问是否覆盖已有项目
$ moka create vue moka-demo "_blank" href="https://github.com/chalk/chalk#usage" rel="external nofollow" >文档地址可以在终端界面显示出多种颜色的文本和背景
核心功能
在根目录创建actions和templates目录,目录结构如下
|-- moka-cli |-- package-lock.json |-- package.json + |-- actions + | |-- create.js |-- bin | |-- index.js + |-- templates + |-- react + | |-- app.js + | |-- index.js + | |-- src + | |-- index.js + |-- vue + |-- app.js + |-- index.js + |-- src + |-- index.jstemplats下面用来存放通过CLI要生成的项目的模板，在这里先随便创建几个文件展示一下。
修改/bin/index.js文件
#!/usr/bin/env node import create from '../actions/create.js'; import commander from 'commander'; const { program } = commander; program.version('0.0.1'); program .command('create <template> [name]') .description('新建项目') .action(create); program.parse(process.argv);修改./actions/create.js文件
import fs from 'fs'; import path from 'path'; import chalk from 'chalk'; import inquirer from 'inquirer'; import { fileURLToPath } from 'url'; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); const TEMPLATES = ['vue', 'react']; const targetPath = process.cwd(); function createTemplate(template, name) { const templatePath = path.join(__dirname, '../', `templates/${template}`); function readAndCopyFile(parentPath, tempPath) { let files = fs.readdirSync(parentPath); files.forEach((file) => { let curPath = `${parentPath}/${file}`; let stat = fs.statSync(curPath); let filePath = `${targetPath}/${tempPath}/${file}`; if (stat.isDirectory()) { fs.mkdirSync(filePath); readAndCopyFile(`${parentPath}/${file}`, `${tempPath}/${file}`); } else { const contents = fs.readFileSync(curPath, 'utf8'); fs.writeFileSync(filePath, contents, 'utf8'); } }); } readAndCopyFile(templatePath, name); } function deleteTemplate(path) { if (fs.existsSync(path)) { fs.readdirSync(path).forEach(function (file, index) { var curPath = path + '/' + file; if (fs.lstatSync(curPath).isDirectory()) { // recurse deleteTemplate(curPath); } else { // delete file fs.unlinkSync(curPath); } }); fs.rmdirSync(path); } } export default function create(template, name) { if (!TEMPLATES.includes(template)) { console.log(chalk.red(`No ${template} Template`)); return; } const projectPath = path.resolve(targetPath, name); if (fs.existsSync(projectPath)) { inquirer .prompt([ { name: 'template-overwrite', type: 'confirm', message: `Template named ${name} is already existed, are you sure to overwrite"htmlcode">npm install -g随便找一个路径，运行moka create <template> [name]命令来生成项目
moka create react react-demo效果如下,会在该目录下生成一个react-demo的文件夹，里面存放的就是moka-cli项目中/templates/react下的所有
$ moka create react react-demo react template has been created successfully!如果在该目录下继续创建一个同名的项目，就会提示是否覆盖,输入y后继续执行
$ moka create react react-demo ? Template named react-demo is already existed, are you sure to overwrite? Yes Template already existed , removing! react template has been created successfully!create命令的核心逻辑是通过node的fs模块来复制/templates下的文件，然后将其放到指定的路径下，具体实现直接看代码就可以来。
总结
CLI是提示前端开发效率的重要工具，如果有长期维护的项目，开发一个CLI来完成一些重复性的工作，是一个不错的选择。
moka-cli还没有上传github,等过段时间完善一些/templates下的项目模板，我会在文章里补充项目地址。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。