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;

سأحاول الحصول على PR لهذا ولكن لست متأكدًا مما إذا كان لدي الوقت في أجهزة الصراف الآلي

شكرا لتقاسم الحل الخاص بك! ❤️

مرحباً بالجميع! يبدو أنه لم يكن هناك الكثير مما يحدث في هذه المشكلة مؤخرًا. إذا كانت لا تزال هناك أسئلة أو تعليقات أو أخطاء ، فلا تتردد في مواصلة المناقشة. للأسف ، ليس لدينا الوقت لحل كل مشكلة. نحن دائمًا منفتحون على المساهمات ، لذا يرجى إرسال طلب سحب لنا إذا كنت ترغب في المساعدة. سيتم إغلاق المشكلات غير النشطة بعد 60 يومًا. شكر!

مرحبًا ، إنه أنا مرة أخرى! سأقوم بإغلاق هذه المشكلة لمساعدة المشرفين لدينا على التركيز على خارطة طريق التطوير الحالية بدلاً من ذلك. إذا كانت المشكلة المذكورة لا تزال مصدر قلق ، فيرجى فتح تذكرة جديدة وذكر هذه البطاقة القديمة. في صحتك وشكرا لاستخدام Storybook!

مرحبا! ndelangenhansthinhlepatrickgordon

أنا أواجه نفس المشكلة بالضبط. هل تم حل هذا من قبل؟

شكر!

مرحبًا aviramga -

لا يزال من الممكن فعل ذلك الآن بعد أن تم تحريك ذاكرتي :)

مرحبًا @ باتريكجوردون. للأسف مشكلتي هي فقط مع build-storybook: /

أنا أستخدمه مع أداة تسمى بيرسي للعثور على مشكلات واجهة المستخدم في تطبيقي.

هل تمكنت من إيجاد حل للبناء؟

يبدو أنه يمكنك حل هذا باستخدام الروابط الرمزية:

أضف دليلًا باسم عشوائي (على سبيل المثال ، static-link ، وقم بوضع ملف يسمى public (بدون أي امتداد) بالمحتويات التالية:

../public

إذن يجب أن تكون قادرًا على تحقيق ما تحتاجه بـ -s static-link

Hypnosphi شكرا
هل يمكنك شرح كيف يعمل؟

جميع ملفاتي الثابتة موجودة ضمن دليل يسمى "ثابت" (غير عام).
حاولت الطرق التي لم تنجح:

1. أنشئ دليلًا عشوائيًا بملف يسمى "ثابت" و .. / ثابت بداخله - خطأ في البناء المغلف عند تشغيل build-storybook
2. مثل ما ورد أعلاه ولكن مع ملف باسم "عام" - ما زلت لا ترى أي صور

اي نصيحه؟

شكر

ما هو نظام التشغيل الذي تستخدمه؟
https://en.wikipedia.org/wiki/Symbolic_link#Overview

ما هو الخطأ؟

ماك هاي سييرا

Hypnosphi ولكن فقط للتأكد من فهمي بشكل صحيح ، لضبط

صيح؟

حسنًا ، يبدو أن تعليماتي الخاصة بإنشاء ارتباط رمزي كانت خاطئة. الطريقة الصحيحة هي:

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

سيتم إنشاء "ملف" في دليل ارتباط ثابت يمكن مشاركته في git (لن يعمل على نظام Windows بالرغم من ذلك)

Hypnosphi سأعطيها فرصة. ولكن هل يعني ذلك أنه يجب علي تشغيله في كل مرة أقوم فيها بتشغيل كتاب البناء؟

لا ، يجب أن تكون مستمرة

Hypnosphi كلا ، ما زلت لا تعمل. أثناء البناء ، أحصل على سجل يقول:
cp: لا يوجد مثل هذا الملف أو الدليل: static-link / static

لقد اتبعت تعليماتك أعلاه. لذا لدي دليل فارغ يسمى رابط ثابت مع ارتباط رمزي من ثابت إلى رابط ثابت / ثابت

ما الخطأ الذي افعله؟

أقدر حقًا قضاء بعض الوقت في المساعدة :)

وأنت تستخدم الخيار -s static-link ، أليس كذلك؟

Hypnosphi تقصد بناء-ستوري بوك -ج - ستوري بوك

نعم

أنا افعل

آسف ، لقد أخطأت في كتابة:

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

تضمين التغريدة
لماذا ../ ثابت؟

هل أصحح أن دليل الارتباط الثابت فارغ؟
ربما تريد محاولة الانتقال إلى محادثة خاصة ونشر نتائجنا النهائية هنا؟ أشعر أننا قريبون جدًا وأن الأمر مجرد سوء تفاهم :)

إنه المسار النسبي من موقع الارتباط إلى هدف الارتباط

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`

يمكنني الحصول على هذا العمل عند تقديم Storybook 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"
كل الطرق صحيحة. فحص مزدوج.

تحديث
لقد اكتشفت إجابة BradMcGonigle العلوي من خلال إنشاء ملف 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 / المكونات / .storybook / webpack.config.js
My_sweet_projet_ROOT_DIR / ثابت

أستخدم أيضًا next.js باعتباره التطبيق الرئيسي حيث يستهلك مكونات التفاعل من مجلد المكونات.

هنا الإعداد الخاص بي (يمكنك إعادة إنتاجه على جانبك - أنا أثق بك: د)

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 هل تعتقد أننا يمكن أن

يبدو أن واجهة برمجة تطبيقات 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 من build-storybook لم يكن كافيًا. على وجه التحديد ، إذا كنت أقوم بنشر التطبيق الثابت على خادم Tomcat الذي يخدم التطبيق الثابت من http://example.com/docs ، حيث يمثل المستندات دليلًا موجودًا في Tomcat webapps / على الخادم.

بسبب المسار الفرعي ، لم يتم تحميل أي من الملفات الموجودة خارج الدليل / css في الدليل / static. أنا باستخدام المسارات النسبية للصور والخطوط (كانت هذه الأصول الثابتة التي تم عدم تحميل على الإصدار نشر). لذا فشلت طلبات مثل https://example.com/img/path/to/my/image ، عندما كان من المفترض أن تتم إضافة / static ، أي. https://example.com/static/img/path/to/my/image حلولي ، كما قلت ، قريبة جدًا من أسقط الدليلين إذا كانت الخطوط و img في جذر الإخراج:

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 لقد اختبرت هذا لكل من كتاب قصص البداية و build-storybook ، ويبدو أنه يعمل (تم اختباره في الفرع 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.
إنه معيد البناء تمامًا ، وليس شيئًا يمكنني القيام به في يوم واحد.

ستكون أيضًا لحظة أخرى نرغب حقًا في ترحيلها كلها إلى 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 ؛)

شكرا لك على هذا PRnfroidure !

سوف أنظر إليه هذا الأسبوع!

ZOMG !! لقد أصدرت للتو https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.6 تحتوي على PR # 12222 تشير إلى هذه المشكلة. قم بالترقية اليوم لتجربتها!

يمكنك العثور على هذا الإصدار التجريبي على علامة @next NPM.

إغلاق هذه القضية. الرجاء إعادة الفتح إذا كنت تعتقد أنه لا يزال هناك المزيد لتفعله.

هل هناك مثال على كيفية استخدام هذه الميزة الجديدة؟