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内联