如何使用Node编写开发小工具

在做有些项目的时候有时候会遇到要重复创建内容大概相同的文件，但是命名和文件夹存放不一样的业务。比如说组件参考文档框架的Storybook的编写，就是需要大量的拷贝相同的文件代码，其目录大概如下

|--|
| src
|  |--Buttom
|  |    |--Button.component.tsx
|  |    |--Button.stories.ts
|  |--Input
|  |    |--Input.component.tsx
|  |    |--Input.stories.ts
|  |--.....很多文件夹
|  |......很多文件
1
2
3
4
5
6
7
8
9
10

上面文件目录里面的内容都相差不大，就是文件名和组件名不一样， 那么我们可以使用Node.js来创建文件夹和文件减少复制粘贴的繁琐工作，其代码如下：

/* 
 * initFile.js
 * 使用js生产新的Story文件
 * 执行 npm run init [your file name] [project]
 * npm run init button mui
 */
import fs from "fs";
const args = process.argv.slice(2);

const getProjectType = () => {
  let type = false;
  if (args?.length) type = args.some((item) => item?.toLowerCase() === "mui");
  return type;
};

const firstCharsToUpperCase = () => {
  if (args?.length) {
    const name = args?.[0] ?? "";
    return `${name.toLowerCase().slice(0, 1).toUpperCase()}${name.slice(1)}`;
  } else {
    return "Test";
  }
};

const isMui = getProjectType();
const fileName = firstCharsToUpperCase();

const storyContent = `
  import type { Meta, StoryObj } from '@storybook/react'

  import { ${fileName} } from './${fileName}.component'

  const meta = {
    title: '${isMui ? "Mui" : "Antd"}/${fileName}',
    component: ${fileName},
    parameters: {
      layout: 'centered',
    },
    tags: ['autodocs'],
    argTypes: {},
  } satisfies Meta${fileName}>

  export default meta
  type Story = StoryObj

  export const Primary: Story = {
    args: {},
  }
`;

const componentContent = `
  import { ${fileName} as Mui${fileName} } from '@Xcloud/${
  isMui ? "mui" : "antd"
}';
  import type { ${fileName}Props as Mui${fileName}Props } from '@ocloud/${
  isMui ? "mui" : "antd"
}';
  import type { ReactNode } from "react";

  export interface ${fileName}Props extends Mui${fileName}Props {
    children?: ReactNode;
  }

  export const ${fileName} = ({ children, ...rest }: ${fileName}Props) => (
    ${fileName} {...rest}>{children}${fileName}>
  );
`;

((storyContent, componentContent) => {
  const storyName = `${firstCharsToUpperCase()}.stories.ts`;
  const componentName = `${firstCharsToUpperCase()}.component.tsx`;
  const filePath = isMui
    ? `./src/stories/Mui/${fileName}`
    : `./src/stories/Antd/${fileName}`;
  fs.mkdir(filePath, { recursive: true }, (err) => {
    if (err) return callback(err);
    fs.writeFile(`${filePath}/${storyName}`, storyContent, (error) => {
      if (error) return console.error(error);
      console.log("Create story success!");
    });
    fs.writeFile(`${filePath}/${componentName}`, componentContent, (error) => {
      if (error) return console.error(error);
      console.log("Create component success!");
    });
  });
})(storyContent, componentContent);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

编写好上面的Node脚本之后，就可以执行了，在项目的pageage.json中的scripts属性中增加如下配置

  "scripts": {
    "init": "node initFile",
    "dev": "storybook dev -p 6006",
  },
1
2
3
4

然后在编辑器控制台或者CMD窗口中执行命令npm run init button mui，就会在src/Mui文件下生成文件夹Button和两个文件Button.stories.ts、Button.component.tsx；如果是使用拷贝文件夹然后再修改，一个文件夹最少要花费三五分钟，现在大概不要5秒；这样就可以在这两个文件在愉快的写文档了。