обслуживать статические ресурсы в монорепозитории сборника рассказов

У меня есть monorepo рабочих пространств lerna + yarn, в котором используется сборник рассказов.
Каждый пакет / компонент имеет свою собственную папку / assets, содержащую статические изображения, как показано ниже:

/ пакеты
/ component1
/ assets
... статические изображения
index.tsx
/ component2
/ assets
... статические изображения
index.tsx

в официальной документации говорится, что необходимо включить параметр -s, но он подходит только для одной общей папки ресурсов, а не для каждого пакета: start-storybook -p 6006 -s assets

как я могу использовать эти статические ресурсы в сборнике рассказов для каждого компонента?


reactjs storybook lerna yarn-workspaces
person ronen    schedule 04.12.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

ну .. похоже, что он не поддерживается из коробки, так что это мое решение проблемы, надеюсь, это поможет другим людям.

основная идея состоит в том, чтобы скопировать все статические ресурсы всех пакетов в выходной каталог сборника рассказов:

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"
  },
person ronen    schedule 05.12.2019

arrow_upward
1
arrow_downward

Вы можете указать несколько статических каталогов, если разделите их с помощью , , как описано здесь .

Кроме того, вы также можете указать путь для его обслуживания, если вы разделите исходное местоположение и местоположение пути с помощью :, недокументировано, но вы можете взглянуть на этот раздельный вызов в исходном коде здесь.

Собрав все это вместе в этом случае, вы можете запустить

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