命令行快速创建组件文件夹

一、背景

一般项目中，每个页面就会封装到一个文件夹内部，每次创建新页面的流程基本就是：

• 创建文件夹
• 创建基本index文件
• js/ts/jsx/tsx文件内导入样式文件
• js/ts/jsx/tsx文件内做默认组件结构，命名或者export啥的

每次想创建新页面的流程，除了文件名不一样，其他都一样，基本代码创建完成，才会进行后续的页面和逻辑编写，所以我想着把这个流程也挑出来

我的意思就是创建一个脚本文件，每次执行以下命令就行了。

二、步骤

1、首先，因为每次创建的架子都是一样的，所以我们搞一个模板出来

• 在src下新建一个Templete文件夹，里面有个【index.js】【index.module.less】PS:其他的文件后缀都ok，我就举个栗子
• 在对应文件里，写上基础的代码，例如

import React, { useState, useEffect } from "react";
import { Button } from "antd";
import styles from "./index.module.less";

const Page = () => {
  const [data, setData] = useState("");
  useEffect(() => {
    console.log(data, setData);
  }, []);
  return (
    <Button className={styles.btn}>我是按钮</Button>
  );
};

export default Page;

2、模板文件建好了，那就可以写脚本文件了

• 脚本文以.sh结尾，可以建在项目跟目录下
• 脚本文件的内容

# 判空赋默认名称
if  [ ! -n "$1" ] ;then
  str='Page'
else
  str=$1
fi
# 首字母大写替换
firstLetter=${str:0:1}
otherLetter=${str:1}
firstLetter=$(echo $firstLetter | tr '[a-z]' '[A-Z]')
result=$firstLetter$otherLetter
# 创建文件夹
cd ./src/pages
mkdir $result
cd ./$result
# 创建文件
touch index.js
touch index.module.less
# 授权
chmod +x index.js
chmod +x index.module.less
# copy
cp -p ../../templete/index.js ./index.js
cp -p ../../templete/index.module.less ./index.module.less
# 替换默认组件名
sed -i '' s/Page/$result/g index.js
echo "已在pages文件夹下生成${result}组件"

3、可以直接在项目的命令行下直接执行脚本文件

./create.sh projectName

4、也可以在package.json里的scripts加入新的命令

...
"scripts":{
...
    "create":'./create.sh'
}
...

然后执行

npm run create projectName

三、完事了