times components

時代組件庫

目的

時代的react組件的故鄉。

開發環境

我們需要帶有node.js的macOS（對於特定版本，請檢查package.json限制），紗線（最新）

您可以無需這些要求嘗試，但是您會獨自一人。

查看我們的組件

轉到http://components.thetimes.co.uk

入門

1. 運行yarn install

2. 可以在故事書中看到組件運行

• 故事書
  1. yarn storybook
  2. 轉到http：// localhost：9001

模式

請參閱有關如何更新架構的UTILS軟件包。

偵錯

該項目中的組件可以通過瀏覽器的開發人員工具進行調試。這些步驟假定使用Chrome DevTools。

調試我們的網絡故事書：

1. yarn storybook
2. 導航到http：// localhost：9001
3. 打開DevTools
4. 點擊來源
5. 在最左側窗格下方的“網絡”選項卡中，展開top => storybook-preview-iframe => webpack：// => 。 =>軟件包

這些源文件中的任何一個都可以直接調試。

將時間組件與渲染項目聯繫起來

在此處按照以下步驟

您還將看到在管道中進行金絲雀釋放的選項，該選項將發布您可以在渲染中導入的更改的測試版本。

查看您使用rnw.js文件的更改

除了將時代組件和渲染存儲庫鏈接在一起之外，您還可以查看通過rnw.js文件對渲染中的時間組件進行的更改。

1. 在您進行更改後，在工作的包裹中運行yarn bundle ，在您正在工作的包裝中運行紗線。如果您在ts-components軟件包中工作，則需要先運行yarn build ，然後再運行yarn bundle 。
2. 運行命令在文件夾的根部創建一個rnw.js文件。檢查文件以查看您的更改是否通過。
3. 複製rnw.js文件的內容，然後將其粘貼到渲染的node_modules中的相關文件中。例如，如果您將rnw.js文件捆綁在《泰晤士報》組件中的article-skeleton軟件包中，則將內容粘貼到node_modules/@times-components/article-skeleton/rnw.js中。
4. 運行渲染，您應該看到更改。

調試測試

測試當前正在使用開玩笑的運行，因此，如果要調試任何測試，請按照以下步驟進行操作：

1. （查找您的測試命令） jest --config="./packages/provider/__tests__/jest.config.js" 。根據我們從哪個目錄啟動測試的目錄， --config目錄可能會有所不同。我的currenct目錄處於回購根： times-components 。

2. 請參閱package.json的測試命令，以獲取要查看的特定軟件包。

注意：如果您沒有在全球安裝Jest，則可以在node_modules/.bin/jest上本地使用它

3. （在調試模式下啟動測試）我們需要啟動相同的命令，但在debug模式下通過節點進行啟動： node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand

注意： --runInBand是一個jest標誌，在當前過程中串行所有測試。如果我們不添加此標誌，則只有jest的節點進程是可以辯論的。

4. （添加調試語句）通常，我們會添加斷點，但是當遠程調試並非總是可能的時，因為我們需要放上斷點的文件還沒有jest 。因此，為了使調試器停止我們想要的地方，我們需要添加debugger;語句代替代碼中的斷點，並在必要時重新轉移。

5. （附加到Web插座）一旦我們以調試模式啟動測試，我們就需要附加：

• （建議）使用Chrome遠程調試進行節點：

  1. 打開chrome://inspect
  2. Open dedicated DevTools for Node
  3. 如果您使用上述命令啟動了測試，則應自動連接，但是如果它不轉到彈出窗口的Connection選項卡並添加Connection localhost:9229或任何端口
  4. 由於存在--inspect-brk標誌，調試器應停止在第一行上，並且按下播放按鈕（恢復執行），它將停止在debugger;陳述

  注意：一旦停止，您可能會看到所有代碼都被一行捆綁在一起。有一個簡單的修復方法：在Line: 1 Column: 1標籤，您應該看到一個{}按鈕，該按鈕將使您的代碼裝飾，並且您仍然可以正確調試。

• （使用VSCODE）配置應貼近以下：

 ...
    "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
      }
  ]

貢獻

有關該項目的廣泛細分，請參見貢獻。

yarn commit將提交文件（與git commit相同），並將幫助撰稿人添加適當的提交消息與常規ChangElog內聯