2

嗨，有人知道如何在 NX 工作区中运行 Storybook Chromatic 吗？在本地服务时，我的 Angular 应用程序和库运行良好，我已经为我的项目运行了 Stories。我什至在本地建立并发布了这些故事。我想要的是使用 Chromatic 将它发布到远程，但我不知道如何。

有这个过程吗？我还没有找到一个。
我现在正在尝试一些非常混乱的东西 - 但它不起作用。这是我失败的尝试：

将运行脚本添加到 Workspace package.json：

"build-storybook": "./node_modules/@storybook/angular/bin/index.js build-storybook --output-dir ./dist/storybook -c ./libs/cwb-panel/.storybook”

给出这个错误：

Command failed with exit code 1: npm run --silent build-storybook -- --output-dir /var/folders/qz/2d3l6_blahblahblah

error: unknown option '--output-dir'

我很难过，一定有办法，只是不确定它是什么:(

4

2 回答 2

2

在您的 nx 项目中，您应该有一个workspace.json（或project.json在 13.x 中）已经有一些故事书配置：

"storybook": {
  "executor": "@nrwl/storybook:storybook",
  "options": {
    "uiFramework": "@storybook/react",
    "port": 4400,
    "config": { "configFolder": "libs/ui-library/.storybook" }
  },
  "configurations": { "ci": { "quiet": true } }
},
"build-storybook": {
  "executor": "@nrwl/storybook:build",
  "outputs": ["{options.outputPath}"],
  "options": {
    "uiFramework": "@storybook/react",
    "outputPath": "dist/storybook/ui-library",
    "config": { "configFolder": "libs/ui-library/.storybook" }
  },
  "configurations": { "ci": { "quiet": true } }
}

您可以通过运行以下命令构建 nx 故事书可发布版本：npx nx serve ui-library:build-storybook

这将生成dist/storybook/ui-library您要在 Chromatic 中使用或在其他地方部署的文件夹。

参考：

于 2021-06-14T11:27:33.160 回答
0

@feralamillo 是对的，但他的回答不完整。

您不能只运行 build-storybook 命令，您需要像这样自定义命令：

npx chromatic --project-token=cXXXXX -d=dist/storybook/component-name

我一步一步给你：

  1. 建立你的故事书 ( npx nx run logo:build-storybook)
  2. 在 Chromatic Platform 中创建您的项目并获取项目密钥
  3. 使用自定义命令来使用您的 dist 目录 ( npx chromatic --project-token=cXXXXX -d=dist/storybook/component-name) 更多信息：https ://www.chromatic.com/docs/cli
  4. （可选）在您的project.json中创建一个自定义命令来执行此操作。更多信息：https ://nx.dev/l/a/executors/run-commands-builder
  5. 我不知道如何在 monorepo 中管理色彩，但在这里我找到了一些管理它的方法：https ://www.chromatic.com/docs/monorepos.html#monorepos
于 2021-12-01T06:19:42.193 回答