これはモノレポです。いくつかのパッケージが含まれており、すべてトップレベルのpackages.jsonから制御されています。JSON。
各プロジェクトには、パッケージ固有の構成を含む独自のpackage.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 。
これを修正する可能性のあるプロジェクトのルートから試すことができる2つのソリューションがあります。
Turborepoは、JavaScriptおよびTypeScriptコードベースに最適化されたインテリジェントビルドシステムです。 Turborepoを使用して、Pie Monorepo内のすべてのビルドスクリプトの実行を容易にします。
ローカル開発 / CIワークフローをスピードアップするために、Turborepoのリモートキャッシング機能を使用して、AWS S3にビルドアーティファクトを公開しています。これにより、変更されたパッケージのみがビルドタスクを実行することが保証されます。
この機能を活用するには、ローカルマシンにTURBO_TOKEN環境変数を設定する必要があります。このトークンの価値については、設計システムチームに連絡してください。
有効になると、パッケージノードタスクを実行するときに「リモートキャッシングが有効になっている」が表示されます。
必要なコンポーネントに対してタスクが実行されるように、次のタスクをモノレポのルートで実行することをお勧めします。
test lint build
他のテストタスクについては、さまざまな方法で実行できます。
# 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-messageFozzieでいくつかのオプションのMixinヘルパーを作成しました。使用方法の例は次のとおりです。
注：オプションのMixinをインポートし、SFCでmoduleを有効にしている場合、コンポーネントのcommon.scssファイルで@includeを使用することは機能しません。
< style lang="scss" module>
@include pageBanner () ;
</ style >common.scssファイルに再利用可能なスタイルを追加できます。これは、サブコンポーネントを使用し、ミックス、機能、変数を共有するコンポーネントに役立ちます。
すべてのコンポーネントには、 common.scssファイルをcommon空間で使用できるようにするvue.config.jsファイルが付属しています。
`@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 *のようなものを使用して、名前を使用する必要があると削除できます。ただし、名前空間を使用すると、値がどこから来たのかを理解しやすくなります。
最初にストーリーブックを実行するには、トップレベルで以下を実行する必要があります
yarn buildストーリーブックを実行するための要求パッケージを構築します。
次に、 yarn storybook:serve Server StaryBookを実行します。これはlocalhost:8080で開きます。
または、 yarn build:changedおよびyarn storybook:serve-changed 。
開発中にストーリーブックで単一のコンポーネントを表示する場合は、IDEでコンポーネント*.stories.jsファイルを開き、 Storybook - Run Currently Open Story Fileを実行することでこれを行うことができます。 （これはVSコードでのみ動作します）。
これは、ストーリーブックが他のコンポーネントのスタイルシートを引き込むバグを防ぐため、特に便利です（こちらを参照）。
ハスキーを使用して、Gitフックを管理しています。
コミットすると、以下のスクリプトが事前コミットフックの一部として実行されます。
このハスキーフックをスキップしたい場合は、コミットするときに--no-verify引数を追加するだけです。
たとえば、 git commit -m "Refactor f-button" --no-verify 。
このリポジトリに貢献する方法の詳細については、ストーリーブックのドキュメントセクションをご覧ください。
FozzieコンポーネントはもともとVUE 2で作成されました。VUE3アプリケーションで動作するようにするため、VUE 3をcompatモードで実行してください。
