💊 👵 👩🏽‍🏫 मावेन और क्लोजर कंपाइलर का उपयोग करके एक जावास्क्रिप्ट परियोजना का संकलन 🐙 🚃 👊

शुभ दोपहर, साथियों!

मैं अपाचे मावेन का उपयोग करके Google क्लोजर कंपाइलर और Google क्लोजर लाइब्रेरी का उपयोग करके प्रोजेक्ट की जावास्क्रिप्ट असेंबली प्रक्रिया के स्वचालन के क्षेत्र में अपनी उपलब्धियों को साझा करना चाहता था। परियोजना पृष्ठ https://github.com/urmuzov/closure-maven , परियोजना के प्रत्येक घटक के लिए प्रलेखन भी है।

परियोजना के बारे में

परियोजना का मुख्य घटक आर्कषक है। चापलूसी परियोजना के अन्य सभी घटकों को जोड़ती है, जो यदि वांछित है, तो इसे अलग से इस्तेमाल किया जा सकता है।

विकास के दौरान सबसे आम कार्यों को हल करने के लिए आर्कटाइप उपकरण प्रदान करता है:

वितरण के लिए मावेन कलाकृतियों में पैक्स जावास्क्रिप्ट कोड (ऐसी कलाकृतियों में क्लोजर-पैकेज नामक एक विशेष संरचना के चिह्नित पैकेज शामिल हैं);
संकलन के लिए <dependencies> में शामिल कलाकृतियों से अनपैक क्लोजर-पैकेज;
जावा और wro4j के लिए वेब रिसोर्स ऑप्टिमाइज़र का उपयोग करके js और css फ़ाइलों के संयोजन और अनुकूलन में मदद करता है;
विभिन्न प्रयोजनों के लिए 5 संकलन प्रोफाइल प्रदान करता है:
- compiled - परियोजना के "मुकाबला" विधानसभा के लिए। संकलन स्तर ADVANCED_OPTIMIZATIONS ;
- merged - एक में सभी स्रोत जेएस फ़ाइलों gluing के लिए, व्यावहारिक रूप से संकलन के बिना। संकलन स्तर WHITESPACE_ONLY , स्वरूपण PRETTY_PRINT ;
- sources - ब्राउज़र में जावास्क्रिप्ट फ़ाइलों को डीबग करने के लिए। compiled प्रोफ़ाइल के अनुसार संकलन होता है, लेकिन HTML में स्रोत कोड फ़ाइलों को शामिल किया जाएगा;
- sources-no-compile - डीबगिंग html / सीएसएस फ़ाइलों के लिए। संकलन नहीं होता है, बस स्रोत फ़ाइलें html में जुड़ी हुई हैं;
- jar - वितरण के लिए जार संग्रह बनाने के लिए;
mvn site चलाते समय jsdoc और jslint रिपोर्ट तैयार करता है।

sources और sources-no-compile प्रोफाइल के लिए एक सीमा है, वे काम करेंगे यदि सिस्टम पर अजगर स्थापित है। यह सीमा depswriter.py स्क्रिप्ट के निष्पादन के साथ जुड़ी हुई है, जो deps.js फ़ाइल बनाती है, जो क्लोजर लाइब्रेरी के काम करने के लिए आवश्यक है। यहाँ और अधिक पढ़ें।

परियोजना निर्माण

इस अभिलेख का उपयोग करके एक परियोजना बनाना बहुत सरल है, बस कमांड चलाएं (आपको संस्करण 3 की आवश्यकता है):

 mvn -DarchetypeRepository=http://urmuzov.github.com/maven-repository/releases/ \ -DarchetypeGroupId=com.github.urmuzov \ -DarchetypeArtifactId=closure-package-maven-archetype \ -DarchetypeVersion=1.0.2 \ -DgroupId=my.test.group \ -DartifactId=test-artifact \ -Dversion=1.0.0-SNAPSHOT \ -Dpackage=my.test.pkg \ archetype:generate

इस आदेश के com.github.urmuzov:closure-package-maven-archetype:1.0.2 , आप com.github.urmuzov:closure-package-maven-archetype:1.0.2 archetype के आधार पर प्रोजेक्ट तैयार करने के लिए com.github.urmuzov:closure-package-maven-archetype:1.0.2 को com.github.urmuzov:closure-package-maven-archetype:1.0.2 रिपॉजिटरी में स्थित urmuzov.github.com/maven-repository/releases urmuzov.github.com/maven-repository/releases जबकि आपकी परियोजना का समूह, विरूपण साक्ष्य और संस्करण क्रमशः my.test.group , test-artifact और 1.0.0-SNAPSHOT होंगे, आपकी परियोजना का मुख्य पैकेज my.test.pkg होगा।

मावेन निर्देशिकाओं और फाइलों के इस पदानुक्रम को उत्पन्न करेगा: ( // )

 ~$ cd test-artifact/ ~/test-artifact$ tree . ├── pom.xml └── src └── main ├── python │  └── closure-library //  python    deps.js │  ... ├── resources │  ├── jquery-1.4.4.min.js │  └── my │  └── test │  └── pkg //,       │  └── javascript //  ,      js   ,     externs       │  ├── desktop.entry.js //     │  ├── mobile.entry.js //     │  └── sample //  js  │  └── sample.js //     └── webapp ├── index.html // html     desktop.entry.js ├── META-INF ├── mobile.html // html     mobile.entry.js └── WEB-INF ├── web.xml └── wro.xml //  wro 14 directories, 19 files

यह पता लगाने के लिए कि यहाँ क्या है, चलो एक परियोजना को इकट्ठा करने की कोशिश करते हैं।

प्रोजेक्ट असेंबली

प्रोजेक्ट को इकट्ठा करने के लिए, आपको निम्न कमांड चलाना होगा। compiled बजाय compiled आप किसी भी 5 प्रोफ़ाइल का उपयोग कर सकते हैं।

 ~/test-artifact$ mvn -P compiled clean install [INFO] Scanning for projects... [INFO] [INFO] ------------------------------------------------------------------------ [INFO] Building test-artifact 1.0.0-SNAPSHOT [INFO] ------------------------------------------------------------------------ ... [INFO] --- closure-package-maven-plugin:1.0.2:copy (default) @ test-artifact --- [INFO] [INFO] --- closure-compiler-maven-plugin:1.0.2:compile (compile-advanced) @ test-artifact --- [INFO] simplePasses: [desktop, mobile] [INFO] == SimplePass (/home/urmuzov/test-artifact/target/closure/javascript/desktop.entry.js -> /home/urmuzov/test-artifact/target/test-artifact/desktop.js) == [INFO] file size: desktop.js -> 1588 bytes [INFO] == SimplePass (/home/urmuzov/test-artifact/target/closure/javascript/mobile.entry.js -> /home/urmuzov/test-artifact/target/test-artifact/mobile.js) == [INFO] file size: mobile.js -> 1587 bytes ... [INFO] --- gmaven-plugin:1.0-rc-5:execute (property-setup) @ test-artifact --- [INFO] SimplePass[desktop]: For simple inclusion use ${desktop.entry.js} in your HTML file [INFO] SimplePass[mobile]: For simple inclusion use ${mobile.entry.js} in your HTML file ... [INFO] --- wro4j-maven-plugin:1.3.8:run (default) @ test-artifact --- ... [INFO] /home/urmuzov/java/target/test-artifact/target/all.js (78601bytes) has been created! ... [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------

लॉग के बड़े टुकड़े जो कि मेरे द्वारा हटाए गए चाप के दृष्टिकोण से दिलचस्प नहीं हैं।

संकलित परियोजना इस प्रकार है:

 ~/test-artifact$ cd target/test-artifact/ ~/test-artifact/target/test-artifact$ tree . ├── desktop.js //    desktop.entry.js ├── index.html // html    desktop.entry.js ├── META-INF //  META-INF   javasript     ├── mobile.html // html    mobile.entry.js ├── mobile.js //    mobile.entry.js ├── target │  └── all.js //   all  src/main/webapp/WEB-INF/wro.xml └── WEB-INF //  WEB-INF   javasript

विधानसभा संचालन

विधानसभा प्रक्रिया के दौरान, निम्नलिखित ऑपरेशन किए गए थे:

closure-package-maven-plugin ने closure-package-maven-plugin सभी प्रोजेक्ट के <dependency> को देखा, पैक्ड क्लोजर लाइब्रेरी को ढूंढा और इसे कंपाइलर के लिए एक विशेष निर्देशिका में अनपैक किया।
```
 <dependency> <groupId>com.github.urmuzov</groupId> <artifactId>closure-library-package</artifactId> <version>${closureMaven.version}</version> </dependency> 
```
closure-compiler-maven-plugin <properties>...<passes>desktop mobile</passes>...</properties> के मूल्य के आधार पर <properties>...<passes>desktop mobile</passes>...</properties> संपत्ति ने desktop.entry.js और mobile.entry.js फ़ाइलों के संकलन के दो "सरल पास" का प्रदर्शन किया mobile.entry.js उन्हें desktop.js और mobile.js में संकलित करके। आप इस पृष्ठ पर संपूर्ण के रूप में मार्ग, सेटिंग्स और प्लगइन के बारे में अधिक पढ़ सकते हैं।
gmaven-plugin का उपयोग करके, गुण HTML फ़ाइलों से त्वरित कनेक्शन के लिए उत्पन्न हुए थे, इस मामले में ${desktop.entry.js} और ${mobile.entry.js} । मैं तुरंत प्रश्न का उत्तर दूंगा, "हमें इन गुणों की आवश्यकता क्यों है?" बात यह है कि compiled या merged compiled merged प्रोफ़ाइल का उपयोग करते समय, आपको केवल एक फ़ाइल को संकलित कोड से जोड़ने की आवश्यकता है, उदाहरण के लिए:
```
 <script type="text/javascript" src="desktop.js"></script> 
```
और जब sources या sources-no-compile प्रोफाइल का उपयोग करते sources , तो आपको इस तरह से तीन फाइलें शामिल करने की आवश्यकता होती है:
```
 <script type="text/javascript" src="goog/base.js"></script> <script type="text/javascript" src="deps.js"></script> <script type="text/javascript" src="desktop.entry.js"></script> 
```
इसलिए, प्रोफ़ाइल बदलते समय HTML फ़ाइल में इन पंक्तियों को अधिलेखित / टिप्पणी नहीं करने के लिए, आप निर्माण ${output.closure.js.prefix}desktop${output.closure.js.suffix} उपयोग कर सकते हैं, जो विभिन्न प्रोफाइलों के लिए वांछित कोड में परिवर्तित हो जाता है। अधिक सुविधा के लिए, gmaven-plugin की सहायता से gmaven-plugin यह निर्माण ${desktop.entry.js} में बदल जाता है, html फ़ाइल का एक उदाहरण यहाँ देखा जा सकता है ।
Wro4j का उपयोग करते हुए, jquery-1.4.4.min.js फ़ाइल को सभी .js. में कनवर्ट किया जाता है यह ऑपरेशन, सिद्धांत रूप में, बहुत कम समझ में आता है, लेकिन अगर पुस्तकालयों के साथ कई फाइलें हैं, तो उन्हें जोड़ सकते हैं, उन्हें छोटा कर सकते हैं, और सीएसएस के लिए डेटा का उपयोग करके उनमें चित्र भी शामिल कर सकते हैं: यूआरएल।

आईडीई एकीकरण

सिद्धांत रूप में, सभी आईडीई में मावेन के साथ काम करने के लिए समान कार्यक्षमता है।

नेटबीन्स में मॉड्यूल को जल्दी से स्विच करने के लिए टूलबार में एक ड्रॉप-डाउन सूची है, सूची में प्रोफाइल स्वचालित रूप से दिखाई देते हैं:

IntelliJ में आईडिया को टूलबार में ड्रॉप-डाउन सूची से भी चुना गया है:

लेकिन मैन्युअल रूप से जोड़ा गया:

ग्रहण के लिए, मुझे लगता है कि सब कुछ उसी तरह किया जाता है।

अतिरिक्त जानकारी

सिद्धांत रूप में, यह इस पुरालेख के उपयोग को समझने के लिए पर्याप्त होना चाहिए, लेकिन अगर कुछ भी हो, तो कृपया मुझसे संपर्क करें या प्रलेखन, जो अब तक केवल रूसी में है:

परियोजना के बारे में एक पूरे के रूप में यहाँ
कंपाइलर प्लगइन के बारे में यहाँ
यहाँ के श्लोक के बारे में
संकलक से अलग कंपाइलर का उपयोग करने के उदाहरण यहां दिए गए हैं

यह भी संभव है कि कोई व्यक्ति एक से अधिक जटिल प्रोजेक्ट में उपरोक्त सभी घटनाक्रमों का उपयोग करने के मामले में इस परियोजना में रुचि रखेगा।

खैर, जैसा कि वे कहते हैं, मुझे GitHub पर कांटा!