在故事书 monorepo 中提供静态资产答案

【问题标题】：serve static assets in storybook monorepo在故事书 monorepo 中提供静态资产
【发布时间】：2019-12-04 07:22:16
【问题描述】：

我有一个使用故事书的 lerna + yarn 工作区 monorepo。
每个包/组件都有自己的 /assets 文件夹，其中包含如下静态图像：

/包
/组件1
/资产
... 静态图片
index.tsx
/组件2
/资产
... 静态图片
index.tsx

在官方文档中，它说包含 -s 选项，但它仅适用于单个通用资产文件夹，而不适用于每个包： start-storybook -p 6006 -s assets

我如何在故事书中为每个组件提供这些静态资产？

【问题讨论】：

标签： reactjs storybook lerna yarn-workspaces

【解决方案1】：

如果您通过, as documented here 拆分它们，您可以指定多个静态目录。

此外，如果您使用 : 拆分源位置和路径位置，您还可以指定提供服务的路径，未记录，但您可以查看 this split call in the source code here。

在这个例子中把它放在一起，你可以运行

"scripts" {
  "storybook": "start-storybook -s ./packages/component1/assets:assets,./packages/component2/assets:assets"
}

【讨论】：

这就是我需要的答案！无论是否无证，这对我来说在 2021 年都非常有用。
这对我有用，应该被弃用，但在 main.js 中添加 staticDirs 不会

【解决方案2】：

好吧..它似乎不支持开箱即用，所以这是我解决问题的方法，希望它可以帮助其他人。

基本思路是将所有包的所有静态资产复制到故事书输出目录中：

package.json

"scripts": {
    // build the storybook and run copy assets script
    "build-storybook": "build-storybook -c .storybook -o .out && yarn copy-storybook-assets",
    // clean output directory, copy the assets to the output directory and run the storybook
    "dev": "yarn clean-storybook-output && yarn copy-storybook-assets && start-storybook -p 6006 -s .out",
    // clean the output directory
    "clean-storybook-output": "rimraf .out",
    // run on all the packages and copy all the static assets to the output directory
    "copy-storybook-assets": "copyfiles -f \"packages/**/assets/*\" -u 1 .out"
  },

【讨论】：