书接上回，之前很少自己从零到一配置一个基本项目配置。这次从头开始做了一遍，并且添加了一些自己觉得有用的流程规范工具，磕磕绊绊的还是碰到了不少的小错误，简单记录一下自己碰到的各种错误，以便下次不再踩坑。PS:现在前端的工具五花八门，还是希望早日能够统一实现ECMAScript的规范，早日不用做各种转译适配。
开局一条狗，装备全靠捡
项目采取的是pnpm + vite，首先使用了官网模板创建了一个基础的项目模板。
pnpm create vite my-vue-app --template react-ts
吐槽一下，在初始化项目的时候还在使用v3，在写这篇文章的时候vite已经进入了v4环节，太卷了。
至此我们就有了一个最基础的项目模板，随后添加了各种各样的项目所要使用的依赖。
单元测试配置
这里单元测试采用jest + testing library，没有意向使用karma在真正的浏览器环境里测试component（最近playwright添加了component tests，希望能早日脱离实验状态，让我们远离karma这种反人类的配置)。单元测试有几个小小的报错需要解决一下。
首先是mock css的问题，jest并不能理解如何把css文件转换成他理解的模块，需要手工配置一下，具体的细节可以参考官网链接。在这里，我图省事就直接用了es6的proxy解决方案：
首先添加依赖pnpm addd -D identity-obj-proxy,然后在jest.config.js里添加如下配置：
moduleNameMapper: { '\\.(css|less)$': 'identity-obj-proxy', }
其次我们需要配置一下如何处理图片和矢量图之类的静态资源的处理。处理图片类资源的方法有很多，这里使用了配置tranform的方法，让jest把资源映射成文件名。首先添加
//fileTransformer.js
import path from "path";
export default {
process(sourceText, sourcePath, options) {
return {
code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
};
},
}
然后我们在jest.config.js配置文件里面添加处理媒体文件的配置：
transform: {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/fileTransformer.js",
},
至此我们的单元测试就可以顺利的跑起来了。
集成测试配置
集成测试采用playwright，官网给了很好用的启动配置命令，基本上可以做到零负担配置，在命令行运行pnpm dlx create-playwright，在简单选择了基础配置之后就可以运行了，顺便官网还提供了一个简单的github actions模板，但是笔者想在项目中自己配置ci/cd流程，就没有使用给定的模板。
代码风格规范
代码格式规范采用eslint + stylelint + prettier三剑客。为了图省事，引入了之前umi/fabric的一套预设规则.
在这里踩了几个小坑。一是eslint 和 tsconfig需要联动配置一下，为eslint配置parsOptions，不然会报错。
二是在配置了prettier格式化代码之后，prettier一直没有被启用。蒙圈了几十分钟之后终于在vscode的settings里面找到了原因。之前不知道是什么插件覆盖了我typescriptreact的设置，更改回prettier后终于能正常的格式化react代码了。
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
至此，项目的简单初始化配置就已经基本结束了。本来想在初始化里把git hooks和 ci/cd的配置都一起记录，但是写着写着东西就多了起来。为了不让笔记文章过于冗长，就把其他的初始化工作的坑留在下一篇文章里记录。
