彩色CLI

彩色CLI 构建并发布您的Storybook. 运行 彩色 在项目目录中.

这个包以前被命名过 Storybook-彩色. 看到 迁移到新包 有关详细信息,.

快速启动

npx彩色 ——project-token 

如果您定制了Storybook的运行方式,您可能需要传递其他选项. 在第一次运行后,CLI会自动要求您添加一个脚本到您的 包.json.

安装

您可以选择安装 彩色 作为一个依赖项,而使用上面相同的脚本.

npm 安装 -D 彩色

如果你不安装 彩色 作为一个依赖, npx 会自动下载并运行最新版本吗. 这有优点也有缺点:

  • 👍你永远不会过时, 您将每次都使用最新的版本, 永远不必担心升级半音.
  • 👍如果只在持续集成中运行,那么在本地开发过程中不需要安装该包.
  • 👎运行速度会比较慢,因为必须先下载软件包.

配置

需要选择

CLI国旗
——project-token 项目的唯一代码. 别名: -t

在入职期间从chrom.com或在项目的管理页面上获得项目令牌. 此选项也可以通过设置 CHROMATIC_PROJECT_TOKEN 环境变量. 环境变量也从 .env 文件,如果存在.

注意: ——project-token 之前被称为 ——应用代码. 如果遇到与此相关的错误, 你应该升级到最新版本的chromcli. 看到 迁移到新包.

Storybook的选择

彩色 是零配置,如果你有 build-Storybook 脚本在你 包.json. 否则,您可以指定其中一个.

CLI国旗
——build-script-name 构建你的Storybook的npm脚本,十博体育备用网址应该使用它来创建快照. 如果您的Storybook构建脚本的名称不同,请使用此方法. 默认为 build-Storybook. 别名: -b
--output-dir 构建Storybook的目标目录的相对路径,如果您想保留它的话. 否则,如果可能的话,将使用临时目录. 别名: -o
--Storybook-build-dir 如果您已经构建了您的Storybook,请提供静态构建目录的路径. 别名: -d

色选择

这些选项控制着你的故事如何表现以及如何使用它们. 在某些分支情况下可能需要这些. 详见 分支文档.

CLI国旗
——allow-console-errors 即使在你的Storybook中有错误记录到控制台,也要继续运行chrokbook.
——auto-accept-changes(分支) 如果对构建有任何更改,自动接受它们. 只对 (分支)如果指定的. 通过支持Globs picomatch.
--branch-name 覆盖分支名称. 仅用于不受支持的CI集成和修复跨分支PR比较. 还接受 : 格式.
——exit-once-uploaded(分支) 出口与 0 一旦构建的版本发布到彩色版. 只对 (分支)如果指定的. 通过支持Globs picomatch.
——exit-zero-on-changes(分支) 如果所有快照都呈现,但有视觉上的变化,请使用代码退出 0 而不是通常的退出代码 1. 只对 (分支)如果指定的. 通过支持Globs picomatch.
--ignore-last-build-on-branch 不要使用这个分支上的最后一个构建作为基线,如果它不再在历史(i.e. 分支是重置). 通过支持Globs picomatch.
--patch-build 创建一个补丁来修复丢失的PR比较.
——preserve-missing 当与基线比较时,将丢失的故事视为未改变的而不是删除的.
——跳过(分支) 跳过彩色测试,但将提交标记为通过. 避免阻塞PRs由于需要合并检查. 只对 (分支)如果指定的. 通过支持Globs picomatch.

调试选项

这些选项可以帮助您调试问题或支持与其他工具的集成.

CLI国旗
——缺少互动 不要询问关于设置的交互式问题,也不要覆盖输出. 真正的 non-TTY环境中.
——调试 输出详细的调试信息. 这个选项意味着 ——缺少互动.
--ci 将这个构建标记为CI构建. 另外,设置 CI 环境变量(存在于大多数CI系统中). 这个选项意味着 ——缺少互动.
——列表 列出可用的故事. 这需要运行一个完整的构建.
--only 只运行一个故事或故事的子集. 使用 title 从故事的默认导出作为故事路径. 这通常看起来像 路径/ /故事. 通过支持Globs picomatch. 这个选项意味着 ——preserve-missing.
——junit-report [filepath] 将构建结果写入JUnit XML文件. 默认为 彩色-build - {buildNumber}.xml. {buildNumber} 将被替换为实际的构建号.

弃用的选项

这些选项仍然被支持,但可能在未来的版本中被删除. 尽可能避免使用它们. 详见下面的“通过隧道上传Storybook”.

CLI国旗
——脚本名[名称] 启动Storybook的npm脚本. 默认为 Storybook. 别名: -s
--exec 或者,使用shell命令启动Storybook. 别名: -e
——不要一开始 不要试图开始或构建Storybook. 如果你的Storybook已经在运行,例如,当一个较大的应用程序的一部分. 别名: -S
--Storybook-port 你的Storybook运行在哪个端口上. 自动检测从npm脚本时使用 ——脚本名. 别名: -p
——Storybook-http 如果Storybook在HTTPS(本地)上运行,则启用. 自动检测从npm脚本时使用 ——脚本名.
--Storybook-cert 使用 ——Storybook-http. 自动检测从npm脚本时使用 ——脚本名.
--Storybook-key 使用 ——Storybook-http. 自动检测从npm脚本时使用 ——脚本名.
--Storybook-ca 使用 ——Storybook-http. 自动检测从npm脚本时使用 ——脚本名.
--Storybook-url 在某个URL上运行一个在线Storybook. 这意味着 ——不要一开始. 别名: -u
通过隧道上传Storybook(已弃用)

随着时间的推移,十博体育备用网址改变了彩色CLI构建和上传Storybook的方式. 在十博体育备用网址开始之前,确保您使用的是最新的 彩色 包.

隧道方法(弃用)

最初的版本 Storybook-彩色 (已弃用)使用隧道机制来捕获您的故事的截图,并创建一个托管版本的Storybook. CLI包将在CI服务器(在开发模式下运行Storybook)和十博体育备用网址的捕获云之间创建一个HTTPS隧道.

这种方法很有效, 但在构建时,它依赖于您的CI服务器和十博体育备用网址的隧道服务器之间的稳定网络连接. 在某些情况下,由于任何人都无法控制的原因,这种联系可能并不完美. 当资源无法加载时,这可能导致错误捕获故事.

构建和发布方法

^2.0.0, chrotoncli默认创建一个静态Storybook,然后在开始捕获过程之前将其上传到十博体育备用网址的服务器. 它依赖于Storybook命令 build-Storybook.

在实践中,这种方法对于创建构建来说是更可预测、更可靠和更快的. 这也意味着你可以通过 ——exit-once-uploaded 国旗(截止 ^3.4.0),而不必保持你的CI服务器运行时,彩色捕获.

十博体育备用网址将继续支持隧道,但它已被正式弃用. 十博体育备用网址强烈建议您切换到已上传的构建.

要开始使用上传的构建,请确保您使用的是最新版本的 彩色 而且你没有使用 -s / ——脚本名 在你的“彩色”脚本中标记. 如果你使用自定义的npm脚本名来构建Storybook,你需要传递 -b / ——build-script-name 标志到彩色命令行.

GitHub动作中的用法

这里有一些例子: http://github.com/chromaui/chromatic-cli

不运行这个基于github pull_request事件. 如果这样做,提交和分支将被错误报告,请使用 http://github.com/chromaui/action 而不是.

迁移到新的CLI包

这个包以前被命名过 Storybook-彩色. 如果你还有 Storybook-彩色 安装好了,你应该把它拆下来再安装 彩色 而不是:

npm:

npm卸载 ——save-dev Storybook-彩色
npm 安装 ——save-dev 彩色

纱:

纱删除Storybook-彩色
纱添加 ——开发 彩色

故障排除

我看到了《十博体育备用网址》. 原因:证书链中的自签名证书”当在我的机器上运行CLI.

这不是一个彩色命令行问题. 在运行CLI之前,检查您的机器是否正在使用特殊的安全或网络设置.

友情链接: 1 2 3 4 5 6 7 8 9 10