关于前端:使用-Rush-pnpm-的踩坑记录

如果是打算开始应用 Rush,能够看看最初的参考链接.

首选必定是官网文档,仔细阅读其中的Developer tutorials和Maintainer tutorials两局部,跟着Maintainer tutorials操作一遍,基本上就能相熟大部分应用 Rush 的场景了.(PS: 不过其中每一节大都有对应的前置常识,比方装置 Git hooks,前置常识就是理解 Git hooks 的相干常识,尽管不理解也能跟着操作,没问题,不过理解前置常识能更容易了解相干操作以及配置).

而后网上对于 Rush 的文章并不多,特地是短少比拟残缺的分步指南,前面两篇是我看到比拟好的这方面的文章,当作对官网文档的补充.

有可能是大多数应用 Rush 的人自身曾经有 Monorepo 相干方面的教训了,所以上手比拟容易.而像我这样之前没有应用 Monorepo 的教训,所以感觉上手会有点难度,有时候只能去 Issue 中一个个翻,有点累,所以更心愿能有一个比拟残缺的指南,不过好在大多数问题都能解决掉 .

以下是我在开发 https://github.com/XYShaoKang... 时遇到的一些问题,以及解决办法,次要是一些配置,如果有同学遇到同样的问题,心愿能帮到你.

能力无限,可能有些中央会有更好的解决方案,心愿前辈们不吝赐教.

strictPeerDependencies

Rush 官网举荐关上strictPeerDependencies配置,不过当应用淘宝镜像时,就算依赖的包中即便配置了 peerDependenciesMeta 为可选,装置是仍然会报错,比方装置@pmmmwh/react-refresh-webpack-plugin时,会报错:

@pmmmwh/react-refresh-webpack-plugin@0.5.0-rc.4 requires a peer of @types/webpack@4.x || 5.x but none was installed

起因是 cnpm 返回的数据中少了peerDependenciesMeta这个字段.

而在国内,逃不开应用淘宝镜像,所以如果遇到这个问题的话,只能先敞开这个strictPeerDependencies选项,等 cnpm 修复吧!

https://github.com/cnpm/cnpmj...

VSCode 智能提醒生效

当应用typescript@4.3.*版本时,VSCode 智能提醒,以及主动导入会生效,经测试4.2和4.4之后均可失常应用.

以后 TS 曾经公布了 4.4 版本,而最新的 VSCode 也内置了 4.4 版本,所以只有更新到最新的 VSCode 就能解决以后这个问题了,以下解决方案在须要切换 VSCode 的内置 TS 版本时,仍旧可用.

解决办法:

能够通过在包内装置4.2或者4.4之后的版本,配置 VSCode 应用工作区版本的 TS.
或者能够装置JavaScript and TypeScript Nightly插件,这个插件反对将每晚构建的的 TS(typescript@next) 作为 VSCode 的内置 TS 版本.这样也能够解决.不过这样会比拟不可控,兴许哪次更新就又会呈现问题,还得去测试,麻烦.举荐应用第一种形式.

设置 VSCode 应用的 TS 版本

前提: 先关上一个 TS 文件,将光标移移到这个 TS 文件中,再进行如下操作

按Ctrl(Mac 下按Cmd) + Shift + P在命令面板中输出TypesCript: Select TypeScript Version按回车 ,之后就能够抉择要应用的版本了
或者能够点右下角的 TS 版本号~~如果没有批改过,个别都是当初最新的4.3.5版本,点击4.3.5~~,在弹出的抉择窗口抉择版本即可.

隐式依赖的类型

本来在我的项目中隐式依赖装置的类型(指以后我的项目依赖的第三方包中蕴含的依赖),是能够被应用的,比方@testing-library/jest-dom依赖于@types/testing-library__jest-dom,所以失常状况下装置@testing-library/jest-dom,@types/testing-library__jest-dom也会被装置到node_modules下,这样在应用toBeInTheDocument时 TS 引擎能找到对应的类型.

然而应用 Rush 之后,会将所有依赖都提取到common/temp/node_modules中,而我的项目下的node_modules只会保留间接依赖的链接,这样就导致隐式依赖的类型无奈被 TS 引擎找到,须要在我的项目中显式装置对应的类型包.

ESLint

.eslintrc.js能在子目录中失效,不过.eslintignore却无奈失效,能够通过应用.eslintrc.js中的ignorePatterns配置来代替.eslintignore

https://github.com/eslint/esl...
https://eslint.org/docs/user-...

lint-staged

让lint-staged能疏忽咱们定义的 ESLint 疏忽规定.

lint-staged执行时不会管疏忽文件的配置,可有些文件咱们不须要去检查和修复,比方打包后的文件.官网给出了解决方案,能够通过自定义配置来解决:

how-can-i-ignore-files-from-eslintignore
https://github.com/okonet/lin...

在 CI 中因为 Jest 输入而导致的失败

起因是 Jest 在输入时会应用stderr,这会让 Rush 过程以非零状态退出,导致 CI 失败.

解决方案是: 自定义 Jest Reporter,替换掉默认的输入,保障不是谬误的状况都是用规范输入stdout,只有真正产生谬误时,才应用stderr

microsoft/just/.../JestReporter.ts
https://github.com/microsoft/...

最初再不要脸的求个赞
另外我开发的 https://github.com/XYShaoKang... 是一个命令行工具,次要性能是指定一个目录,启动一个服务,而后在浏览器中查看目录中的视频,次要应用场景是不便间接在手机上看电脑上的视频.比方追个番啥的.
当然刚开发进去,目前还很简陋,这是用来自用的,所以会始终开发.如果有须要的敌人能够点个 Star,等它缓缓长大.
如果感觉本文有帮忙到您,也能够帮忙点个 Star