angular - Storybook Angular NX 工作区 : How to publish using Chromatic?

Question

嗨，有人知道如何在 NX 工作区中运行 Storybook Chromatic 吗？ 我的 Angular 应用程序和库在本地服务时工作正常，我已经为我的项目运行了故事。我什至在本地制作并发布了这些故事。 我想要的是使用 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 (或 13.x 中的 project.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 Storybook 可发布版本:npx nxserve ui-library:build-storybook

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

引用文献:

• https://nx.dev/storybook/overview-angular