这是一个单一的repo 。它包含几个软件包,全部由顶级packages.json控制。
每个项目都有其自己的package.json包含特定包装的json文件,但是不要从软件包项目中运行yarn install ;而是从顶级运行。
如果您从软件包中运行yarn install那么您可能会遇到这样的无用错误:
Error: ENOENT: no such file or directory, symlink '…fozzie-componentspackages…' -> '…fozzie-componentsnode_modules@justeat…'
如果发生这种情况,请在整个过程中删除所有node_modules文件夹,然后再次从根目录中运行yarn install 。
在某些极少数情况下,组件中指定的package.json中指定的模块。json文件有时无法正确解决 /安装。这可能会导致错误:示例错误:找不到以下模块,请运行yarn add @moduleName以安装它。
您可以从项目的根源中尝试两种解决方案,可以解决此问题:
TurborePo是一种针对JavaScript和Typescript代码库进行优化的智能构建系统。我们使用turborepo来促进pie monorepo中所有构建脚本的执行。
为了加快本地开发 / CI工作流程,我们使用TurborePo的远程缓存功能将构建工件发布到AWS S3。这样可以确保仅修改的软件包才执行其构建任务。
为了利用此功能,您必须在本地计算机上设置TURBO_TOKEN环境变量。请与Design System团队联系以获取这个令牌的价值。
启用后,执行软件包节点任务时,您会看到“启用远程缓存”。
建议在MonorePo的根部运行以下任务,以确保执行所需组件的任务:
build test lint
对于其他测试任务,您可以通过多种方式执行:
# Run Component tests for all components
# Note: Ensure Storybook is not running when running the following commands
cd ./fozzie-components
yarn storybook:build
yarn storybook:serve-static
yarn test-component:chrome或者
# Run Component tests for individual f-* package
# Note: Ensure Storybook is not running when running the following commands
cd ./fozzie-components
yarn storybook:build
yarn storybook:serve-static
# And in another window
yarn test-component:chrome --filter=@justeat/f-user-message我们在Fozzie中创建了几个可选的Mixin助手。这是如何使用它的示例:
注意:如果您在sfc上启用了module ,则导入可选的mixin并在common.scss文件中使用@include 。
< style lang="scss" module>
@include pageBanner () ;
</ style >您可以将可重复使用的样式添加到common.scss文件中。这对于使用子组件并希望共享混合素,功能和变量的组件可能很有用。
每个组件都带有一个vue.config.js文件,该文件使common.scss文件在名称空间中可用common :
`@use "../assets/scss/common.scss";`
要从公共文件中访问任何内容,只需像这样的值前缀:
// Fake values used for demonstration
.someClass {
color: common.$fontColor;
line-height: common.line-height();
@include common.truncate();
}
您可以通过使用@use "../assets/scss/common.scss" as *之类的内容来消除对命名空间的需求,但是使用命名空间使您更容易理解值的来自何处。
要首先运行Storybook,您必须在顶级运行以下内容
yarn build以构建需要包装的包裹以供故事书运行。
然后运行yarn storybook:serve启动Storybook,该书将在localhost:8080上开放。
另外,您可以运行yarn build:changed和yarn storybook:serve-changed以查看您正在处理的组件以及任何依赖性 /依赖者。
如果您希望在开发过程中查看Storybook中的单个组件,则可以通过打开IDE中的组件*.stories.js文件并运行Storybook - Run Currently Open Story File任务,可以在左侧的“调试”选项卡中找到。 (这仅适用于VS代码)。
这特别是有用的,因为它可以防止故事书插入其他组件样式表的错误(请参见此处)。
我们使用沙哑来管理git钩。
当您提交提交时,以下脚本将作为我们预先承诺的挂钩的一部分运行。
如果您想跳过此赫斯基钩子,只需在提交提交时添加--no-verify参数即可。
例如: git commit -m "Refactor f-button" --no-verify 。
有关如何为此回购做出贡献的更多信息,请参见我们的故事书文档部分
Fozzie组件最初是在VUE 2中撰写的。为了确保它们在VUE 3应用程序中工作,请在Compat模式下运行VUE 3。