times componentsダウンロード-Times times componentsソースコードのダウンロード

times components

サードパーティ製コンポーネント

1.0.0

ダウンロード

タイムズコンポーネントライブラリ

目的

Home of the Timesのreactコンポーネント。

開発環境

node.jsを備えたmacosが必要です（特定のバージョンの場合はpackage.json制限を確認してください）、yarn（最新）

これらの要件なしで試すことはできますが、あなたは自分でいるでしょう。

コンポーネントの表示

http://components.thetimes.co.ukにアクセスしてください

はじめる

yarn installを実行します
コンポーネントは、ストーリーブックで実行されています

ストーリーブック
1. yarn storybook
2. http：// localhost：9001にアクセスしてください

スキーマ

スキーマの更新方法に関するUTILSパッケージを参照してください。

デバッグ

このプロジェクトのコンポーネントは、ブラウザの開発者ツールを介してデバッグできます。これらの手順は、Chrome Devtoolsの使用を想定しています。

私たちのWebストーリーブックをデバッグするには：

yarn storybook
http：// localhost：9001に移動します
devtoolsを開きます
ソースをクリックします
左端のペインの下の[ネットワーク]タブで、 top => storybook-preview-iframe => webpack：// =>を展開します。 =>パッケージ

これらのソースファイルのいずれかは、直接デバッグできます。

タイムコンポーネントをレンダリングプロジェクトにリンクします

ここで次の手順に従ってください

また、パイプラインでカナリアリリースを行うオプションも表示されます。パイプラインは、レンダリングでインポートできる変更のテストバージョンを公開します。

RNW.jsファイルでレンダリングの変更をご覧ください

Timesコンポーネントをリンクしてリポジトリを一緒にレンダリングすることに加えて、RNW.JSファイルを介してレンダリングのTimesコンポーネントに加えられた変更を表示できます。

時代のコンポーネントでは、変更を加えた後、作業中のパッケージでyarn bundleを実行します。 ts-componentsパッケージで作業している場合は、最初にyarn build実行してからyarn bundleを実行する必要があります。
コマンドを実行すると、フォルダーのルートにRNW.jsファイルが作成されます。ファイルを確認して、変更が発生したかどうかを確認してください。
rnw.jsファイルの内容をコピーして、Render's node_modulesの関連ファイルに貼り付けます。たとえば、Timesコンポーネントのarticle-skeletonパッケージにRNW.jsファイルをバンドルした場合、コンテンツをnode_modules/@times-components/article-skeleton/rnw.jsに貼り付けます。
レンダリングを実行すると、変更が表示されます。

テストのデバッグ

テストは現在JESTを使用して実行されているため、テストをデバッグしたい場合は、次の手順に従います。

（テストコマンドを見つけます） jest --config="./packages/provider/__tests__/jest.config.js" 。テストを開始するディレクトリに応じて、 --configディレクトリは異なる場合があります。私のcurrenctディレクトリは、リポジトリルート： times-componentsにあります。
チェックアウトしたい特定のパッケージについては、 package.jsonのテストコマンドを参照してください。

注：jestがグローバルにインストールされていない場合は、 node_modules/.bin/jestからローカルに使用できます。

（デバッグモードでテストを開始します）同じコマンドを開始する必要がありますが、ノードを介してデバッグモードのように： node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand

注： --runInBandは、現在のプロセスですべてのテストを連続して実行するjestフラグです。このフラグを追加しないと、 jestを開始したノードプロセスのみがデバッグ可能になります。

（デバッグステートメントの追加）remoryはブレークポイントを追加しますが、リモートデバッグが必ずしも可能ではない場合、ブレークポイントをオンにする必要があるファイルはまだjestでロードされていません。したがって、デバッガーを希望する場所に停止するには、 debugger;コード内のブレークポイントの代わりにステートメントを使用し、必要に応じて再輸送します。
（Webソケットに添付）デバッグモードでテストを開始したら、それに添付する必要があります。

（推奨）ノードにChromeリモートデバッグを使用してください。
1. chrome://inspect
2. Open dedicated DevTools for Node
3. 前述のコマンドでテストを開始した場合、それは自動的に接続する必要がありますが、ポップアップウィンドウのConnectionタブに移動して接続localhost:9229またはポートを追加しない場合
4. デバッガーは--inspect-brkフラグのために最初の行で停止する必要があり、再生ボタン（履歴書の実行）を押すと、 debugger;声明
注：停止すると、すべてのコードが1行にバンドルされていることがわかります。そのための簡単な修正があります。 Line: 1 Column: 1ラベルコードを事前に設定する{}ボタンが表示され、適切にデバッグできるようになります。
（vscodeを使用）configはこれに近づける必要があります。

 ...
    "configurations" : [
      {
          "localRoot" : " ${workspaceFolder}/packages/provider " , //change this depending on what test you're debugging
          "remoteRoot" : " ${workspaceFolder}/packages/provider " , //change this depending on what test you're debugging
          "type" : " node " ,
          "request" : " attach " ,
          "name" : " Attach to Server on 9229 " ,
          "address" : " 127.0.0.1 " ,
          "port" : 9229
      }
  ]