Storybook: Сохранение пути к статическому каталогу при сборке

Хм, так что эта проблема касается build-storybook , мне нужно разобраться, как это работает.

Вы можете попробовать собственное промежуточное ПО? Я не уверен, что это сработает, но может.
https://github.com/storybooks/react-storybook/pull/435#issuecomment -264813688
https://github.com/storybooks/react-storybook/blob/master/src/server/middleware.js#L35

: +1: Это проблема - не для создания сборника рассказов, а просто для использования разработчиками.

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

const express = require('express');
const path = require('path');
const paths = require("../config/paths");

const expressMiddleWare = (router) => {
    console.log(path.join(__dirname), paths.appPublic);
    router.use('/public', express.static(paths.appPublic))
};

module.exports = expressMiddleWare;

Я постараюсь получить за это пиар, но не уверен, есть ли у меня время

Спасибо, что поделились своим решением! ❤️

Всем привет! Похоже, что в последнее время в этом вопросе не так много происходило. Если все еще есть вопросы, комментарии или ошибки, пожалуйста, продолжайте обсуждение. К сожалению, у нас нет времени разбираться в каждой проблеме. Мы всегда открыты для предложений, поэтому, если вы хотите помочь, отправьте нам запрос на перенос. Неактивные вопросы будут закрыты через 60 дней. Благодаря!

Привет, это снова я! Я собираюсь закрыть эту проблему, чтобы помочь нашим сопровождающим сосредоточиться на текущей дорожной карте разработки. Если упомянутая проблема по-прежнему вызывает беспокойство, откройте новую заявку и укажите эту старую. Ура и спасибо за использование Storybook!

Привет! @ndelangen @hansthinhle @patrickgordon

Я столкнулся с той же проблемой. Было ли это когда-нибудь решено?

Благодаря!

привет @aviramga - мое решение, которое я опубликовал несколько раз, разрешило его за нас. Я никогда не занимался пиаром, чтобы решить эту проблему.

Могу все еще делать это сейчас, когда моя память пошатнулась :)

Привет @patrickgordon. К сожалению, моя проблема связана только с сборкой рассказов: /

Я использую его с инструментом под названием Percy, чтобы найти проблемы с пользовательским интерфейсом в моем приложении.

Удалось найти решение для сборки?

Похоже, вы можете обойти это, используя символические ссылки:

Добавьте каталог с произвольным именем (например, static-link и поместите туда файл с именем public (без расширения) со следующим содержимым:

../public

Тогда вы сможете достичь того, что вам нужно, с помощью -s static-link

@Hypnosphi спасибо за подсказку! это, похоже, не работает.
Не могли бы вы объяснить, как это работает?

Все мои статические файлы находятся в каталоге с именем "static" (не общедоступным).
Я пробовал способы, которые не сработали:

1. Создайте произвольный каталог с файлом с именем "static" и ../static в нем - ошибка сборки с регистром, когда я запускал build-storybook
2. То же, что и выше, но с файлом с именем "public" - изображения по-прежнему не отображаются

Любой совет?

благодаря

Какую ОС вы используете?
https://en.wikipedia.org/wiki/Symbolic_link#Overview

В чем была ошибка?

Mac High Sierra

@Hypnosphi, но просто чтобы убедиться, что я правильно понимаю, чтобы настроить ваш пример для моего варианта использования, мне нужно создать новый каталог, например, static-link, в нем поместите файл с именем static и в нем напишите ../static

Верный?

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

mkdir static-link
ln -s static static-link/static

Он создаст «файл» в каталоге статических ссылок, которым можно будет поделиться в git (хотя он не будет работать в Windows)

@Hypnosphi Я

Нет, это должно быть настойчиво

@Hypnosphi нет, все еще не работает. Во время строительства я получаю журнал, в котором написано:
cp: нет такого файла или каталога: static-link / static

Я выполнил ваши инструкции выше. Итак, у меня есть пустой каталог с именем static-link с символической ссылкой от static к static-link / static

Что я делаю неправильно?

Очень признателен за то, что нашли время помочь :)

И вы используете вариант -s static-link , верно?

@Hypnosphi, вы имеете в виду build-storybook -c .storybook -s static-link ?

да

я делаю

Извините, я ошибся:

ln -s ../static static-link/static

@Hypnosphi
почему ../static?

Я прав, что каталог статических ссылок пуст?
Может быть, вы хотите попробовать перейти в приватную беседу и опубликовать здесь наши окончательные результаты? Я чувствую, что мы очень близки и это просто недопонимание :)

Это относительный путь от места ссылки до цели ссылки

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

@Hypnosphi нашел обходной путь. Большое вам спасибо за вашу помощь, вы спасаете жизнь !!

любой совет для решения этого?

Да, просто запустите предложенное выше решение. Работа с символической ссылкой
ln -s /<absolute-path-your-static-directory> storybook-static-symlink/static

@aviramga , этот метод все еще работает у вас? Мне не повезло с использованием символической ссылки.

Моя структура папок

|- docs
  |- folders-with-images
|- sandbox (holds my storybook files)
|- src
  |- README.md with image paths `/docs/folder/image.png`

Я могу заставить это работать при обслуживании сборника рассказов start-storybook -c sandbox -s sandbox,docs -p 6006 с использованием файла промежуточного слоя:

const express = require('express');
const path = require('path');

module.exports = router => {
  router.use('/docs', express.static(path.join(__dirname, '..', 'docs')));
}

Но добавить символическую ссылку с использованием ln -s /docs sandbox/docs и запустить build-storybook -c sandbox -s sandbox,docs -o storybook прежнему не работает.

Папки в docs копируются, но поскольку мне нужен путь к файлу /docs/folder/image.png изображения 404.

Также удалось использовать статическую ссылку для решения этой проблемы:

package.json:

"scripts": {
  "storybook": "(mkdir ./src/static-link || true) && (ln -s ../static ./src/static-link/static || true) && start-storybook -p 6006 -s ./src/static-link"
}

Я бы посоветовал не создавать символическую ссылку через скрипт package.json из соображений совместимости, если не все разработчики используют одну и ту же ОС.

В качестве альтернативы я предлагаю использовать плагин copy-webpack в файле .storybook / webpack.config.js , например:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = config => {
  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  // Other configuration properties

  config.plugins.push(
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, 'static-foo'),
        to: '.'
      },
      {
        from: path.resolve(__dirname, '../static-bar'),
        to: './bar'
      }
    ])
  );

  return config;
}

Это, например, смонтирует содержимое каталога .storybook/static-foo в http://localhost:6006/ а содержимое static-bar в http://localhost:6006/bar/ .

Также обратите внимание на использование push для добавления к массиву plugins чтобы избежать перезаписи других плагинов, что может нарушить конфигурацию Storybook Webpack.

Для справки в будущем можно использовать символические ссылки. Если вы хотите / должны использовать их с относительными путями, просто используйте переключатель -r следующим образом: ln -rs dir1 dir2

Я лично считаю, что если сборник рассказов сочтет целесообразным скопировать весь статический каталог, это должно быть четко указано в документации. В противном случае это поведение следует отключить для того, которое вместо этого создает соответствующие символические ссылки. Я узнал о копировании, потому что это приводило к сбою моего сервера из-за чрезмерного использования дискового пространства!

Так что в основном нет официального встроенного решения, и все «решения» - просто случайные дрянные взломы :)

Я бы посоветовал не создавать символическую ссылку через скрипт package.json из соображений совместимости, если не все разработчики используют одну и ту же ОС.

В качестве альтернативы я предлагаю использовать плагин copy-webpack в файле .storybook / webpack.config.js , например:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = config => {
  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  // Other configuration properties

  config.plugins.push(
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, 'static-foo'),
        to: '.'
      },
      {
        from: path.resolve(__dirname, '../static-bar'),
        to: './bar'
      }
    ])
  );

  return config;
}

Это, например, смонтирует содержимое каталога .storybook/static-foo в http://localhost:6006/ а содержимое static-bar в http://localhost:6006/bar/ .

Также обратите внимание на использование push для добавления к массиву plugins чтобы избежать перезаписи других плагинов, что может нарушить конфигурацию Storybook Webpack.

это не работает;)

это рабочий конфиг:

.storybook / webpack.config.js
(при условии, что статическая папка находится в корневой папке проекта)

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = async ({ config }) => {

  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  // Other configuration properties

  config.plugins.push(
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../../static'),
        to: './static'
      }
    ])
  );

  return config;
}

@mtrabelsi у меня почему-то не работает ...

Кроме того, я предполагаю, что у вас есть тип, поскольку ваша папка .storybook стоит на один уровень в глубину от root , а не в два раза. Итак, вам нужно перейти на:
from - from: path.resolve(__dirname, '../../static')
to - from: path.resolve(__dirname, '../static')

"copy-webpack-plugin": "^ 5.0.4"
Все пути верны. Дважды проверенный.

Обновить
Я узнал об ответе middleware.js внутри моей папки .storybook/ :

const express = require('express');
const path = require('path');

module.exports = router => {
  router.use('/docs', express.static(path.join(__dirname, '..', 'docs')));
}

@BiosBoy, чтобы избежать путаницы, быстро

My_sweet_projet_ROOT_DIR / components / .storybook / webpack.config.js
My_sweet_projet_ROOT_DIR / static

Я также использую next.js в качестве основного приложения, которое потребляет компоненты реакции из папки компонентов.

Вот моя установка (вы можете воспроизвести ее на своей стороне - я вам доверяю: D)

My_sweet_projet_ROOT_DIR / package.json

{
  "name": "sweet_like_butter",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "next": "^8.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.10.0"
  }
}

My_sweet_projet_ROOT_DIR / next.config.js

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

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

1. создайте файл manager-head.html в каталоге .storybook. https://storybook.js.org/docs/configurations/add-custom-head-tags/
2. Добавить

<head>
  <script>
    const hostname = window.location.hostname
    if (hostname !== "" && hostname !== "localhost") {
      const script = document.createElement('base')
      script.href = '/storybook-static/'
      document.getElementsByTagName('head')[0].appendChild(script)
    }
  </script>
</head>

(с script.href = на любой желаемый путь)

файлы в index.html теперь извлекаются с указанным префиксом

Разве это поведение не должно быть встроено в Storybook, где, если вы отметите -s ./static ваши пути будут работать в Storybook так же, как и в производственной среде? Кажется бессмысленным, что когда я говорю Storybook, что мой статический каталог ./static , мои относительные пути, например, ./static/image.png должны вместо этого быть ./image.png или использовать какую-то глупую символическую ссылку 🤔

@eckmLJE Если вы используете фрагмент, который я опубликовал выше, он должен работать без какой-либо дополнительной конфигурации веб-пакета или символической ссылки. Однако мы могли бы рассмотреть возможность автоматического вывода этого сообщения в процессе сборки.

Я все еще сталкиваюсь с проблемой в 2020 году ...
Мой случай очень прост: в моем package.json есть этот сценарий: "storybook": "start-storybook -s ./dist/img -p 8888"

Поэтому, когда я запускаю npm run storybook , отображается info => Loading static files from: /home/vagrant/projects/MySuperProject/web/themes/ofb/ofb_ui/dist/img .

но когда я пытаюсь получить доступ к файлу в каталоге dist/img из браузера с этим URL-адресом, это не работает: http://localhost:8888/myImage.png ...

Итак, ребята, это ошибка или я что-то делаю не так?

@ndelangen, как вы думаете, мы сможем вписать это в

Похоже, что api CopyWepbackPlugin изменился, и вам нужно добавить ключ pattern к решению @mtrabelsi следующим образом:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = async ({ config }) => {
  config.plugins.push(
    new CopyWebpackPlugin({
      pattern: [
        {
          from: path.resolve(__dirname, '../../static'),
          to: './static'
        }
      ]
    })
  );

  return config;
}

Я добавлю свои два цента, связанные с этой проблемой. Хотя я думаю, что это тесно связано, мое решение отличается от @mtrabelsi тем, что я обнаружил, что простого копирования моих ресурсов в каталог ./static в результате выполнения команды build-storybook было недостаточно. В частности, если я развертываю статическое приложение на сервере Tomcat, который обслуживает статическое приложение из http://example.com/docs , где docs - это каталог, расположенный в Tomcat webapps / на сервере.

Из-за подпути ни один из файлов вне каталога / css в каталоге / static не загружался. Я использую относительные пути для изображений и шрифтов (это были статические активы , которые были не в нагрузить на развернутой версии). Таким образом, запросы типа https://example.com/img/path/to/my/image не удались, тогда как он должен был добавлять / static, т.е. https://example.com/static/img/path/to/my/image Мои решения, как я уже сказал, очень близки к @mtrabelsi, но я просто

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = async ({ config }) => {

  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  // Other configuration properties

  config.plugins.push(
    new CopyWebpackPlugin({
      pattern: [
        {
          from: path.resolve(__dirname, './_assets'), // My static font and images are located in the .storybook dir
          to: './' // Drop both the fonts/ and img/ directory into the root of the build output.
        }
      ]
    })
  );

  return config;
}

После этого изображения и шрифты были загружены соответствующим образом.

@tmeasday предлагает: почему мы не можем сделать эту опцию main.js чтобы она отображалась как в start-storybook и в build-storybook

@ vcastro45 Я тестировал это как для сборника рассказов, так и для сборника рассказов, и, похоже, он работает (проверено на ветке next ).

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

@shilman Это возможно, но нам придется поднять предустановку с
https://github.com/storybookjs/storybook/blob/9ea455a1746c489b7364448212663f2445af8a8b/lib/core/src/server/manager/manager-config.js#L101 -L102

до здесь:
https://github.com/storybookjs/storybook/blob/19c2420db80fcb3b89b34cdbbe03bf9010b0b3b2/lib/core/src/server/build-static.js#L190 -L191

А затем передайте его всем нижним функциям в цепочке build / dev.
Это настоящий рефакторинг, я не могу сделать его за 1 день.

Это также был бы еще один момент, когда мы действительно хотели бы перенести все это на TS. Поскольку мы все равно затронем 50% файлов lib / core.

@ndelangen OOF, давай не будем делать этого сейчас

Да, мы сделаем это когда-нибудь

@ndelangen Я задокументировал обходной путь в обсуждении с @tmeasday в # 11370. Предлагаем переместить эту конфигурацию в main.js и добавить возможность поддержки этого варианта использования в 6.x как функции, а не критического изменения.

Как вы думаете, будет ли реализовано решение вроде start-storybook -p 6006 -s "./public:/static" для обслуживания статических файлов из ./public по пути /static ? Это привело бы к чрезвычайно гибкому использованию и соответствовало бы соглашениям Docker о сопоставлении путей, с которыми многие из нас уже знакомы.

Всем привет! Похоже, что в последнее время в этом вопросе не так много происходило. Если все еще есть вопросы, комментарии или ошибки, пожалуйста, продолжайте обсуждение. К сожалению, у нас нет времени разбираться в каждой проблеме. Мы всегда открыты для предложений, поэтому, если вы хотите помочь, отправьте нам запрос на перенос. Неактивные вопросы будут закрыты через 30 дней. Благодаря!

@nfroidure , это определенно интересная идея!

@ndelangen Я могу попробовать это с пиаром, если хотите. Есть ли шанс, что он будет объединен?

@nfroidure будет выполнимо:
Вот куда пойдет код:
https://github.com/storybookjs/storybook/blob/9182d9f5ddbe136e9cd5fc9f11fa962a3cfe08f1/lib/core/src/server/build-dev.js#L77 -L93

Что ж, у меня здесь кое-что есть: https://github.com/storybookjs/storybook/pull/12222

Некоторые тесты терпят неудачу, но я не вижу никакой связи между этими ошибками и моими изменениями.

LMKWYT;)

Спасибо за этот пиар @nfroidure !

Я посмотрю на этой неделе!

ZOMG !! Я только что выпустил https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.6, содержащий PR №12222, который ссылается на эту проблему. Обновите сегодня, чтобы попробовать!

Вы можете найти этот предварительный выпуск в теге @next NPM.

Закрытие этого вопроса. Пожалуйста, откройте снова, если вы считаете, что еще многое предстоит сделать.

Есть ли пример использования этой новой функции?