Storybook: دعم Webpack 4؟

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

أي شخص يفعل هذا حتى الآن؟

سأفعل ذلك ، وسيكون تغييرًا جذريًا في القصص المصورة. الشيء هو أن تكوينات webpack المخصصة قد تحتوي على مكونات إضافية ، والمكونات الإضافية المستهدفة لـ webpack 4 في معظم الأوقات (إن لم يكن دائمًا) ليست متوافقة مع webpack 3

عظيم ، شكرا جزيلا!

إنه معطل حاليًا لأنه على الرغم من أن كتاب القصص يتطلب صراحة webpack==3.11.0 ويحصل على نسخة خاصة من Webpack 3 في دليله الفرعي node_modules ، فإنه يتطلب أيضًا dotenv-webpack .

الآن يسرد dotenv-webpack تبعية نظير webpack==^1 || ^2 || ^3 || ^4 مما يجعل npm يعتبر فكرة جيدة لتثبيته في node_modules الرئيسي بجوار Webpack 4 بدلاً من التالي إلى Webpack 3 بسعر أقل @storybook/react/node_modules .

الآن بمجرد تحميل Storybook dotenv-webpack ، فإنه بالتناوب يتسبب في استدعاء Webpack 4.

أعتقد أن سبب ما ورد أعلاه هو خطأ في npm : https://github.com/npm/npm/issues/19944

انتقلت قائمة التحقق من الأشياء التي تمنع الترحيل من جانبنا الآن إلى https://github.com/storybooks/storybook/pull/3148

يظهر لي الخطأ أدناه عند تشغيل Storybook مع مشروع باستخدام Webpack 4 ؛

node_modules/webpack/lib/DefinePlugin.js:42
        compiler.hooks.compilation.tap(
                       ^

TypeError: Cannot read property 'compilation' of undefined

هذا يمنعنا من متابعة Webpack 4

يمكنك الاشتراك في تحديثات https://github.com/storybooks/storybook/pull/3148

TomFoyster لدي نفس المشكلة ، عملت مؤقتًا على حلها باستخدام yarn بدلاً من npm install . يبدو لإصلاحه في حالتي.

تم إصداره كـ v4.0.0-alpha.0

Hypnosphi بعد التحديث إلى v4.0.0-alpha.0 ، تتوقف أكشاك تجميع القصص القصيرة الخاصة بي وتتوقف على المكوّن الإضافي compat ، ولا تتجاوز 95٪ أبدًا:

⚡️ frontend@feature/data-integration ~ npm run storybook

> [email protected] storybook /Users/will/projects/frontend
> start-storybook -p 6006 -s ./assets

info @storybook/react v4.0.0-alpha.0
info
info => Loading static files from: /Users/will/projects/frontend/assets .
info => Loading custom .babelrc
info => Loading custom webpack config (extending mode).
 10% building modules 2/2 modules 0 activeℹ ｢wdm｣: wait until bundle finished:
(node:85321) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
 95% emitting unnamed compat plugin

قبل الترقية إلى إصدار ألفا ، كنت أواجه مشكلة TomFoyster .

لا يزال بإمكاني تجميعه الآن باستخدام yarn بدلاً من npm ، ولكن يبدو أن أحدث إصدار لم يحل المشكلة.

v4.0.0-alpha.0 تم كسره ، يرجى استخدام ألفا لاحقًا (على سبيل المثال ، v4.0.0-alpha.3 )

افعل rm -rf node_modules ثم استخدم yarn install . تعمل مع storybook v3.4.1 و webpack v4.6.0

على وجه التحديد ، يحل الغزل المشكلة عن طريق تثبيت تبعية القصص القصيرة بشكل منفصل.

لقد حاولت أيضًا استخدام v4.0.0-alpha.3 ولكن يبدو أن @storybook/[email protected] لا أعمل معه.

ما الخطأ الذي تحصل عليه ankibalyan ؟ يبدو أن هذا الملحق يعمل بشكل جيد في الأمثلة الرسمية لدينا

حل @ danmakenoise يناسبني ، يبدو أنه يتناسب مع الغزل بدلاً من npm.

لمعلوماتك إذا كان أي شخص آخر يحاول التثبيت باستخدام npm بدلاً من yarn ، يبدو أن v4.0.0-alpha.3 يعمل الآن 👍

الحصول على نفس الخطأ مثل TomFoyster في 4.6.0 ومساحات عمل الغزل

AlastairTaft ما هو إصدار القصص القصيرة في حالتك؟

عفوًا ، أنا لست في كتب القصص ، كانت هذه هي المرة الوحيدة التي تصيب فيها Google بالخطأ.

تحديث: بالنسبة لحالتي ، كنت أصاب خطأ TomFoyster عند تشغيل webpack في وحدة التحكم. بدلاً من ذلك ، فإن تشغيل npx webpack يلتف حوله.

سخيف للغاية أن yarn هو تبعية لهذا.

تحرير: npm i -g @storybook/cli@alpha يصلح هذه المشكلة 👍

التأكيد على أن استخدام @storybook/cli@alpha و @storybook/react@alpha (في حالة استخدام React) يساعد في إصلاح مشكلات تحميل القصص المصورة.

Hypnosphi أحاول استخدام v4.0.0-alpha.3 مع webpack ^4.8.1 .
أحصل على الخطأ المذكور أدناه
Error: Cannot find module '@storybook/react/dist/server/config/defaults/webpack.config.js'
أي مؤشرات؟

anujparikh قد أكون مخطئًا ، لكنني أعتقد أنه تم استبداله الآن بـ

const { createDefaultWebpackConfig } 
 = require('@storybook/core/dist/server/config/defaults/webpack.config.js');

هل تم إهمال @ storybook / رد بسبب @ storybook / core الآن؟ @ حبوب اللقاح 8

لقد واجهنا نفس المشكلة التي ذكرها TomFoyster في https://github.com/storybooks/storybook/issues/3044#issuecomment -371071093 عند محاولة استخدام webpack.DefinePlugin() في Webpack config for Storybook ، ولكن واجهتنا مشكلة مجموعة من المشكلات الجديدة التي لم نتمكن من حلها عند الترقية إلى v4.0.0-alpha.14 .

كان الحل القبيح إلى حد ما هو طلب تبعية Webpack 3 الخاصة بـ Storybook في .storybook/webpack.config.js بدلاً من تبعية Webpack 4 الخاصة بنا:

// .storybook/webpack.config.js

const webpack = require('webpack');
// ^ Causes the TypeError: Cannot read property 'compilation' of undefined

const webpack = require('../node_modules/@storybook/core/node_modules/webpack');
// ^ Works (for us...)

hanshenrik - هل يمكنك من فضلك إظهار مثال لملف webpack.config.js كامل؟ لست متأكدًا من كيفية احتواء خطك في التكوين الخاص بي:

const path = require("path");

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test:  /\.(ts|tsx)$/,
    use: [
      require.resolve("awesome-typescript-loader"),
      require.resolve("react-docgen-typescript-loader"),
    ],
  },
  {
    test: /\.scss$/,
    use: [
      "style-loader", "css-loader", "sass-loader"
    ]
  });

  config.resolve.extensions.push(".ts", ".tsx");

  return config;
};

adyz بالتأكيد!

const path = require('path');
const webpack = require('../node_modules/@storybook/core/node_modules/webpack');

module.exports = {
  module: {
    rules: [
      // ...
    ],
  },

  plugins: [
    new webpack.DefinePlugin({ // <-- Uses DefinePlugin from the imported webpack library
      HELLO: 'world',
    }),
  ],

  resolve: {
    // ...
  },
};

يجب أن تحتاج هذا فقط إذا كنت بحاجة إلى استخدام مكون إضافي من مكتبة webpack ، على الرغم من ذلك. كنا في حاجة إليها لاستخدام DefinePlugin .

أواجه نفس المشكلة حول DefinePlugin ، لكن ملف .storybook / webpack.config.js الخاص بي لا يزال خاليًا من أي إشارات إلى DefinePlugin ، هذه المراجع موجودة فقط في webpack.config.js لمشروعي الرئيسي. لست متأكدًا من سبب وصول Storybook إلى الملف الرئيسي عندما يكون لديه ملف خاص به داخل مجلد .storybook.

لقد حاولت الترقية إلى حزمة @ storybook / رد @ alpha وأرى قائمة ضخمة من المشكلات الأخرى عند محاولة بدء تشغيل الخادم. واحدة من أكثر الأشياء إثارة للاهتمام:

ERROR in ./node_modules/@company/styled-theme/build/index.js Module build failed (from ../node_modules/babel-loader/lib/index.js): TypeError: Plugin 2 specified in "C:\\sources\\demoapp\\node_modules\\@company\\styled-theme\\.babelrc" was expected to return a function but returned "undefined" at Function.normalisePlugin (C:\sources\demoapp\node_modules\babel-core\lib\transformation\file\options\option-manager.js:148:15)

لقد تحققت من أن تبديل نفس المشروع إلى Yarn يسمح لكل شيء بالعمل دون مشاكل.

كيف يمكن للمرء أن يطبق هذا الإصلاح على مشروع Vue-CLI 3؟

@ davek1979 npm install @storybook/vue@alpha يفعل الحيلة!

بالأمس قمت بإعادة التحقق من إصلاح الخيوط ، ثم مسحت مجلد node_modules وحاولت npm install . تم إرجاع الخطأ الموجود في DefinePlugin. لقد مسحت مجلد node_modules مرة أخرى ، وقمت بتغيير الإصدار إلى @ storybook / رد @ alpha ثم أعدت إعادة تحديد npm install . هذا يفعل الحيلة. كان إصدار ألفا الذي بدا أنه يعمل بالنسبة لي هو v4.0.0-alpha.16

anujparikh @ pollen8 التي تتطلب التكوين الافتراضي الخاص بنا مباشرة تم إهماله ، يجب أن ترى رسالة إهمال عند استخدامه. الطريقة الصحيحة هي استخدام الوسيط الثالث: https://storybook.js.org/configurations/custom-webpack-config/#full -control-mode - افتراضي

Melocaster لا ، @storybook/core هي مكتبة داخلية تشاركها كتب القصص لأطر مختلفة. لا يزال يتعين عليك استخدام @storybook/react

تضمين التغريدة

واجهت مجموعة من المشكلات الجديدة التي لم نتمكن من حلها عند الترقية إلى الإصدار v4.0.0-alpha.14

هل يمكنك المحاولة مرة أخرى باستخدام 4.0.0-alpha.20 ومشاركة المشكلات التي تواجهك إن وجدت؟

تمت المحاولة باستخدام 4.0.0-alpha.20 و webpack4.10.2 ، لا يعمل DefinePlugin.

nerdmax هل يمكنك تقديم بعض الأمثلة على الاستنساخ؟ نحن نستخدم هذا البرنامج المساعد بأنفسنا ويعمل معنا

Hypnosphi شكرا لاستجابتك. أنا آسف جدًا ، لقد تحققت للتو ، إنه يعمل بشكل جيد مع 4.0.0-alpha.20 . يستخدم مشروعي مساحات عمل الغزل ويبدو أن كتاب القصة قد تم تثبيته في وحدة عقدة الجذر. بعد حذف هذا المجلد وإعادة تثبيت جميع الحزم ، فإنه يعمل.

تمكنت من الحصول على هذا العمل بعد الترقية إلى "@storybook/react": "^4.0.0-alpha.21" مع "webpack": "^4.17.2"

أواجه مشكلة مع DefinePlugin أيضًا. لقد جربت أعلاه إصلاحات ألفا الموصى بها دون حظ. أنا أتابع هذا البرنامج التعليمي خارج الصندوق: https://www.valentinog.com/blog/react-webpack-babel/ ، والذي يعمل بشكل جيد مع أحدث الإصدارات من جميع التبعيات المدرجة.

getstorybook يعمل بشكل جيد ، لكن npm run storybook يطرح الاستثناء الذي يبدو أن العديد من الآخرين قد واجهوه بشكل أو بآخر.

رد فعل مشروع @ 1.0.0 قصة قصة ج: \ عمل \ رد مشروع \
بدء كتاب القصة - ص 6006

info @ storybook / رد فعل v3.4.11
معلومات
exec: fatal: ليس مستودع git (أو أي من الأدلة الرئيسية): .git

exec: fatal: ليس مستودع git (أو أي من الأدلة الرئيسية): .git

info => تحميل مخصص .babelrc
info => تحميل تهيئة حزمة الويب المخصصة (وضع التمديد).
ج: \ عمل \ رد مشروع Projectnode_moduleswebpack \ lib \ DefinePlugin.js: 93
compiler.hooks.compilation.tap (
^

TypeError: لا يمكن قراءة الخاصية "compilation" من undefined
في DefinePlugin.apply (C: \ work \ رد فعل Projectnode_moduleswebpack \ lib \ DefinePlugin.js: 93: 18)
في Compiler.apply (C: \ work \ responseProject \ node_modules \storybook \ corenode_modules \ tapable \ lib \ Tapable.js: 375: 16)
في حزمة الويب (C: \ work \ reactionProjectnode_modules \storybook \ corenode_moduleswebpack \ libwebpack.js: 33:19)
في export.default (C: \ work \ responseProjectnode_modules \storybook \ core \ dist \ server \ middleware.js: 29:40)
في buildDev (C: \ work \ reactionProjectnode_modules \storybook \ core \ dist \ server \ build-dev.js: 163: 36)
في الكائن.(C: \ work \ reactionProjectnode_modules \storybook \ رد فعل \ dist \ server \ index.js: 23:22)
في Module._compile (module.js: 652: 30)
في Object.Module._extensions..js (module.js: 663: 10)
في Module.load (module.js: 565: 32)
في tryModuleLoad (module.js: 505: 12)
في Function.Module._load (module.js: 497: 3)
في Module.require (module.js: 596: 17)
عند الطلب (داخلي / module.js: 11:18)
في الكائن.(C: \ work \ reactionProjectnode_modules \storybook \ رد فعل \ bin \ index.js: 3: 1)
في Module._compile (module.js: 652: 30)
في Object.Module._extensions..js (module.js: 663: 10)
npm خطأ! كود ELIFECYCLE
npm خطأ! يخطئ 1
npm خطأ! [email protected] Storybook : start-storybook -p 6006
npm خطأ! حالة الخروج 1
npm خطأ!
npm خطأ! فشل في رد فعل المشروع @ 1.0.0 سيناريو كتاب القصة.
npm خطأ! ربما لا تكون هذه مشكلة في npm. من المحتمل أن يكون هناك مخرجات تسجيل إضافية أعلاه.

أود أن أجرب Storybook ، لكن يبدو أنني أحبطت من استخدام المكون الإضافي html-webpack في هذه الحالة.

تمكنت من الحصول على هذا العمل بعد الترقية إلى "@storybook/react": "^4.0.0-alpha.21" مع "webpack": "^4.17.2"

ridhoq - هل يمكنك مشاركة config.js و webpack.config.js لكتاب القصة. لدي الإصدارات نفسها ، وما زلت أتلقى الخطأ أدناه:

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12)

أيضا ، هل تستخدم npm أو الغزل؟

بالتأكيد - https://gist.github.com/ridhoq/bfeb7688994cb8fe25f481671bf4d3b4. لا أعرف مدى فائدة ذلك بالنسبة لك حيث قد تكون لدينا متطلبات بناء مختلفة. أنا أستخدم npm لهذا المشروع

واجهت نفس المشكلة بعد ترقية create-react-app إلى 2.0.3 وتم حل هذه المشكلة عن طريق ترقية @storybook/react إلى ^4.0.0-alpha.21 .

لقد أنشأت نسخة صالحة للعمل مع الإصدارات (الأحدث) التالية:

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

أضاف بعض الإضافات أيضًا ، آمل أن يساعد هذا المثال شخصًا ما.

e ../ node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js: 15) at __webpack_require__ (bootstrap: 724) at fn (bootstrap: 101) at Module ../ node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styleled-base.browser.esm.js: 1) في __webpack_require__ (التمهيد: 724) في fn (التمهيد: 101) في الوحدة النمطية. ./node_modules/@emotion/styled/dist/styled.esm.js (style.esm.js: 1) في __webpack_require__ (التمهيد: 724) في fn (bootstrap: 101) في Object ../ node_modules / @ storybook / المكونات

@ استرخاء - الطماطم هل حل هذا؟ لدي نفس المشكلة. شكرا

لقد أنشأت نسخة صالحة للعمل مع الإصدارات (الأحدث) التالية:

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

أضاف بعض الإضافات أيضًا ، آمل أن يساعد هذا المثال شخصًا ما.

شكرا ، هذه الحيلة بالنسبة لي. ولكن كان علي أيضًا تثبيت babel-core و babel-loader .

لقد أنشأت نسخة صالحة للعمل مع الإصدارات (الأحدث) التالية:

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

أضاف بعض الإضافات أيضًا ، آمل أن يساعد هذا المثال شخصًا ما.

شكرا ، هذه الحيلة بالنسبة لي. ولكن كان علي أيضًا تثبيت babel-core و babel-loader .

كذلك هنا. اضطررت إلى استخدام إصدارات babel core & loader التالية:

"babel-core": "^6.26.3",
"babel-loader": "^7.0.4",

واجهت هذه المشكلة عن طريق الخطأ عندما قمت بالترقية إلى أحدث حزمة ويب. الإصدار 4.20.2 يعمل بشكل جيد.

"@babel/cli": "7.1.2", // babel 7
"webpack": "4.20.2", // webpack 4
"@storybook/react": "^3.4.11", // storybook 3

حصلت على الخطأ أيضا. تثبيت webpack 4.20.2 يدويًا كما هو مذكور أعلاه يفي بالغرض في الوقت الحالي.