👨🏽‍🤝‍👨🏻 ✔️ 👨🏾 ऑटो जावास्क्रिप्ट / कॉफिसस्क्रिप्ट प्रोजेक्ट का निर्माण करें 👈🏽 ♒️ 👨‍🏫

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

निम्नलिखित आवश्यकताओं को प्रोजेक्ट असेंबली कंट्रोल सिस्टम के सामने रखा गया है:

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

इस लेख में मैं परीक्षण के मुद्दे को संबोधित नहीं करूंगा, लेकिन रेक और रेक :: पाइपलाइन ( git ) का उपयोग करके परियोजना के जावास्क्रिप्ट / ताबूत विधानसभा नियंत्रण प्रणाली (और स्वयं परियोजना संरचना) के एक संस्करण पर विचार करेंगे।

रेक :: पाइपलाइन एक फाइल प्रोसेसिंग सिस्टम है। वह किसी दिए गए टेम्प्लेट के अनुसार डायरेक्टरी से फाइलें पढ़ सकता है, दिए गए नियम के अनुसार फाइल बदल सकता है और परिणाम लिख सकता है।

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

#  Assetfile #        input "app/assets/javascripts" #         output "public/javascripts" #         , #  input.          #*.js,      "app/assets/javascripts" match "*.js" do #ConcatFilter - ,      . #    *.js    app/assets/javascripts #   application.js,      #public/javascripts. filter Rake::Pipeline::ConcatFilter, "application.js" end

उदाहरण के लिए, "एप्लिकेशन" नामक एक परियोजना पर विचार करें। इस परियोजना में 3 कॉफ़ीस्क्रिप्ट फाइलें शामिल होंगी: "file1.cfish", "file2.cfish", "file3.cfish"। इस प्रकार, हम निम्नलिखित निर्देशिका संरचना प्राप्त करते हैं:

-आवेदन
--src
---file1.coffee
---file2.coffee
---file3.coffee

मान लें कि हमारे पास निम्नलिखित निर्भरताएँ हैं:
2nd, 1st और 3rd पर निर्भर करता है
1 पर 3 निर्भर है
इस प्रकार, इकट्ठे संस्करण में, फाइलों को निम्नलिखित क्रम में व्यवस्थित किया जाना चाहिए: 1-3-2।
सुविधा के लिए, मुख्य फ़ाइल "main.cfish" बनाएँ। इसमें प्रोजेक्ट में उपयोग की गई फ़ाइलों की एक सूची होगी। अब आप फाइलों में भरना शुरू कर सकते हैं:

 # main.coffee (     ): require("file1") require("file2") require("file3") # file1.coffee (    ): # ...  ... file1 = true #   # file2.coffee (  1-  3-): require("file1") require("file3") # ...  ... file2 = true #   # file3.coffee (  1-): require("file1") # ...  ... file3 = true #

इस मामले में, आवश्यकता ("फ़ाइल 1") एक छद्म फ़ंक्शन है। अधिक सटीक रूप से, यह एक टेम्पलेट है, इस तथ्य के लिए एक संकेतक है कि काम करने के लिए पहली फ़ाइल की आवश्यकता है। आप इसे कॉन्फ़िगर कर सकते हैं ताकि आवश्यकता के बजाय ("फ़ाइल 1") आपको लिखने की आवश्यकता हो:

  ! , , file1.   , .

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

हमारे मामले में, चूंकि दूसरी फ़ाइल पहले और तीसरे पर निर्भर करती है, मुख्य फ़ॉफ़ी फ़ाइल में केवल एक ही लाइन लिख सकता है: आवश्यकता ("फ़ाइल 2")। शेष फाइलें अपने आप कनेक्ट होनी चाहिए।

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

 #  Gemfile source "http://rubygems.org" gem "rake-pipeline", :git => "https://github.com/livingsocial/rake-pipeline.git" gem "rake-pipeline-web-filters", :git => "https://github.com/wycats/rake-pipeline-web-filters.git" gem "uglifier", :git => "https://github.com/lautis/uglifier.git" group :development do gem "rack" gem "github_downloads" gem "coffee-script" end

यहां रेक-पाइपलाइन-वेब-फिल्टर एक सहायक पुस्तकालय है, इसमें विशेष रूप से, कॉफ़-स्क्रिप्ट के प्रसंस्करण के लिए एक वर्ग शामिल है। uglifier जावास्क्रिप्ट को कम करने के लिए एक पुस्तकालय है।

अब एक Rakefile बनाएँ:

 #  Rakefile abort "Please use Ruby 1.9 to build application!" if RUBY_VERSION !~ /^1\.9/ require "bundler/setup" def pipeline require 'rake-pipeline' Rake::Pipeline::Project.new("Assetfile") end task :dist do puts "build application" pipeline.invoke puts "done" end task :default => :dist

यहां रेक :: पाइपलाइन :: Project.new ("एसेटफाइल") - एक नई वस्तु बनाई गई है, "एसेटफाइल" एक फाइल है जिसमें बिल्ड सेटिंग्स हैं जो हमारे पास अभी तक नहीं हैं, लेकिन अब हम इसे बनाएंगे।

तुरंत आप संकलित फ़ाइलों के लिए रूट निर्देशिका को पंजीकृत कर सकते हैं। यह मार्ग "लक्ष्य" होगा:

 #  Assetfile output "target"

हम 2 चरणों में परियोजना की असेंबली करेंगे। सबसे पहले, हम सभी कॉफ़ीस्क्रिप्ट फ़ाइलों को जावास्क्रिप्ट में संकलित करते हैं, और फिर हम प्रोजेक्ट को स्वयं संकलित करते हैं।

जावास्क्रिप्ट में संकलन

हम "लक्ष्य / src" निर्देशिका के लिए संकलित करेंगे। इसके अलावा, प्रत्येक फ़ाइल .coffe की अपनी फ़ाइल होगी .js (अर्थात, हम इस स्तर पर फ़ाइलों को मर्ज नहीं करेंगे)। ऐसा करने के लिए, "एसेटफाइल" के लिए निम्न पंक्तियाँ जोड़ें।

 #  Assetfile #      "src" input "src" do #    *.coffee (   "src") match "**/*.coffee" do require "rake-pipeline-web-filters" #       javascript filter Rake::Pipeline::Web::Filters::CoffeeScriptFilter do |filename| # ,       ( ) #  js . #         "src"  "target" #       '.coffee'  '.js' File.join("src/", filename.gsub('.coffee', '.js')) end end end

अब यदि आप रेक कमांड चलाते हैं, तो जावास्क्रिप्ट में संकलित एक परियोजना संस्करण "लक्ष्य / src / lib" निर्देशिका में बनाया जाएगा। इस स्थिति में, यदि किसी एक फ़ाइल को संकलित नहीं किया जा सकता है, तो एक त्रुटि संदेश प्रदर्शित किया जाएगा।

जावास्क्रिप्ट परियोजना बनाएँ

इस बार हम 'src / lib' डायरेक्टरी से पहले से संकलित js फ़ाइलों को पढ़ेंगे:

 #  Assetfile #   ,      name="application" #     "target/src" input "target/src" do #  main.js  match "main.js" do #   NeuterFilter. #      ,  #       . neuter( # ,   . :additional_dependencies => proc { |input| #       ,   main Dir.glob(File.join(File.dirname(input.fullpath),'**','*.js')) }, #     :path_transform => proc { |path, input| #    require("file1")   #   .    . #  require("file1")   require("file1.js") "#{path}.js" }, # ,         js- :closure_wrap => false ) do |filename| "#{name}.js" end end end

अब यदि आप रेक कमांड चलाते हैं, तो फ़ाइल 'application.js' निर्देशिका में 'src' में निम्न सामग्रियों के साथ दिखाई देती है:

 #  application.js (function() { var file1; file1 = true; }).call(this); (function() { var file3; file3 = true; }).call(this); (function() { require("file2"); }).call(this);

लेकिन एक पल रुकिए! यहां लाइन क्या कर रही है

 require("file2");

? आखिरकार, उसे गायब होना पड़ा। यह स्पष्ट रूप से एक "नपुंसक" फिल्टर त्रुटि है। आइए इस फ़िल्टर ( कोड ) के स्रोत कोड को देखें। हम यहाँ लाइन में रुचि रखते हैं:

 #  neuter_filter.rb regexp = @config[:require_regexp] || %r{^\s*require\(['"]([^'"]*)['"]\);?\s*}

जैसा कि आप देख सकते हैं, यदि पैरामीटर आवश्यक फ़ाइल के नाम के साथ पाठ की पहचान करने के लिए अपना नियम निर्दिष्ट नहीं करते हैं, तो नियमित अभिव्यक्ति डिफ़ॉल्ट रूप से उपयोग की जाती है

 %r{^\s*require\(['"]([^'"]*)['"]\);?\s*}

दुर्भाग्य से, मैं अभी भी यह नहीं समझ सका कि इस तरह की नियमित अभिव्यक्ति केवल पहली आवश्यकता की प्रक्रिया क्यों करती है, और दूसरा ध्यान नहीं देता है। मैं बहुत आभारी रहूंगा यदि आप बताएं कि मामला क्या है। मैंने इस समस्या को इस प्रकार हल किया:

 #  Assetfile input "target/src" do match "main.js" do neuter( .... :closure_wrap => false, :require_regexp => %r{^\s*require\(['"]([^'"]*)['"]\);?\s*$} ...

दिखाई देने वाले "$" चिह्न पर ध्यान दें। यही है, हमने नियमित अभिव्यक्ति को पंक्ति के अंत तक सीमित किया है। उसके बाद, संकलित फ़ाइल की तरह दिखता है:

 #  application.js (function() { var file1; file1 = true; }).call(this); (function() { var file3; file3 = true; }).call(this); (function() { var file2; file2 = true; }).call(this); (function() { }).call(this);

ठाठ (फाइलों के क्रम पर ध्यान दें)। यदि आप इस पूरी चीज़ को एक और बड़े जावास्क्रिप्ट फ़ंक्शन में लपेटना चाहते हैं (मुझे नहीं पता कि क्यों, लेकिन आप कभी नहीं जानते हैं), तो आप निम्न कार्य कर सकते हैं। अपना स्वयं का फ़िल्टर बनाएं:

 #  Assetfile class ClosureFilter < Rake::Pipeline::Filter def generate_output(inputs, output) inputs.each do |input| # output.write "(function() {\n#{input.read}\n})()" end end end

और अब यह फ़िल्टर नपुंसक फ़िल्टर लागू करने के बाद निर्दिष्ट किया जाना बाकी है

 #  Assetfile input "target/src" do match "main.js" do neuter( ............. ) do |filename| "#{name}.js" end filter ClosureFilter end end

अब सब ठीक है। यह केवल हमारे एप्लिकेशन का न्यूनतम संस्करण बनाने के लिए बना हुआ है। ऐसा करने के लिए, केवल 5 लाइनें लिखें:

 #  Assetfile input "target" do match "#{name}.js" do # uglify -    uglify{ "#{name}.min.js" } end end

अब, संकलन के दौरान, "application.js" के अलावा, एक फ़ाइल "application.min.js" सामग्री के साथ बनाई जाएगी:

 (function(){(function(){var e;e=!0}).call(this),function(){var e;e=!0}.call(this),function(){var e;e=!0}.call(this),function(){}.call(this)})();

मेरी संपत्ति का अंतिम संस्करण

 #  Assetfile require "json" require "rake-pipeline-web-filters" name="application" output "target" input "src" do match "**/*.coffee" do filter Rake::Pipeline::Web::Filters::CoffeeScriptFilter do |filename| File.join("src/", filename.gsub('.coffee', '.js')) end end end class ClosureFilter < Rake::Pipeline::Filter def generate_output(inputs, output) inputs.each do |input| output.write "(function() {\n#{input.read}\n})()" end end end input "target/src" do match "main.js" do neuter( :additional_dependencies => proc { |input| Dir.glob(File.join(File.dirname(input.fullpath),'**','*.js')) }, :path_transform => proc { |path, input| "#{path}.js" }, :closure_wrap => false, :require_regexp => %r{^\s*require\(['"]([^'"]*)['"]\);?\s*$} ) do |filename| "#{name}.js" end filter ClosureFilter end end input "target" do match "#{name}.js" do uglify{ "#{name}.min.js" } end end # vim: filetype=ruby

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

 require("dir_name/file_name")

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

यदि यह दिलचस्प है, तो मैं अगले लेख में दिखा सकता हूं कि फैंटम.जेएस (जो कंसोल से परीक्षण कर रहा है) और निर्माण चरण में टेम्पलेट फ़ाइलों को जोड़ने के लिए जावास्क्रिप्ट परीक्षण का आयोजन कैसे किया जाए।

ऑटो जावास्क्रिप्ट / कॉफिसस्क्रिप्ट प्रोजेक्ट का निर्माण करें

जावास्क्रिप्ट में संकलन

जावास्क्रिप्ट परियोजना बनाएँ

More articles: