工作中的那点事之 项目相关

项目依赖冲突

项目同时使用了依赖 a 和 b，而且 a 和 b 都使用了依赖 c，不过版本不一样。

大多数情况下，npm可以自动解决依赖项之间的冲突。但是也有解决不了冲突的情况，这种时候可以通过配置resolutions来解决。

resolutions字段可以指定使用哪个版本。

比如(假设下面的 a 依赖 1.0.0 版本的 c，b 则依赖 2.0.0)

{
  "dependencies": {
    "a": "^1.0.0",
    "b": "^2.0.0"
  },
  "resolutions": {
    "c": "1.0.0"
  }
}

madge检查循环依赖

使用起来比较简单，scripts 添加命令"madge": "madge ./src --circular --extensions ts,tsx"，然后执行npm run madge即可。
会检查src目录下ts、tsx文件有没有存在循环依赖。

例子

app.tsx

import { UserCard } from "./components/UserCard";

export interface User {
  id: string;
  name: string;
}

export default function App() {
  return (
    <UserCard
      user={{
        id: "1",
        name: "clz",
      }}
      onPress={() => {
        console.log("a");
      }}
    />
  );
}

UserCard.tsx

import { memo } from "react";
import { User } from "../App";

interface UserProps {
  user: User;
  onPress: () => void;
}

export const UserCard = memo((props: UserProps) => {
  const { user, onPress } = props;
  return <div onClick={onPress}>{user.name}</div>;
});

依赖关系大致如上图。

执行命令后，会显示哪里出现了循环依赖

把上面的type User移动到UserCard.ts中后，再执行命令

搭配husky、liny-staged使用

检查循环依赖只需要在提交代码的时候，对改动文件进行检测即可，所以可以搭配husky、liny-staged使用。

husky、lint-staged的使用可以自行学习，也可以参考笔者之前的React 搭建规范

package.json添加lint-staged：

"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "madge --circular"
  ]
}

lint-staged已经限制了会被检测的文件，所以scripts下的命令也可以简化为"madge": "madge ./src"。

效果：

-i madge.png生成依赖图

需要安装Graphviz，并配置环境变量

1. 不能直接在lint-staged中配置，不然循环依赖检查就不生效了（生成图片，但是提交并没有被拦截）
2. 配置命令："madge": "madge ./src -i madge.png"。commit 检查的时候不会生成依赖图片。

综上所述，生成依赖图应该单独作为一个命令。"generate:madge": "madge ./src -i madge.png --extensions ts,tsx"

改成上面的命令后，就不再是检测循环依赖，而是生成依赖图片。可以从图片中看依赖关系有没有问题。

项目分包

npm、yarn 使用 workspaces