Question

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

/ packages
    / component1
          /资产
          ...静态图片
    index.tsx
/ component2
          /资产
          ...静态图片
    index.tsx

在官方文档中表示包含-s选项，但仅适用于单个常规资产文件夹，不适用于每个软件包： start-storybook -p 6006 -s assets

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

Answer 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"
}

Answer 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"
  },

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

2 个答案: