热搜：前端 vuedraggable 插件 vue

NUTUI-React底层架构工具升级(2)-巧用Shell脚本

lxf2023-05-26 09:40:02

NutUI 是一款京东风格的移动端组件库。NutUI 目前支持 Vue 和 React技术栈，支持Taro多端适配。本次架构升级主要介绍NutUI-React在npm到pnpm的升级迁移、巧用Shell脚本和构建工具Vite2升级到Vite4的过程中所经历的踩坑之旅。作为此系列的第二篇文章，希望大家可以学会并熟练使用Shell脚本。

GitHub：NutUI-Vue、NutUI-React

欢迎共建、使用！

一、前言

首先在介绍Shell脚本之前，我们一定要先了解清楚Shell是什么，在开发平时的项目中引用Shell可以帮助我们解决什么问题，是否可以给我们带来开发效率的提升，以及作为前端工程师要学习并学会使用Shell是否具有价值？

好，带着这些疑问，我会在后面的文章内容中逐一给大家解惑。废话不多说，发车啦~

二、Shell基本概念

1.Shell是什么?

我们先看一个比较官方的介绍：

  • Shell 可以是一个程序，提供一个与用户对话的环境。是计算机提供给用户与其他程序进行交互的接口

  • Shell 是一个命令解释器，当你输入命令后，由 Shell 进行解释后交给操作系统内核（OS Kernel）进行处理

刚接触shell的家人们估计看完后虎躯一震，这是啥意思啊？没关系，我来把它说的通俗一点：大家就可以把Shell当做是一个壳，或者可以理解成一个”核桃壳“，里面包裹的“核桃仁”就是操作系统内核。

NUTUI-React底层架构工具升级(2)-巧用Shell脚本

Shell本质上就可以理解为是操作系统内核提供的一个接口，比如咱平时用的控制台就是一个命令行的Shell。说白了，Shell就是人机互动的一种方式，使用操作系统的用户和计算机硬件交互的一种方式。

我们再来看一张图，很清晰的表示了Shell与内核、操作系统之间的关系：

NUTUI-React底层架构工具升级(2)-巧用Shell脚本

怎么样，有没有一种很通透的感觉~

2.Shell的种类

下面是一些历史上比较流行的Shell种类，大家简单看一下了解即可：

  • Bourne%20Shell%20(sh)：由Stephen%20Bourne在1977年开发，是Unix的默认Shell，也是很多其他Shell的基础。它是一种较为基础的shell，不支持交互式界面、命令行编辑等高级功能。
  • C%20Shell%20(csh)：由Bill%20Joy开发，类似于C语言的语法，支持命令行编辑、命令别名等高级功能。
  • Korn%20Shell%20(ksh)：由David%20Korn开发，是Bourne%20Shell的扩展，同时继承了C%20Shell的一些优秀特性，支持命令行编辑、命令别名、作业控制等功能。
  • Bourne-Again%20Shell%20(bash)：由Brian%20Fox和Chet%20Ramey开发，是Bourne%20Shell的升级版，兼容Bourne%20Shell，并添加了许多新功能，如命令补全、命令历史、自动提示等。
  • Z%20Shell%20(zsh)：由Paul%20Falstad开发，是Bourne%20Shell的扩展版本，支持命令补全、模式匹配、参数替换等高级功能，同时也可以兼容Bourne%20Shell和Bash。
  • Fish%20Shell%20(fish)：由Gustav%20“Goose”%20Norstrom开发，它的设计目标是简单易用，具有友好的交互式界面和自动提示功能，支持命令补全、模式匹配、命令历史等高级功能。

除了上述几种Shell外，还有许多其他的Shell，如tcsh、ash、dash等。每种Shell都有其独特的特点和用途，在不同的环境下选用合适的Shell可以提高工作效率和命令行使用体验。

这里我们用到的Shell种类大多数都是bash，也是目前大多数Linux发行版以及macOs操作系统的默认Shell。

Bash%20使用了一种与图形界面（GUI）完全相反的方案：通过纯文本的控制台进行控制，它的主要交互方式通过键盘输入文本，文字反馈来实现人机交互。

很多人估计会说了，界面这么丑，是不是Bash马上就要过时了呀！No,no,no...恰恰相反 Bash 在开发领域应用反倒越来越广泛。正因为其最大的优势就是简单易用，虽然它的显示效果不如 GUI，但一旦熟练后其操作效率远远大于 GUI！

3.Shell的优势

这里我也是总结了几条使用Shell脚本编写代码的优势：

  • 自动化：使用Shell脚本可以自动化执行一系列命令，自动完成一些繁琐的工作，比如打包、压缩、部署等。
  • 快速：使用Shell脚本可以快速地执行一些操作，避免了手动输入命令的繁琐过程。
  • 可扩展：使用Shell脚本可以根据实际需求编写不同的脚本，从而扩展功能和应用场景。
  • 可重复性：使用Shell脚本可以确保执行过程中不会出现手误，从而保证执行结果的一致性和可重复性。
  • 跨平台：Shell脚本可以在各种操作系统中运行，比如Linux、Unix、MacOS等，从而提高了代码的可移植性和兼容性。

综上所述，使用Shell脚本可以帮助我们提高工作效率、降低出错率、扩展功能和应用场景，从而提升代码的质量和可维护性。

4.Shell的例子

为了让家人们对后文项目中稍复杂的Shell脚本可以有一个更好的理解，这里我先给大家举一个简单的小例子，先练练手~

编写一个Shell脚本名字为hello.sh，脚本输出内容为hello world ：

#!/bin/bash

# 执行的命令主体
echo "hello world"

#!/bin/bash 就是指定脚本要使用的 Shell 类型为 Bash ，echo就可以理解为前端控制台中的console.log。

怎么样，easy不，我们也可以定义一个变量再输出，像下面这样：

#!/bin/bash

# 执行的命令主体
message="Hello World" # message 为变量名
echo $message  # 打印message变量

好滴，Shell的一些基础语法，我就不在这一一介绍了，推荐大家先进入这个网站 shellscript.readthedocs.io/zh_CN/lates… 简单扫一眼，了解下Shell的基本使用。

后面实战开发就要正式开始啦~

三、前端工程NutUI-React巧用Shell脚本实践

1.要解决什么问题？

平时我们在发布NutUI-React组件库版本的时候，都需要发布一个CHANGELOG.md，为了让开发者和用户可以了解项目的演化历史，并知道每个版本都带来了哪些变化。

同时，用户也可以通过查看 CHANGELOG.md 来了解项目的新特性和功能，以及已知的问题和待解决的问题。

NUTUI-React底层架构工具升级(2)-巧用Shell脚本

这些迭代的新特性和功能的文案，难道需要我们根据提交pr的记录自己一条条的手敲么？或者一个个手动ctrl c + ctrl v么？那就真的妥妥的ctrl c/ctrl v高级开发工程师了。

那有没有什么比较智能化的脚本，可以自动抓取开发者提交pr的记录，并将记录自动生成如上图格式的文案呢？

2.CHANGELOG自动化shell脚本

当然有咯~，下面就是一段用Shell编写的一段自动化的脚本。

这里我们以NutUI-React最新发布的v1.5.1版本为例，执行方法：./gitlog.sh 2023/4/13 1.5.1

这是一个gitlog.sh的bash脚本文件

#!/bin/bash

# 提取 某个时间之后的提交信息
latestPublishedDate="$1"
log=$(git log --since="$latestPublishedDate" --pretty=format:%s\ @%an)

## Feat 和 Fix 转小写，句号转空
log=$(echo "$log" | sed 's/feat/feat/i;s/fix/fix/i;s/。//')

# 提交信息进行不区分大小写的排序
log=$(echo "$log" | sort -f)

# 增加 emoji
log=$(echo "$log" | sed 's/^feat/* :sparkles: feat/i;s/^fix/* :bug: fix/i;s/^chore/*

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

相关专题