Webpack → Vite: Storybook के bundler migration

 (medium.com/@hong009319)
3 पॉइंट द्वारा tk1583 2024-04-07 | 1 टिप्पणियां | WhatsApp पर शेयर करें

Storybook bundler को Webpack से Vite पर migrate किया गया। इस प्रक्रिया में कई issues लगातार सामने आए और नतीजतन मौजूदा tech stack को बदलना पड़ा।

Tech stack में बदलाव

• [पहले का tech stack] Storybook v6.5, builder-webpack5, Node v18, Yarn 1
• [अंतिम tech stack] Storybook v7, react-vite, Node v18, Pnpm

Migration के दौरान आए issues

1. Webpack 4 और OpenSSL 3 version compatibility issue

  • Issue का विवरण

    • builder-webpack5 से builder-vite पर migrate करने की प्रक्रिया में OpenSSL version compatibility issue हुआ
    • Webpack 5.61.0 से पुराने versions पुराने OpenSSL का उपयोग करते हैं, और उसके बाद वाले versions OpenSSL 3 का उपयोग करते हैं
    • Storybook v6 default builder के रूप में Webpack 4 का उपयोग करता है, और Webpack 5 को optional रूप में प्रदान करता है
    • उस समय Webpack 5 चुना गया था, और Webpack ^5.9.0 का उपयोग करने वाले builder-webpack5 के कारण OpenSSL error नहीं हुआ
    • Migrate किया गया builder-vite, Vite से build करने के बावजूद, Storybook v6 में default builder के रूप में Webpack 4 का उपयोग करता है, इसलिए OpenSSL version compatibility issue हुआ

  • समाधान: Storybook v7 पर migrate करना

    • Storybook v7 में Vite का उपयोग करने पर Storybook अंदरूनी तौर पर Webpack4 का उपयोग नहीं करता, इसलिए OpenSSL error नहीं होता

2. Yarn 1 की hoisting के कारण अलग version की dependency का उपयोग

  • Issue का विवरण

    • @isaacs/cliui package में ESM format के string-width@5 और CommonJS(CJS) format के string-width@4 को string-width-cjs नाम के alias के रूप में उपयोग किया जा रहा है
    • Yarn 1 duplicate dependency packages को root node modules में hoist करता है, इसलिए package उन dependencies तक भी पहुँच सकता है जिन्हें उसने install नहीं किया
    • string-width@4 और @5 कई packages में दोहराए जाने वाले sub-dependency होने के कारण root node modules में hoist हो गए
    • string-width packages में CJS format वाला cli-table3, string-width@4 तक पहुँचने की कोशिश कर रहा था, लेकिन alias की वजह से वही version मौजूद नहीं था, इसलिए उसने ESM format वाले string-width@5 को resolve किया और module compatibility problem हुई

  • समाधान: package manager को pnpm में बदलना, जहाँ phantom dependency नहीं होती

संबंधित पढ़ाई

1 टिप्पणियां

 
tk1583 2024-04-09

प्रश्न. क्या कोई वजह थी कि आपने webpack में esbuild-loader का इस्तेमाल नहीं किया?

उत्तर.

Native ESM फ़ीचर का उपयोग करने के लिए हमने Vite का इस्तेमाल किया।

मेरी समझ के अनुसार, esbuild-loader एक loader है जो Webpack में esbuild का उपयोग करने देता है। esbuild-loader का उपयोग करने पर build speed बहुत तेज़ हो जाती है, लेकिन फिर भी bundling process से गुज़रना पड़ता है।

वहीं, Native ESM का उपयोग करने पर केवल उन्हीं modules को build करके browser तक भेजा जाता है जिनका इस्तेमाल हो रहा है, और module में बदलाव होने पर केवल बदले हुए module को ही build किया जाता है, इसलिए यह और तेज़ है।

Storybook जैसे मामलों में, जहाँ केवल specific components की request की जाती है, Native ESM का उपयोग करना बेहतर लगा, इसलिए हमने Vite का इस्तेमाल किया।