Storybook Angular NX 工作区：如何使用 Chromatic 发布？

Posted 2023-02-19

【中文标题】Storybook Angular NX 工作区：如何使用 Chromatic 发布？

【英文标题】：Storybook Angular NX workspace: How to publish using Chromatic?

【发布时间】：2021-03-10 12:15:52

【问题描述】：

嗨，有人知道如何在 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'

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

【问题讨论】：

嗨 - 我对在 nwrl/nx 工作区中使用 Storybook 时如何发布（制作可部署的工件）有同样的问题。你有没有想过？

还没有，抱歉。

【参考方案1】：

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

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

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

我一步一步给你：

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

【参考方案2】：

在您的 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  
        

您可以通过运行：npx nx serve ui-library:build-storybook

构建一个 nx 故事书可发布版本

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