रेल/वेबपैकर

Question

के साथ प्रतिक्रिया परीक्षण सेटअप मैंने अपने मौजूदा रेल ऐप में webpacker जोड़ा है, सब कुछ एक आकर्षण की तरह काम कर रहा है।

Webpack config

अंतर्गत पाया जाता है

config/webpack/shared.js 
config/webpack/development.js 
config/webpack/production.js 

node_modules

vendor/node_modules 

js पैक फ़ाइलों में स्थापित कर रहे हैं मैं स्थापित किया है

app/javascript/packs/application.js 

में हैं प्रतिक्रिया और एक छोटे से घटक ने लिखा है:

app/javascript/discover/example.jsx 

अब मैं एक परीक्षण परीक्षण वातावरण को स्थापित करने के तरीके के साथ संघर्ष करता हूं। आम तौर पर मैं कहूंगा कि सामान्य परीक्षण सेटअप में निम्न शामिल होना चाहिए: karma, jasmine या mocha, webpack।

कॉन्फ़िगरेशन फ़ाइलों को कहां रहना चाहिए? परीक्षण फ़ाइलों को संग्रहीत किया जाएगा और एक साथ सब कुछ बंडल करने के लिए karma.config.js बनाने के लिए।

नमूना एप्लिकेशन होना बहुत अच्छा होगा जो दिखाता है कि यह सब सही तरीके से कैसे करें, लेकिन मुझे स्पष्ट रूप से सभी चीजों को सही तरीके से प्लग करने के लिए आवश्यक कौशल की कमी है।

यह प्रश्न का उत्तर देने में आसान नहीं है, लेकिन इस तरह का एक उदाहरण एप्लिकेशन भविष्य में वेबपैकर का उपयोग करना चाहते हैं जो बहुत से लोगों के लिए बेहद उपयोगी होगा।

इस विषय पर कोई विचार के लिए धन्यवाद,
जो

कुछ उपयोगी साधन:

1. https://medium.com/@scbarrus/how-to-get-test-coverage-on-react-with-karma-babel-and-webpack-c9273d805063#.g6p5go9gd
2. http://qiita.com/kimagure/items/f2d8d53504e922fe3c5c
3. http://nicolasgallagher.com/how-to-test-react-components-karma-webpack/
4. https://www.codementor.io/reactjs/tutorial/test-reactjs-components-karma-webpack

Answer 1

नोट: प्रक्रिया मैं माध्यम से चला गया इस सवाल का जवाब देने के रूप में रेल टीम डिफ़ॉल्ट रूप से इस परियोजना के moved JavaScript dependencies back into the root है, लंबे समय तक आवश्यक नहीं है।

---

यह उत्तर दो-पैराटर है। सबसे पहले, मैं समझाऊंगा कि, कितने खून, पसीने और आँसू के बाद, मैं अपने वर्तमान वेबपैकर + रिएक्ट + जेस्ट टेस्ट पर्यावरण पर पहुंचा। दूसरा, मैं शारीरिक तरल पदार्थ के सभी व्यय क्यों करूँगा।

भाग 1: कार्यान्वयन

1. रेल। मैंने एक नई रेल ऐप जेनरेट की, उन सभी चीजों को छोड़कर जिनकी मुझे आवश्यकता नहीं है।

   rails new rails-react --skip-action-mailer --skip-active-record --skip-action-cable --skip-javascript --skip-turbolinks 
   

2. रेल 5.1 जहाजों तक, हमें वेबपैकर की आवश्यकता है।

   # Gemfile 
   gem 'webpacker', git: 'https://github.com/rails/webpacker.git' 
   

   अपने खोल में

   फिर

   $ bundle install 
   

3. Webpack सेट करें और प्रतिक्रिया Webpacker

   का उपयोग कर

   $ rails webpacker:install && rails webpacker:install:react 
   

4. स्थापित जेस्ट, और जेस्ट संबंधित संकुल

   $ bin/yarn add jest babel-jest babel-polyfill react-test-renderer --dev 
   

5. वेबपैकर के साथ अच्छा खेलने के लिए जेस्ट को कॉन्फ़िगर करें। वेबपैक के लिए जेस्ट को कॉन्फ़िगर करने पर This article बहुत उपयोगी है। दस्तावेज़ों के मुताबिक "<rootDir> एक विशेष टोकन है जो आपके प्रोजेक्ट की जड़ के साथ जेस्ट द्वारा प्रतिस्थापित किया जाता है। अधिकांश समय यह फ़ोल्डर होगा जहां आपका पैकेज.जेसन स्थित है"। महत्वपूर्ण रूप से हमारे लिए यह /vendor है और / नहीं है क्योंकि यह एक पारंपरिक जावास्क्रिप्ट प्रोजेक्ट में होगा।

   // vendor/package.json 
   "jest": { 
       // The name of this directive will soon change to "roots" 
       // https://github.com/facebook/jest/issues/2600 
       // This points Jest at Webpacker's default JS source directory 
       "testPathDirs": [ 
       "<rootDir>/../app/javascript/packs" 
       ], 
       // This ensures that node_modules are resolved properly 
       // By default, Jest looks in "/" for this, not "vendor/" 
       "moduleDirectories": [ 
       "<rootDir>/node_modules" 
       ], 
       "moduleFileExtensions": [ 
       "js", 
       "jsx" 
       ] 
   } 
   

6. बेबेल। इसने मुझे सबसे ज्यादा सिरदर्द का कारण बना दिया। बेबेल गतिशील विन्यास का समर्थन नहीं करता है (हालांकि यह currently being considered है)। इसके अतिरिक्त, बैबेल कॉन्फ़िगरेशन के लिए जिस तरह से दिखता है, वह हमारी मदद नहीं करता है। "बेबेल फ़ाइल की वर्तमान निर्देशिका में एक .babelrc की तलाश करेगा। अगर कोई अस्तित्व में नहीं है, तो यह निर्देशिका पेड़ तक यात्रा करेगा जब तक कि यह या तो" babel "के साथ .babelrc, या package.json नहीं मिलता है: {} हैश भीतर। "

   बैबेल प्रीसेट की तरह दिखता है भी भंगुर है। आप ध्यान दें कि the babel-handbook documentation for creating presets चरण "बस इसे एनपीएम पर प्रकाशित करें और आप इसका उपयोग कर सकते हैं जैसे कि आप प्रीसेट करेंगे"। यदि आप वास्तव में पारंपरिक तरीके से प्रीसेट को प्रीसेट ढूंढना चाहते हैं, तो से शुरू होने वाले नाम के साथ node_modules निर्देशिका के अंदर एक एनपीएम पैकेज का उपयोग करने का कोई विकल्प नहीं है।

   इसका मतलब है कि हमें रेल रूट में .babelrc फ़ाइल बनाने की आवश्यकता है, और फिर उस .babelrc फ़ाइल के सापेक्ष, प्रत्येक प्लगइन के लिए पूर्ण पथ का उपयोग करें, जिसे आप परिचित होंगे अगर आपने अतीत में बेबेल का उपयोग किया है (उदाहरण के लिए "presets": ["react"]node_modules/babel-preset-react को संदर्भित करता है)। मेरे .babelrc, using Webpack 2 और using babel पर जेस्ट डॉक्स निम्नलिखित इस तरह दिखता है:

   // .babelrc 
   { 
       "presets": [ 
       "./vendor/node_modules/babel-preset-react", 
       "./vendor/node_modules/babel-preset-es2015" 
       ], 
       "env": { 
       "test": { 
        "plugins": [ 
        "./vendor/node_modules/babel-plugin-transform-es2015-modules-commonjs" 
        ] 
       } 
       } 
   } 
   

   , babel-loader विन्यास के तहत options कुंजी निकालें config/webpack/shared.js में इतना है कि Webpack इस विन्यास फाइल का उपयोग करता है भी।

जो हमें वर्तमान क्षण तक लाता है। मैंने जेस्ट डॉक्स में मूल योग (वेनिला जेएस) और Link (प्रतिक्रिया) परीक्षणों को लागू किया और /vendor निर्देशिका में npm run test निष्पादित करके उन्हें चलाया। आप यहां मेरे श्रमिकों के फल देख सकते हैं: https://github.com/pstjean/webpacker-jest

भाग 2. क्यों?

अभी यह करना आसान नहीं है। यह होना चाहिए। हमारी समस्याओं की जड़ वेबपैकर द्वारा लगाई गई अपरंपरागत निर्देशिका संरचना है।

/vendor के तहत हमारे यार्न और Webpack फ़ाइलों के सभी जाने के लिए मूल तर्क है कि है, DHH के अनुसार, परियोजना जड़ में ये बातें होने के रूप में सम्मेलन "एक सुंदर तरीका एक रेल के अंतर्गत एप्लिकेशन केंद्रित जे एस साथ रहना नहीं है एप्लिकेशन "। आप इस here को लागू करने की प्रतिबद्धता पर चर्चा देख सकते हैं। इस प्रतिबद्धता पर उपयोगकर्ता lemonmade's comment हमारी वर्तमान निराशाओं की भविष्यवाणी करता है: "यह वास्तव में किसी भी जावास्क्रिप्ट टूलिंग को बेहद मुश्किल बना देगा, और एनपीएम पैकेजों का उपयोग करने वाली किसी भी अन्य परियोजना में इससे अलग व्यवहार करने का कारण बनता है।"

डाउनथ्रेड, डीएचएच का कहना है, "इनपुट की सराहना करते हैं और इसे आगे बढ़ते समय सलाह के तहत रखेंगे। यह पत्थर में स्थापित नहीं है, लेकिन अभी के लिए हम यह काम करने की कोशिश कर रहे हैं।" मेरी राय में, यह टिकाऊ नहीं है, और उम्मीद है कि रेल टीम को एहसास होगा कि कोर के साथ 5.1 लॉन्च होने से पहले। वेबपैकर प्रोजेक्ट में इस समस्या का समाधान करने के लिए वर्तमान में very promising pull request है। आइए उम्मीद करते हैं कि यह कुछ कर्षण हो जाता है!