当在Element-Plus源码中输入npm run gen my-component 发生了什么？

最新推荐文章于 2024-09-15 00:00:00 发布

fawilliam

最新推荐文章于 2024-09-15 00:00:00 发布

阅读量428

点赞数 14

文章标签： npm 前端 node.js

本文链接：https://blog.csdn.net/xa2014/article/details/135957549

版权

一句一句的解释 gc.sh 脚本

BASH_SOURCE <==> BASH_SOURCE[0] 取得当前执行的 shell 文件所在的路径及文件名

if [ "$#" -ne 1 ] || [[ $NAME =~ $re ]] || [ "$NAME" == "" ];

$# 在 shell 中是特殊的变量，表示传递给脚本或者函数的参数个数

-ne: 比较运算符，表示不等于

[ "$#" -ne 1 ]：如果参数数量不等于 1 就是 true

$re=[[:space:]]+ 是一个正则表达式，用于匹配一个或多个空白字符。这包括空格、制表符、换行符、回车符、换页符和垂直制表符

=~: 正则表达式的匹配运算符。检查一个字符串是否匹配一个正则表达式

在表达式 [[$NAME =~ $re]] 中，=~ 用于检查变量 $NAME 是否匹配正则表达式 $re。如果匹配，那么这个表达式的结果为真。

line:18 [ -d "$DIRNAME" ]

-d: 是 shell 中的测试运算符，用于检查一个文件是否存在并且是一个目录。

line:24 sed 's/[_|-]$[a-z]$/\ \1/;s/^$[a-z]$/\ \1/'

sed 命令的正则表达式替换操作，用于处理字符串。多个操作之间用分号;隔开。

s/[_|-]$[a-z]$/\ \1/: 这个操作会查找所有下划线_或破折号-后跟着的小写字母，并将其替换为该小写字母前面带有空格的形式。如: my-component会被替换为 my component，my_component会被替换为 my component

s/^$[a-z]$/\ \1/: 这个操作会查找字符串开始的小写字母，并在其前面加一个空格。如 component会被替换为 component。

line25: "${i:0:1}" | tr "[:lower:]" "[:upper:]"

${i:0:1}: 字符串切片操作，用于取 i 的第一个字符

tr "[:lower:]" "[:upper:]"：字符转换命令，它将输入中的小写字母转换为大写字母。

${i:0:1}: 获取字符串 i 的第一个字符，并通过管道 | 将其传递给 tr 命令进行大小写转换。这样，最终的结果就是将 i 的第一个字符转换为大写字母。

> gen
> bash ./scripts/gc.sh my-first-comp

i: my
C: M
NORMALIZED_NAME: My
i: first-comp
C: F
NORMALIZED_NAME: MyFirst-comp
最后: MyFirst-comp

mkdir -p "$DIRNAME"
mkdir -p "$DIRNAME/src"
mkdir -p "$DIRNAME/__tests__"

生成下面这样的结构

packages/components/my-component
├─ src
└─ __tests__

line33: cat > $DIRNAME/src/$INPUT_NAME.vue <<EOF xxx EOF 创建 Vue 组件的主文件，并写入基本的模板和脚本内容

cat >: 用于从标准输入（通常是终端）读取内容，并将其输出到标准输出或者重定向到指定的文件中。

cat fi 文件名: 用于查看文件的内容。

<<EOF: 是一种 Here 文档（Here Document）的语法，用于在脚本中嵌入多行文本。

line65:

cat <<EOF >"$DIRNAME/index.ts"
...
EOF

整个命令的作用是将后续的多行文本作为输入，并将其写入到 $DIRNAME/index.ts 文件中。输入的结束标记是 EOF，当遇到以 EOF 结束的行时，输入结束，文本内容将被写入到文件中。

关注