在 Netlify Monorepo (Yarn Workspace/Lerna) 上使用 UI 库作为 Web 应用程序的依赖项

Posted

技术标签:

【中文标题】在 Netlify Monorepo (Yarn Workspace/Lerna) 上使用 UI 库作为 Web 应用程序的依赖项【英文标题】:Using UI Library as a Dependency for Web App on Netlify Monorepo (Yarn Workspace/Lerna) 【发布时间】:2021-03-04 07:17:00 【问题描述】:

我有两个应用程序,glowystuff-webglowy-ui。 Glowy-UI 是一个共享的 UI 库,我计划在其他项目中使用它,类似于我自己的 React Bootstrap。

这是挑战。我在packages/glowystuff-web/package.json 中将glowy-ui 定义为依赖项,如下所示:


 "dependencies": 
   "glowy-ui": "*"
 ,
 "scripts": 
  "build": "gatsby build"
 

除非我运行 yarn build(它使用 tsc 编译到 glowy-ui/lib)并将 JS lib/ 文件提交到 git(哎呀!)我得到这样的错误:

3:47:15 PM: failed Building production javascript and CSS bundles - 24.131s
3:47:15 PM: error Generating JavaScript bundles failed
3:47:15 PM: Can't resolve 'glowy-ui' in '/opt/build/repo/packages/glowystuff-web/src/components'
3:47:15 PM: If you're trying to use a package make sure that 'glowy-ui' is installed. If you're trying to use a local file make sure that the path is correct.

就上下文而言,这些是我在 Netlify 上找到的有关 Monorepos(带有 Yarn 工作区)的最佳说明:

https://community.netlify.com/t/difficulty-with-new-monorepo-deployment-options/4381/9

我不清楚的是如何让 Netlify 知道需要进行构建。如果我在packages/glowystuff-web/package.json 上这样做:

"scripts": 
  "build": "yarn workspace glowy-ui build && gatsby build"

...那么它似乎会在每次构建主 Web 应用程序 glowystuff-web 时构建 UI 库,即使 UI 库代码没有更新。

glowy-ui 的私有、已发布 NPM 包在这里可能是一个可行的选择,但我的想法是使用 Yarn Workspaces 建立一个 GitHub 存储库,我不需要在其中发布。毕竟,如果所有文件都可供阅读,为什么还要发布呢?

那么,在 Netlify/Yarn Workspaces 上,什么是最好的方法来构建东西,同时在适当的时候利用缓存?

当前版本的附加上下文 - netlify.tomls

我们正在使用code-as-config 方法来构建 Netlify。这是当前packages/glowystuff-web/netlify.toml

[build]
  publish = "public/"
  command = "yarn build"

Glowy-UI 既是 UI 库,也是随附的故事书应用程序,所以这里是当前的packages/glowy-ui/netlify.toml

[build]
  publish = "storybook-static"
  command = "yarn build-storybook"

【问题讨论】:

【参考方案1】:

您可以使用post install 阶段来构建glowy-ui 库。此阶段将在您每次运行 yarn install 时创建构建。

scripts: 
   "build": "gatsby build",
   "postinstall": "yarn workspace glowy-ui build"

编辑 这个 postinstall 仅在我们在 npm/yarn install 之后运行时才有效。即它不会在每个构建上运行。如果是 Netlify,它还会检查 package.json 更新。如果不是,它不会运行 yarn install 不会使这个包缓存失效。 No node_modules from netlify deploy

【讨论】:

这让它工作了!!你能解释一下为什么会这样吗?您还可以解释缓存如何与此一起使用吗?然后我会奖励赏金 关于 Netlify 缓存的注意事项:" 对于 2019 年 10 月 3 日之后连接到 Git 存储库的站点,Netlify 会尝试通过比较文件的最后一个已知版本来确定站点的基本目录中是否有任何更改“ docs.netlify.com/configure-builds/file-based-configuration/… 这个 postinstall 仅在我们在 npm/yarn install 之后运行时才有效。即它不会在每个构建上运行。如果是 Netlify,它还会检查 package.json 更新。如果不是,它不会运行 yarn install 不会使这个包缓存失效。 ***.com/a/54541845/5429428 谢谢,您认为将其纳入您的答案是否合理?将奖励赏金 tmrw 是的!我补充说。谢谢:)

以上是关于在 Netlify Monorepo (Yarn Workspace/Lerna) 上使用 UI 库作为 Web 应用程序的依赖项的主要内容,如果未能解决你的问题,请参考以下文章

lerna+yarn workspace+monorepo项目的最佳实践

基于 Yarn WorkSpace + Lerna + OrangeCI 搭建 Typescript Monorepo 项目实践

使用 yarn 和 ts 3.0 管理 typescript 项目 monorepo

monorepo Yarn 工作区 - 共享 esLint 和 Prettier 配置

javascript 使用lerna,monorepo和yarn工作空间创建一个babel变换器来修复babel-jest问题

前端工程化-Genebox小程序端Monorepo架构改造