Skip to main content

自动添加组件

1. 项目缘起​

在前端项目中，通常都是组件化开发，需要编写各种组件。但在项目开发中，每个同事编码风格都不一样，写出来的组件风格各异。这不仅导致项目维护性下降，还可能引起性能问题。此外，项目中经常会抽离一些可复用的功能组件，但往往又缺少文档，导致同事使用遇到困难。本项目旨在通过编写一个脚本，通过一个统一的模板创建组件，规范编码风格，提升项目维护性。

2. 组件开发规范​

以 React + TS 项目为例：

import * as React from "react";
import style from "./style.module.less";

type Props = {
  name: string;
}

const MyComponent: React.FC<Props> = ({ name }) => {
  const [count, setCount] = React.useState(0);

  const handleClick = (val) => {
    setCount(val + 1);
  }

  return (
    <>
      <div>Name: {name}</div>
      <div>Count: {count}</div>
      <button onClick={handleClick}>Click me!</button>
    </>
  )
}

export default React.memo(MyComponent);

1) 如何引入 React​

在 TS 下推荐使用下面的方法：

import * as React from "react";
import * as ReactDOM from "react-dom";

而另外一种引用方式：

import React from "react";
import ReactDOM from "react-dom";

需要在 tsconfig.json 中添加额外配置："allowSyntheticDefaultImports": true。

2) 如何引入样式​

样式看过各种写法，甚至每个同事样式文件命名都不一样，这边统一用 style.xxx 形式：

import "./style.less";
import style from "./style.module.less";

3) 使用 type 还是 interface​

有几种常用规则：

  • 在定义公共 API 时(比如编辑一个库）使用 interface，这样可以方便使用者继承接口
  • 在定义组件属性（Props）和状态（State）时，建议使用 type，因为 type 的约束性更强
tip

interface 和 type 在ts中是两个不同的概念，但在 React 大部分使用的 case 中，interface 和 type 可以达到相同的功能效果，type 和 interface 最大的区别是：

  • type 类型不能二次编辑，而 interface 可以随时扩展

4) 如何声明函数式组件​

推荐使用 React.FunctionComponent，简写形式：React.FC：

type Props = {
  message: string;
}

const App: React.FC<Props> = ({ message, children }) => {
  return (
    <div>
      {message}
      {children}
    </div>
  )
}

使用 React.FC 声明函数组件与 普通声明 以及 PropsWithChildren 的区别是：

  • React.FC 显式地定义了返回类型，其他方式是隐式推导的；
  • React.FC对静态属性：displayName、propTypes、defaultProps提供了类型检查和自动补全；
  • React.FC为children提供了隐式的类型（ReactElement | null）；

5) 如何使用 props​

直接参数解构，不要再接受形参了。

6) 是否使用 memo​

一律使用 React.memo 包裹之后再导出。

3. 脚本需求概述​

1) 安装 npm 包​

通过下面的命令安装 npm 包：

$ yarn add @garfield-cli/auto-gen -D

2) 编写 npm scripts​

由于 npm 包的 package.json 中提供了 bin 字段，因此在安装时会自动向 node_modules/.bin/ 目录下创建软链接，相当于注册了一个命令，我们可以在项目根目录下通过 npx 去执行这个命令：

$ npx auto-gen new-component

# 等价于
$ node_modules/.bin/auto-gen new-component

当然这样做的前提是在文件顶部使用 #!/usr/bin/env node 声明脚本解释程序

接下来我们就可以在 package.json 中添加 npm scripts：

{
  "scripts": {
    "gen:component": "auto-gen new-component"
  }
}

3) 配置文件​

在前端项目的 package.json 中添加一个配置项：

{
  "gen-config": {
    "typescript": true, // 是否使用 typescript
    "style": "less-module", // CSS 预编译器及是否使用 CSS module
    "doc": true, // 是否生成 README.md
  }
}

4) 执行 npm scripts​

当需要添加新组件时，只需要执行下面的 npm scripts：

$ yarn run gen:component

执行命令后，通过 inquirer 配合 chalk 实现命令行交互，用户需要提供添加的组件名称，以及组件添加的位置（pages 或者 components）。然后会按照用户提供的配置进行添加，创建一个组件目录，包含组件文件、样式文件、以及 README.md 等等。

4. 参考​

React + TypeScript实践

Element UI源码中学到的技巧