故事书Angular NX工作空间:如何使用Chromatic发布？

Question

大家好，有人知道如何在NX工作区中运行Storybook Chromatic吗？我的Angular应用程序和libs在本地服务时运行得很好，我的项目也运行得很好。我甚至在当地建立并发布了这些故事。我想要的是将它发布到远程使用Chromatic，但我不知道如何。

有没有相应的流程？我还没有找到。

我正在尝试一些非常混乱的东西--但它不起作用。这是我失败的尝试：

将运行脚本添加到工作区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'

我被难住了，一定有办法，只是不知道是什么：

Answer 1

在你的nx项目中，你应该有一个已经有了一些故事书配置的workspace.json：

"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中使用的文件夹或将其部署到其他地方的文件夹。

Answer 2

@feralamillo是正确的，但他的答案是不完整的。

你不能只运行build-storybook命令，你需要像这样定制命令：

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

我将一步一步地告诉你：

在Chromatic Platform中构建你的故事书(npx nx run logo:build-storybook)

• Create你的项目并获得项目密钥

• 使用自定义命令来使用你的dist目录(npx chromatic --project-token=cXXXXX -d=dist/storybook/component-name)更多信息：https://www.chromatic.com/docs/cli

• (Optional)在你的project.json中创建一个自定义命令来执行这个命令。更多的information:https://nx.dev/l/a/executors/run-commands-builder

• I不知道如何在monorepo中管理色度，但我在这里找到了一些方法来管理它：https://www.chromatic.com/docs/monorepos.html#monorepos