प्रतिक्रिया और टाइपस्क्रिप्ट घटक पुस्तकालय शुरू करना

मेरे अधिकांश काम, मैं बैकएंड लिखता हूं, लेकिन दूसरे दिन रिएक्ट पर घटकों के एक पुस्तकालय को शुरू करने का काम था। कुछ साल पहले, जब रिएक्ट संस्करण फ्रंट-एंड डेवलपमेंट में मेरे अनुभव जितना छोटा था, मैंने पहले ही प्रोजेक्टाइल के लिए एक दृष्टिकोण लिया और यह अनाड़ी और अनाड़ी निकला। वर्तमान रिएक्ट इकोसिस्टम की परिपक्वता और मेरे बढ़ते अनुभव को ध्यान में रखते हुए, मुझे इस बार सब कुछ अच्छी तरह से और आसानी से करने के लिए प्रेरित किया गया। नतीजतन, मेरे पास भविष्य के पुस्तकालय के लिए एक रिक्त स्थान था, और कुछ भी नहीं भूलने और एक जगह पर सब कुछ इकट्ठा करने के लिए, यह धोखा पत्र लेख लिखा गया था, जो उन लोगों की भी मदद करना चाहिए जो नहीं जानते कि कहां से शुरू करें। आइए देखें कि मैंने क्या किया।

TL / DR: रेडी-टू-स्टार्ट लाइब्रेरी के लिए कोड को जीथब पर देखा जा सकता है

समस्या को दो पक्षों से संपर्क किया जा सकता है:

1. रेडी-मेड स्टार्टर-किट, बॉयलरप्लेट या क्ली जनरेटर का पता लगाएं
2. सब कुछ खुद ही इकट्ठा करो

पहली विधि एक त्वरित शुरुआत के लिए अच्छा है, जब आप बिल्कुल आवश्यक संकुल को कॉन्फ़िगर करने और कनेक्ट करने से निपटना नहीं चाहते हैं। इसके अलावा, यह विकल्प उन शुरुआती लोगों के लिए उपयुक्त है जो यह नहीं जानते कि कहां से शुरू करें और पुस्तकालय और नियमित आवेदन के बीच क्या अंतर होना चाहिए।

सबसे पहले मैं पहले रास्ते पर गया, लेकिन फिर मैंने निर्भरता को अपडेट करने और एक जोड़े को और अधिक पैकेज देने का फैसला किया, और फिर सभी प्रकार की त्रुटियों और विसंगतियों की बारिश हुई। नतीजतन, उसने अपनी आस्तीनें उतारीं और खुद सब कुछ किया। लेकिन मैं लाइब्रेरी जनरेटर का उल्लेख करूंगा।

प्रतिक्रिया पुस्तकालय बनाएँ

अधिकांश डेवलपर्स जो रिएक्ट से निपटते हैं, उन्होंने एक सुविधाजनक रिएक्ट एप्लिकेशन स्टार्टर के बारे में सुना है जो आपको प्रोजेक्ट कॉन्फ़िगरेशन को कम करने की अनुमति देता है और उचित चूक प्रदान करता है - क्रिएट रिएक्ट ऐप (सीआरए)। सिद्धांत रूप में, यह पुस्तकालय के लिए इस्तेमाल किया जा सकता है ( हैबे पर एक लेख है )। हालांकि, यूआई-किट के विकास के लिए परियोजना की संरचना और दृष्टिकोण सामान्य एसपीए से थोड़ा अलग है। हमें घटक स्रोतों (src), उनके विकास और डिबगिंग (उदाहरण), एक प्रलेखन और प्रदर्शन उपकरण ("शोकेस") के लिए एक सैंडबॉक्स, और निर्यात के लिए तैयार फ़ाइलों के साथ एक अलग निर्देशिका के साथ एक अलग निर्देशिका की आवश्यकता है। इसके अलावा, लाइब्रेरी घटकों को एसपीए एप्लिकेशन में नहीं जोड़ा जाएगा, लेकिन एक इंडेक्स फ़ाइल के माध्यम से निर्यात किया जाएगा। इसके बारे में सोचते हुए, मैंने खोज की और जल्दी से एक समान सीआरए पैकेज - क्रिएशन रिएक्ट लाइब्रेरी (सीआरएल) की खोज की।

CRL, CRA की तरह, एक आसानी से उपयोग होने वाली सीएलआई उपयोगिता है। इसका उपयोग करके, आप एक परियोजना उत्पन्न कर सकते हैं। इसमें शामिल होगा:

• CJs और तों मॉड्यूल बनाने के लिए रोलअप को कॉन्फ़िगर किया गया और css मॉड्यूल के समर्थन के साथ एक स्रोत का नक्शा
• ES5 में वाष्पोत्सर्जन के लिए बैबल
• परीक्षण के लिए जेस्ट
• एक विकल्प के रूप में टाइपस्क्रिप्ट (टीएस) जिसका हम उपयोग करना चाहते हैं

पुस्तकालय परियोजना को उत्पन्न करने के लिए, हम इसे कर सकते हैं ( npx हमें विश्व स्तर पर पैकेज स्थापित करने की अनुमति नहीं देता है):

npx create-react-library 

और उपयोगिता के परिणामस्वरूप, हमें घटक पुस्तकालय की एक उत्पन्न और तैयार-टू-वर्क परियोजना मिलती है।

 npx npm-check -u 

tsdx

उपयोगकर्ता स्टेनएगो के लिए धन्यवाद, जिन्होंने क्रिएक्ट लाइब्रेरी - tsdx बनाने के लिए एक उत्कृष्ट विकल्प के बारे में बात की। यह क्ली-यूटिलिटी भी CRA के समान है और एक कमांड में आपके लाइब्रेरी को कॉन्फ़िगर किए गए रोलअप, TS, Prettier, husky, Jest और React के साथ आधार बनाएगा। और रिएक्ट एक विकल्प के रूप में आता है। करने के लिए पर्याप्त सरल:

 npx tsdx create mytslib 

और परिणामस्वरूप, संकुल के आवश्यक नए संस्करण स्थापित किए जाएंगे और सभी सेटिंग्स बनाई जाएंगी। CRL जैसी परियोजना प्राप्त करें। CRL से मुख्य अंतर शून्य-कॉन्फ़िगरेशन है। यही है, रोलअप कॉन्फिगरेशन हमसे tsdx में छिपा हुआ है (जैसे CRA करता है)।

दस्तावेज़ीकरण के माध्यम से जल्दी से चलने के बाद, मुझे बेहतर कॉन्फ़िगरेशन के लिए अनुशंसित तरीके या कुछ और जैसे कि सीआरए में बेदखल नहीं किया गया। परियोजना के मुद्दे को देखने के बाद, मैंने पाया कि अब तक ऐसी कोई संभावना नहीं है । कुछ परियोजनाओं के लिए, यह महत्वपूर्ण हो सकता है, इस मामले में आपको अपने हाथों से थोड़ा काम करना होगा। यदि आपको इसकी आवश्यकता नहीं है, तो tsdx जल्दी से आरंभ करने का एक शानदार तरीका है।

अपने हाथों में नियंत्रण रखना

लेकिन क्या होगा अगर आप दूसरे तरीके से जाते हैं और अपने आप को सब कुछ इकट्ठा करते हैं? तो, चलो शुरू से शुरू करते हैं। npm init चलाएं और लाइब्रेरी के लिए package.json उत्पन्न करें। वहां हमारे पैकेज के बारे में कुछ जानकारी जोड़ें। उदाहरण के लिए, हम engines क्षेत्र में नोड और एनपीएम के लिए न्यूनतम संस्करण लिखते हैं। एकत्रित और निर्यात की गई फ़ाइलों को dist डायरेक्टरी में रखा जाएगा। हम इसे files फील्ड में दर्शाते हैं। हम प्रतिक्रिया घटकों की एक लाइब्रेरी बना रहे हैं, इसलिए हम उम्मीद कर रहे हैं कि उपयोगकर्ताओं के पास आवश्यक पैकेज होंगे - हम peerDependencies react-dom peerDependencies क्षेत्र में react और react-dom peerDependencies न्यूनतम आवश्यक संस्करण peerDependencies ।

अब react और react-dom पैकेज और आवश्यक प्रकार (चूंकि हम टाइपस्क्रिप्ट पर घटक देख रहे होंगे) को devD dependencies (इस लेख के सभी पैकेजों की तरह) में स्थापित करें:

 npm install --save-dev react react-dom @types/react @types/react-dom 

टाइपस्क्रिप्ट स्थापित करें:

 npm install --save-dev typescript 

मुख्य कोड और परीक्षण के लिए विन्यास फाइल बनाते हैं: tsconfig.json और tsconfig.test.json । हमारा target es5 में होगा, हम sourceMap आदि उत्पन्न करेंगे। प्रलेखन में संभावित विकल्पों और उनके अर्थों की पूरी सूची मिल सकती है। स्रोत निर्देशिका को include करने include करना न भूलें, और node_modules और node_modules निर्देशिकाओं को exclude । typings में package.json हम typings फ़ील्ड में इंगित करते हैं कि हमारी लाइब्रेरी के लिए प्रकार कहाँ प्राप्त करें - dist/index ।

लायब्रेरी के स्रोत घटकों के लिए src निर्देशिका बनाएँ। सभी प्रकार की छोटी चीजों को जोड़ें, जैसे .editorconfig , .editorconfig , एक लाइसेंस वाली फाइल और README.md ।

रोलअप

हम सीआरएल द्वारा सुझाए गए अनुसार, विधानसभा के लिए रोलअप का उपयोग करेंगे। आवश्यक संकुल और विन्यास, मैंने CRL पर भी जासूसी की। सामान्य तौर पर, मैंने राय सुनी कि रोलअप पुस्तकालयों के लिए अच्छा है, और अनुप्रयोगों के लिए वेबपैक। हालाँकि, मैंने वेबपैक (मेरे लिए CRA क्या करता है) कॉन्फ़िगर नहीं किया, लेकिन रोलअप वास्तव में अच्छा, सरल और सुंदर है।

इंस्टॉल करना:

 npm install --save-dev rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-typescript2 rollup-plugin-url @svgr/rollup 

Package.json में , संग्रहित पुस्तकालय बंडलों के वितरण के साथ खेतों को जोड़ें, क्योंकि rollup हमारे लिए सिफारिश करता है - pkgandode :

  "main": "dist/index.js", "module": "dist/index.es.js", "jsnext:main": "dist/index.es.js" 

 import typescript from 'rollup-plugin-typescript2'; import commonjs from 'rollup-plugin-commonjs'; import external from 'rollup-plugin-peer-deps-external'; import postcss from 'rollup-plugin-postcss'; import resolve from 'rollup-plugin-node-resolve'; import url from 'rollup-plugin-url'; import svgr from '@svgr/rollup'; import pkg from './package.json'; export default { input: 'src/index.tsx', output: [ { file: pkg.main, format: 'cjs', exports: 'named', sourcemap: true }, { file: pkg.module, format: 'es', exports: 'named', sourcemap: true } ], plugins: [ external(), postcss({ modules: false, extract: true, minimize: true, sourceMap: true }), url(), svgr(), resolve(), typescript({ rollupCommonJSResolveHack: true, clean: true }), commonjs() ] }; 

Config एक js फ़ाइल है, या एक निर्यात की गई वस्तु है। input क्षेत्र में, उस फ़ाइल को निर्दिष्ट करें जिसमें हमारे पुस्तकालय के लिए निर्यात पंजीकृत हैं। output - output पर हमारी अपेक्षाओं का वर्णन करता है - प्रारूप में किस मॉड्यूल को संकलित किया जाए और इसे कहां रखा जाए।

scripts package.json में एक कमांड जोड़ें package.json निर्माण ( "build": "rollup -c" ) के लिए फील्ड को देखें और विकास के दौरान वॉच-मोड में असेंबली शुरू करें ( "start": "rollup -c -w && npm run prettier-watch" ) ।

पहला घटक और निर्यात फ़ाइल

अब हम यह जांचने के लिए सबसे सरल प्रतिक्रिया घटक लिखेंगे कि हमारी विधानसभा कैसे काम करती है। पुस्तकालय में प्रत्येक घटक को मूल निर्देशिका में एक अलग निर्देशिका में रखा जाएगा - src/components/ExampleComponent । इस निर्देशिका में घटक से जुड़ी सभी फाइलें शामिल होंगी - test.tsx , css , test.tsx इत्यादि।
चलो घटक के लिए कुछ शैलियों फ़ाइल और घटक की tsx फ़ाइल बनाएँ।

 /** * @class ExampleComponent */ import * as React from 'react'; import './ExampleComponent.css'; export interface Props { /** * Simple text prop **/ text: string; } /** My First component */ export class ExampleComponent extends React.Component<Props> { render() { const { text } = this.props; return ( <div className="test"> Example Component: {text} <p>Coool!</p> </div> ); } } export default ExampleComponent; 

इसके अलावा src आपको उन प्रकारों के साथ एक फ़ाइल बनाने की आवश्यकता है जो पुस्तकालयों के लिए आम हैं, जहां सीएसएस और एसवीजी के लिए एक प्रकार घोषित किया जाएगा (सीआरएल में झाँका)।

 /** * Default CSS definition for typescript, * will be overridden with file-specific definitions by rollup */ declare module '*.css' { const content: { [className: string]: string }; export default content; } interface SvgrComponent extends React.FunctionComponent<React.SVGAttributes<SVGElement>> {} declare module '*.svg' { const svgUrl: string; const svgComponent: SvgrComponent; export default svgUrl; export { svgComponent as ReactComponent }; } 

सभी निर्यात किए गए घटक और सीएसएस को निर्यात फ़ाइल में निर्दिष्ट किया जाना चाहिए। हमारे पास है - src/index.tsx । यदि परियोजना में कुछ सीएसएस का उपयोग नहीं किया गया है और इसे src/index.tsx में आयात किए गए लोगों के हिस्से के रूप में सूचीबद्ध नहीं किया गया है, तो इसे विधानसभा से बाहर फेंक दिया जाएगा, जो ठीक है।

 import { ExampleComponent, Props } from './ExampleComponent'; import './export.css'; export { ExampleComponent, Props }; 

अब आप लाइब्रेरी बनाने की कोशिश कर सकते हैं - npm run build । नतीजतन, rollup हमारी लाइब्रेरी को बंडलों में शुरू करता है और इकट्ठा करता है, जिसे हम dist निर्देशिका में पाएंगे।

अगला, हम अपनी विकास प्रक्रिया की गुणवत्ता और उसके परिणाम को बेहतर बनाने के लिए कुछ उपकरण जोड़ते हैं।

Prettier के साथ कोड स्वरूपण को भूल जाना

मैं एक कोड-समीक्षा में घृणा करता हूं कि किसी प्रोजेक्ट के लिए लापरवाह या गैर-मानक स्वरूपण इंगित करें, और इसके बारे में और भी अधिक बहस करें। इस तरह की खामियां स्वाभाविक रूप से तय की जानी चाहिए, लेकिन डेवलपर्स को इस बात पर ध्यान देना चाहिए कि कोड क्या और कैसे करता है, बजाय इसके कि यह कैसा दिखता है। ये सुधार स्वचालन के लिए पहले उम्मीदवार हैं। इस कार्य के लिए एक अद्भुत पैकेज है - प्रेटियर । इसे स्थापित करें:

 npm install --save-dev prettier 

स्वरूपण नियमों के थोड़ा शोधन के लिए एक विन्यास जोड़ें।

 { "tabWidth": 3, "singleQuote": true, "jsxBracketSameLine": true, "arrowParens": "always", "printWidth": 100, "semi": true, "bracketSpacing": true } 

प्रलेखन में उपलब्ध नियमों का अर्थ देखें। कॉन्फ़िगरेशन फ़ाइल बनाने के बाद WebStrom खुद को IDE के माध्यम से स्वरूपण शुरू करते समय प्रीटियर का उपयोग करने का सुझाव देगा। समय बर्बाद करने से प्रारूपण को रोकने के लिए, /node_modules और /node_modules निर्देशिका को .prettierignore फ़ाइल का उपयोग करके अपवादों में .prettierignore (प्रारूप .prettierignore समान है)। अब आप स्रोत कोड में फ़ॉर्मेटिंग नियम लागू करके prettier चला सकते हैं:

 prettier --write "**/*" 

आदेश को अपने हाथों से हर बार स्पष्ट रूप से चलाने के लिए नहीं और यह सुनिश्चित करने के लिए कि अन्य परियोजना डेवलपर्स का कोड भी पूर्व स्वरूपित होगा, precommit-hook पर precommit-hook रन को staged ( precommit-hook git add माध्यम से) के रूप में चिह्नित फ़ाइलों के लिए git add । इस तरह की चीज के लिए हमें दो साधनों की जरूरत होती है। सबसे पहले, यह हस्की है , जो किसी भी आदेश को लागू करने, धक्का देने, आदि से पहले निष्पादित करने के लिए जिम्मेदार है। और दूसरी बात, यह लिंट-स्टेज्ड है , जो staged फाइल्स पर अलग-अलग लिंटर चला सकती है। हमें इन पैकेजों को देने के लिए केवल एक लाइन निष्पादित करने और लॉन्च कमांड को package.json जोड़ने की आवश्यकता है:

 npx mrm lint-staged 

हम कमिट करने से पहले फॉर्मेट करने का इंतजार नहीं कर सकते, लेकिन यह सुनिश्चित कर लें कि prettier लगातार हमारे काम की प्रक्रिया में संशोधित फाइलों पर काम करता है। हां, हमें एक और पैकेज की आवश्यकता है - ऑनचेंज । यह आपको प्रोजेक्ट में फ़ाइलों के परिवर्तनों की निगरानी करने और उनके लिए आवश्यक कमांड को तुरंत निष्पादित करने की अनुमति देता है। सेट करें:

 npm install --save-dev --save-exact onchange 

फिर हम package.json में scripts फ़ील्ड कमांड में जोड़ते हैं। package.json :

 "prettier-watch": "onchange 'src/**/*' -- prettier --write {{changed}}" 

इस पर, परियोजना में प्रारूपण के बारे में सभी विवादों को बंद माना जा सकता है।

ESLint के साथ त्रुटियों से बचना

ESLint एक मानक बन गया है और लगभग सभी js और ts परियोजनाओं में पाया जा सकता है। वह हमारी भी मदद करेगा। ESLint कॉन्फ़िगरेशन में, मुझे CRA पर भरोसा है, इसलिए बस CRA से आवश्यक पैकेज लें और इसे हमारी लाइब्रेरी में प्लग करें। इसके अलावा, टीएस और ESLint लिए कॉन्फ़िगरेशन जोड़ें ( ESLint और ESLint बीच संघर्ष से बचने के लिए):

 npm install --save-dev eslint eslint-config-react-app eslint-loader eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-eslint eslint-config-prettier eslint-plugin-prettier 

ESLint फ़ाइल का उपयोग करके ESLint करें।

 { "extends": [ "plugin:@typescript-eslint/recommended", "react-app", "prettier", "prettier/@typescript-eslint" ], "plugins": [ "@typescript-eslint", "react" ], "rules": { "@typescript-eslint/no-empty-interface": "off", "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/explicit-member-accessibility": "off" } } 

कमांड lint - eslint src/**/* --ext .ts,.tsx --fix को package.json से scripts फ़ील्ड में जोड़ें। अब आप npm रन लिंट के माध्यम से एस्लिंट चला सकते हैं।

जेस्ट के साथ परीक्षण

पुस्तकालय घटकों के लिए इकाई परीक्षण लिखने के लिए, फेसबुक से जेस्ट , एक परीक्षण पुस्तकालय को स्थापित और कॉन्फ़िगर करें। हालाँकि, तब से हम TS को बेबेल 7 के माध्यम से नहीं, बल्कि tsc के माध्यम से संकलित करते हैं, फिर हमें ts-jest पैकेज भी स्थापित करने की आवश्यकता है:

 npm install --save-dev jest ts-jest @types/jest 

सीएसएस या अन्य फ़ाइलों के आयात को अच्छी तरह से स्वीकार करने के लिए जेस्ट के लिए, आपको उन्हें मोकामी के साथ बदलने की आवश्यकता है। __mocks__ निर्देशिका बनाएं और वहां दो फाइलें बनाएं।
styleMock.ts :

 module.exports = {}; 

fileMock.ts :

 module.exports = 'test-file-stub'; 

अब jest config बनाएं।

 module.exports = { preset: 'ts-jest', testEnvironment: 'node', moduleNameMapper: { '\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.ts', '\\.(gif|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.ts' } }; 

हम इसके ExampleComponent में हमारे ExampleComponent लिए सबसे सरल परीक्षण ExampleComponent ।

 import { ExampleComponent } from './ExampleComponent'; describe('ExampleComponent', () => { it('is truthy', () => { expect(ExampleComponent).toBeTruthy(); }); }); 

package.json की scripts फ़ील्ड में test - npm run lint && jest कमांड जोड़ें। विश्वसनीयता के लिए, हम लिंटर को भी चलाएंगे। अब आप हमारे परीक्षण चला सकते हैं और सुनिश्चित कर सकते हैं कि वे पास हों - npm run test । और ताकि परीक्षण असेंबली के दौरान ['src/**/*.test.(tsx|ts)'] , Rollup कॉन्फिग प्लगइन में exclude फ़ील्ड को exclude फ़ील्ड में जोड़ें - ['src/**/*.test.(tsx|ts)'] । lint-staged - "pre-commit": "npm run test && lint-staged" चलाने से पहले husky pre-commit hook में रनिंग टेस्ट निर्दिष्ट करें "pre-commit": "npm run test && lint-staged" ।

स्टोरीबुक के साथ घटकों को डिजाइन करना, दस्तावेज बनाना और उन्हें निहारना

प्रत्येक पुस्तकालय को अपने सफल और उत्पादक उपयोग के लिए अच्छे प्रलेखन की आवश्यकता होती है। इंटरफ़ेस घटकों के पुस्तकालय के लिए, न केवल मैं उनके बारे में पढ़ना चाहता हूं, बल्कि यह भी देखना चाहता हूं कि वे कैसे दिखते हैं, और उन्हें छूने और बदलने के लिए सबसे अच्छा है। इस तरह की विशलिस्ट का समर्थन करने के लिए, कई समाधान हैं। मैं एक स्टाइलगिस्ट का उपयोग करता था । यह पैकेज आपको मार्कडाउन प्रारूप में प्रलेखन लिखने की अनुमति देता है, साथ ही इसमें वर्णित रिएक्ट घटकों के उदाहरण सम्मिलित करता है। इसके अलावा, प्रलेखन एकत्र किया जाता है और इससे एक साइट-शोकेस-कैटलॉग प्राप्त किया जाता है, जहां आप घटक पा सकते हैं, इसके बारे में दस्तावेज पढ़ सकते हैं, इसके मापदंडों के बारे में पता कर सकते हैं, और इसमें एक छड़ी भी ला सकते हैं।

हालांकि, इस बार मैंने उनके प्रतियोगी - स्टोरीबुक पर करीब से नज़र डालने का फैसला किया। आज यह अपने प्लगइन सिस्टम के साथ अधिक शक्तिशाली लगता है। इसके अलावा, यह लगातार विकसित हो रहा है, इसमें एक बड़ा समुदाय है, और जल्द ही मार्कडाउन फ़ाइलों का उपयोग करके इसके दस्तावेज़ीकरण पेज बनाना भी शुरू कर देगा। स्टोरीबुक का एक अन्य लाभ यह है कि यह सैंडबॉक्स है - पृथक घटक विकास के लिए एक वातावरण। इसका मतलब यह है कि हमें घटक विकास के लिए किसी भी पूर्ण नमूना अनुप्रयोगों की आवश्यकता नहीं है (जैसा कि सीआरएल का सुझाव है)। स्टोरीबुक में हम stories लिखते stories - ts-files जिसमें हम अपने घटकों को कुछ इनपुट props के साथ विशेष कार्यों में स्थानांतरित करते हैं (इसे स्पष्ट करने के लिए कोड को देखना बेहतर है)। नतीजतन, इन stories से एक शोकेस एप्लिकेशन को इकट्ठा किया जाता है।

कहानी को आरंभ करने वाली स्क्रिप्ट को चलाएँ:

 npx -p @storybook/cli sb init 

अब टीएस से दोस्ती करें। ऐसा करने के लिए, हमें कुछ और पैकेजों की आवश्यकता है, और एक ही समय में हम कुछ उपयोगी ऐड-ऑन डालेंगे:

 npm install --save-dev awesome-typescript-loader @types/storybook__react @storybook/addon-info react-docgen-typescript-loader @storybook/addon-actions @storybook/addon-knobs @types/storybook__addon-info @types/storybook__addon-knobs webpack-blocks 

स्क्रिप्ट ने storybook कॉन्फ़िगरेशन के साथ एक निर्देशिका बनाई - .storybook और एक उदाहरण निर्देशिका जिसे हम बेरहमी से हटाते हैं। और कॉन्फ़िगरेशन डायरेक्टरी में हम एक्सटेंशन addons और config को ts बदलते हैं। हम addons.ts फ़ाइल में addons जोड़ते हैं:

 import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; import '@storybook/addon-knobs/register'; 

अब, आपको .storybook निर्देशिका में .storybook का उपयोग करके स्टोरीबुक की मदद करने की आवश्यकता है।

 module.exports = ({ config }) => { config.module.rules.push({ test: /\.(ts|tsx)$/, use: [ { loader: require.resolve('awesome-typescript-loader') }, // Optional { loader: require.resolve('react-docgen-typescript-loader') } ] }); config.resolve.extensions.push('.ts', '.tsx'); return config; }; 

चलो हमारे सभी कहानियों में ऐड-ऑन को जोड़ने के लिए सज्जाकारों को जोड़ने के लिए config.ts थोड़ा कॉन्फ़िगर करते हैं।

 import { configure } from '@storybook/react'; import { addDecorator } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; import { withKnobs } from '@storybook/addon-knobs'; // automatically import all files ending in *.stories.tsx const req = require.context('../src', true, /\.stories\.tsx$/); function loadStories() { req.keys().forEach(req); } configure(loadStories, module); addDecorator(withInfo); addDecorator(withKnobs); 

हम अपनी पहली story घटक निर्देशिका ExampleComponent

 import * as React from 'react'; import { storiesOf } from '@storybook/react'; import { ExampleComponent } from './ExampleComponent'; import { text } from '@storybook/addon-knobs/react'; const stories = storiesOf('ExampleComponent', module); stories.add('ExampleComponent', () => <ExampleComponent text={text('text', 'Some text')} />, { info: { inline: true }, text: ` ### Notes Simple example component ### Usage ~~~js <ExampleComponent text="Some text" /> ~~~ ` }); 

अब ध्यान दें कि स्टोरीबुक इनिशियलाइज़ेशन स्क्रिप्ट ने स्टोरीबुक कमांड को हमारे package.json जोड़ा है। npm run storybook चलाने के लिए इसका उपयोग करें। स्टोरीबुक http://localhost:6006 पर इकट्ठा और चलेगी। Rollup कॉन्फ़िगरेशन में typescript मॉड्यूल के अपवाद को जोड़ना न भूलें - 'src/**/*.stories.tsx' ।

हम विकास कर रहे हैं

इसलिए, कई सुविधाजनक उपकरणों के साथ खुद को घेरने और उन्हें काम के लिए तैयार करने से, आप नए घटकों को विकसित करना शुरू कर सकते हैं। प्रत्येक घटक को अपनी निर्देशिका में src/components के नाम के साथ रखा जाएगा। इसमें इससे जुड़ी सभी फाइलें शामिल होंगी - css, घटक ही tsx फाइल, परीक्षण, कहानियां। हम स्टोरीबुक शुरू करते हैं, घटक के लिए कहानियां बनाते हैं, और वहां हम इसके लिए दस्तावेज लिखते हैं। हम परीक्षण और परीक्षण बनाते हैं। तैयार घटक का आयात-निर्यात index.ts में लिखा गया है।

इसके अलावा, आप npm लॉग इन कर सकते हैं और अपनी लाइब्रेरी को नए npm पैकेज के रूप में प्रकाशित कर सकते हैं। और आप इसे सीधे मास्टर और अन्य शाखाओं से गिट रिपॉजिटरी से जोड़ सकते हैं। उदाहरण के लिए, मेरी वर्कपीस के लिए, आप यह कर सकते हैं:

 npm i -s git+https://github.com/jmorozov/react-library-example.git 

इसलिए कि node_modules डायरेक्टरी में लाइब्रेरी कंज्यूमर एप्लीकेशन में node_modules में node_modules डायरेक्टरी की केवल सामग्री होती है, आपको scripts फ़ील्ड में "prepare": "npm run build" कमांड "prepare": "npm run build" को जोड़ना होगा।

इसके अलावा, टीएस के लिए धन्यवाद, आईडीई में ऑटो-पूरा काम करेगा।

संक्षेप में देना

2019 के मध्य में, आप सुविधाजनक विकास साधनों का उपयोग करके रिएक्ट और टाइपस्क्रिप्ट पर घटकों के अपने पुस्तकालय को विकसित करना शुरू कर सकते हैं। यह परिणाम एक स्वचालित उपयोगिता, और मैनुअल मोड की सहायता से प्राप्त किया जा सकता है। यदि आपको वर्तमान पैकेज और अधिक नियंत्रण की आवश्यकता है, तो दूसरा तरीका पसंद किया जाता है। मुख्य बात यह जानना है कि कहां खोदना है, और इस लेख में एक उदाहरण की मदद से, मुझे उम्मीद है कि यह कुछ आसान हो गया है।

आप यहां परिणामी वर्कपीस भी ले सकते हैं ।

अन्य बातों के अलावा, मैं परम सत्य होने का दिखावा नहीं करता हूं और सामान्य तौर पर, आगे के अंत के रूप में व्यस्त रहता हूं। आप वैकल्पिक पैकेज और कॉन्फ़िगरेशन विकल्प चुन सकते हैं और अपने घटक पुस्तकालय बनाने में भी सफल हो सकते हैं। मुझे खुशी होगी अगर आप अपनी रेसिपी कमेंट में शेयर करेंगे। हैप्पी कोडिंग!