परिचय

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

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

ब्लेज़र में C # को संकलित और निष्पादित करना

ऐसी जटिल भाषा को C # के रूप में संकलित और निष्पादित करने की प्रक्रिया एक जटिल और समय लेने वाला कार्य है। #? - यह तकनीक (या बल्कि, कोर) की क्षमताओं पर निर्भर करता है। हालांकि, माइक्रोसॉफ्ट, जैसा कि यह निकला, हमारे लिए पहले से ही सब कुछ तैयार कर चुका था।

सबसे पहले, एक ब्लेज़र एप्लिकेशन बनाएं।

उसके बाद, आपको Nuget को स्थापित करने की आवश्यकता है - C # के विश्लेषण और संकलन के लिए एक पैकेज।

 Install-Package Microsoft.CodeAnalysis.CSharp 

प्रारंभ पृष्ठ तैयार करें।

 @page "/" @inject CompileService service <h1>Compile and Run C# in Browser</h1> <div> <div class="form-group"> <label for="exampleFormControlTextarea1">C# Code</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="10" bind="@CsCode"></textarea> </div> <button type="button" class="btn btn-primary" onclick="@Run">Run</button> <div class="card"> <div class="card-body"> <pre>@ResultText</pre> </div> </div> <div class="card"> <div class="card-body"> <pre>@CompileText</pre> </div> </div> </div> @functions { string CsCode { get; set; } string ResultText { get; set; } string CompileText { get; set; } public async Task Run() { ResultText = await service.CompileAndRun(CsCode); CompileText = string.Join("\r\n", service.CompileLog); this.StateHasChanged(); } } 

सबसे पहले आपको स्ट्रिंग को एक सार वाक्यविन्यास पेड़ में पार्स करने की आवश्यकता है। चूंकि अगले चरण में हम ब्लेज़र घटकों को संकलित करेंगे - हमें LanguageVersion.Latest के नवीनतम ( LanguageVersion.Latest ) संस्करण की आवश्यकता है। इसके लिए रोज़लिन के लिए C # की एक विधि है:

 SyntaxTree syntaxTree = CSharpSyntaxTree.ParseText(code, new CSharpParseOptions(LanguageVersion.Latest)); 

पहले से ही इस स्तर पर, आप पार्सर डायग्नोस्टिक्स को पढ़कर सकल संकलन त्रुटियों का पता लगा सकते हैं।

  foreach (var diagnostic in syntaxTree.GetDiagnostics()) { CompileLog.Add(diagnostic.ToString()); } 

अगला, हम Assembly को बाइनरी स्ट्रीम में संकलित करते हैं।

 CSharpCompilation compilation = CSharpCompilation.Create("CompileBlazorInBlazor.Demo", new[] {syntaxTree}, references, new CSharpCompilationOptions(OutputKind.DynamicallyLinkedLibrary)); using (MemoryStream stream = new MemoryStream()) { EmitResult result = compilation.Emit(stream); } 

यह ध्यान दिया जाना चाहिए कि आपको references प्राप्त करने की आवश्यकता है - जुड़े पुस्तकालयों के मेटाडेटा की एक सूची। लेकिन मैं इन फ़ाइलों को Assembly.Location साथ नहीं पढ़ सकता हूँ। क्योंकि पथ, ब्राउज़र में कोई फ़ाइल सिस्टम नहीं है। इस समस्या को हल करने के लिए एक अधिक कुशल तरीका हो सकता है, लेकिन इस लेख का उद्देश्य एक वैचारिक अवसर है, इसलिए हम इन पुस्तकालयों को फिर से Http के माध्यम से डाउनलोड करेंगे और संकलन के पहले शुरुआत में ही ऐसा करेंगे।

 foreach (var assembly in AppDomain.CurrentDomain.GetAssemblies()) { references.Add( MetadataReference.CreateFromStream( await this._http.GetStreamAsync("/_framework/_bin/" + assembly.Location))); } 

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

 Assembly assemby = AppDomain.CurrentDomain.Load(stream.ToArray()); var type = assemby.GetExportedTypes().FirstOrDefault(); var methodInfo = type.GetMethod("Run"); var instance = Activator.CreateInstance(type); return (string) methodInfo.Invoke(instance, new object[] {"my UserName", 12}); 

इस स्तर पर, हमने C # कोड को सीधे ब्राउज़र में संकलित और निष्पादित किया। एक प्रोग्राम में कई फाइलें शामिल हो सकती हैं और अन्य .NET लाइब्रेरी का उपयोग किया जा सकता है। यह महान नहीं है? अब आगे बढ़ते हैं।

किसी ब्राउज़र में Blazor घटक को संकलित करें और चलाएं।

ब्लेज़र घटक Razor संशोधित टेम्पलेट हैं। इसलिए, ब्लेज़र घटक को संकलित करने के लिए, आपको रेजर टेम्पलेट्स को संकलित करने और ब्लेज़र के लिए एक्सटेंशन को कॉन्फ़िगर करने के लिए एक पूरे वातावरण को तैनात करने की आवश्यकता है। आपको nuget से Microsoft.AspNetCore.Blazor.Build पैकेज स्थापित करने की आवश्यकता है। हालाँकि, इसे हमारे Blazor प्रोजेक्ट में जोड़ना विफल हो जाएगा, क्योंकि तब लिंकर प्रोजेक्ट को संकलित नहीं कर पाएगा। इसलिए, आपको इसे डाउनलोड करने की आवश्यकता है, और फिर मैन्युअल रूप से 3 लाइब्रेरी जोड़ें।

 microsoft.aspnetcore.blazor.build\0.7.0\tools\Microsoft.AspNetCore.Blazor.Razor.Extensions.dll microsoft.aspnetcore.blazor.build\0.7.0\tools\Microsoft.AspNetCore.Razor.Language.dll microsoft.aspnetcore.blazor.build\0.7.0\tools\Microsoft.CodeAnalysis.Razor.dll 

आइए Razor को संकलित करने के लिए एक कर्नेल बनाएं और इसे ब्लेज़र के लिए संशोधित करें, क्योंकि डिफ़ॉल्ट रूप से कर्नेल पृष्ठों के लिए रेजर कोड उत्पन्न करेगा।

 var engine = RazorProjectEngine.Create(BlazorExtensionInitializer.DefaultConfiguration, fileSystem, b => { BlazorExtensionInitializer.Register(b); }); 

निष्पादन के लिए, केवल फ़ाइल सिस्टम fileSystem - यह फ़ाइल सिस्टम पर एक अमूर्त है। हमने एक खाली फ़ाइल सिस्टम लागू किया है, हालांकि, यदि आप _ViewImports.cshtml समर्थन के साथ जटिल परियोजनाओं को संकलित करना चाहते हैं, तो आपको स्मृति में अधिक जटिल संरचना को लागू करने की आवश्यकता है।
अब हम C # कोड के Blazor घटक से कोड उत्पन्न करेंगे।

  var file = new MemoryRazorProjectItem(code); var doc = engine.Process(file).GetCSharpDocument(); var csCode = doc.GeneratedCode; 

आप ब्लेज़र घटक से सी # कोड उत्पन्न करने के परिणामों के बारे में doc से निदान संदेश भी प्राप्त कर सकते हैं।
अब हमें C # घटक का कोड मिला। आपको SyntaxTree को SyntaxTree करने की आवश्यकता है, फिर असेंबली संकलित करें, इसे वर्तमान AppDomain में लोड करें और घटक का प्रकार ढूंढें। पिछले उदाहरण के समान।

यह इस घटक को वर्तमान एप्लिकेशन में लोड करने के लिए बना हुआ है। ऐसा करने के कई तरीके हैं, उदाहरण के लिए, अपना खुद का RenderFragment ।

 @inject CompileService service <div class="card"> <div class="card-body"> @Result </div> </div> @functions { RenderFragment Result = null; string Code { get; set; } public async Task Run() { var type = await service.CompileBlazor(Code); if (type != null) { Result = builder => { builder.OpenComponent(0, type); builder.CloseComponent(); }; } else { Result = null; } } } 

निष्कर्ष

हमने ब्लैजर ब्राउज़र में कंपोनेंट को संकलित और लॉन्च किया। जाहिर है, ब्राउज़र के ठीक भीतर गतिशील सी # कोड का एक पूर्ण संकलन किसी भी प्रोग्रामर को प्रभावित कर सकता है।

लेकिन यहां आपको ऐसे "नुकसान" पर विचार करना चाहिए:

• bind बिडायरेक्शनल बाइंडिंग को सपोर्ट करने के लिए अतिरिक्त bind एक्सटेंशन और लाइब्रेरी की आवश्यकता होती है।
• async, await समर्थन करने के लिए async, await , इसी तरह हम अतिरिक्त कनेक्ट करते हैं। पुस्तकालय
• ब्लेज़र संबंधित घटकों के संकलन के लिए दो-चरण संकलन की आवश्यकता होती है।

इन सभी समस्याओं का समाधान पहले ही हो चुका है और यह एक अलग लेख का विषय है।

GIT

डेमो