ES6 मॉड्यूल आयात के माध्यम से जेएस मॉड्यूल (जैसे IIFE) लोड और उपभोग करते हैं

Question

मैं एक विरासत आवेदन में कुछ पुस्तकालय कोड के लिए IIFE कार्य करता है जिसे IE10 + (कोई ES6 मॉड्यूल लोडिंग, आदि) के लिए काम करने की आवश्यकता होती है।

हालांकि, मैं एक रिएक्ट ऐप विकसित करना शुरू कर रहा हूं जो ES6 और टाइपस्क्रिप्ट का उपयोग कर रहा होगा और मैं उन कोड का पुन: उपयोग करना चाहता हूं जो मेरे पास पहले से ही फ़ाइलों को डुप्लिकेट किए बिना हैं। थोड़ा शोध के बाद मैंने पाया कि मैं इन लाइब्रेरी फ़ाइलों को <script src=*>आयात के रूप में काम करने के लिए और रिएक्ट ऐप को ES6 मॉड्यूल लोडिंग के माध्यम से आयात करने की अनुमति देने के लिए एक UMD पैटर्न का उपयोग करना चाहता हूं ।

मैं निम्नलिखित रूपांतरण के साथ आया:

var Utils = (function(){
  var self = {
    MyFunction: function(){
      console.log("MyFunction");
    }
  };
  return self;
})();

सेवा

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (factory((global.Utils = {})));
}(this, (function (exports) { 
  exports.MyFunction = function(){
      console.log("MyFunction");
    };
})));

यह Import Utils from './Utils.js'कमांड के माध्यम से लोड करने की अनुमति देगा और स्क्रिप्ट टैग का उपयोग करके इसे डालने की भी अनुमति देगा<script src='Utils.js'></script>

हालांकि, मेरे कुछ IIFE अन्य IIFE का उपयोग एक निर्भरता के रूप में करते हैं (बुरा मुझे पता है लेकिन एक वास्तविकता है)।

var Utils = Utils; // Used to indicate that there is dependency on Utils
var RandomHelper = (function(){
  var self = {
    DoThing: function(){
      Utils.MyFunction();
    }
  };
  return self;
})();

यदि सही तरीके से RandomHelperऔर Utilsफ़ाइलों में आयात किया जा सकता है, तो रिएक्ट ऐप इस तकनीक के अनुकूल नहीं है। बस कर रहा है

Import Utils from './Utils.js'
Import RandomHelper from './RandomHelper.js'

काम नहीं करता है क्योंकि मेरा मानना ​​है कि यूटिल्स खिड़की के झुलसे नहीं हैं। यह बिना इश्यू के लोड हो RandomHelper.DoThing()जाएगा लेकिन फेंक देगा कि यूटिल्स परिभाषित नहीं है।

विरासत ऐप में

<script src='Utils.js'></script>
<script src='RandomHelper.js'></script>

निर्दोष रूप से काम करता है।

मैं रैंडम हेल्पर को एक रिएक्ट ऐप में यूटिल्स का उपयोग करने में सक्षम कैसे हो सकता हूं, यह आईई और ईएस 5 को संगत रखते हुए लेकिन फिर भी प्रतिक्रिया में काम करता है। शायद किसी तरह एक खिड़की / वैश्विक चर सेट?

पुनश्च: मैं समझता हूं कि ES6 मॉड्यूल लोडिंग का बिंदु निर्भरता से निपटने के लिए है और मेरे मौजूदा IIFE आदर्श नहीं हैं। मैं अंततः es6 वर्गों और बेहतर निर्भरता नियंत्रण पर स्विच करने की योजना बना रहा हूं, लेकिन अब मैं व्हाट्सएप का उपयोग फिर से लिखने के बिना करना चाहता हूं

Comments

रिएक्ट jsx का उपयोग करता है और कोई भी ब्राउज़र jsx को नहीं समझता है, इसलिए आपको वैसे भी बेबल की आवश्यकता है, रिएक्शन प्रोजेक्ट में आयात विवरण का उपयोग नहीं करने का कोई फायदा नहीं है क्योंकि आपको बैबल का उपयोग करना है। रिएक्ट भी ओओ से दूर जा रहा है, इसलिए आप प्रतिक्रिया के साथ ईएस 6 कक्षाओं का उपयोग करना चाहते हैं, इससे कोई मतलब नहीं है। यह अभी भी कक्षाओं का समर्थन करता है लेकिन कार्यात्मक घटकों की ओर बढ़ रहा है।

— एचएमआर

हां मेरे पास बैबल / वेबपैक है और मैं सीआरए ढांचे का उपयोग करता हूं।

— पैरोक

नोड.जेएस में मैं Global.Utils = (func ... and var Utils = global.Uils) का उपयोग कर सकता हूं;

— टॉम

कुछ स्टैंसिलज के साथ उस पर कुछ वेब घटक के प्यार को रगड़ सकता हूं जिसकी मैं कल्पना करता हूं कि आपको किस चीज का समर्थन करने की आवश्यकता है।

— क्रिस डब्ल्यू।

मुझे लगता है कि आपको वास्तव में ES6 आयात सिंटैक्स पर जाना चाहिए जो आप अपने नए ऐप में उपयोग करना चाहते हैं, और विरासत एप्लिकेशन के लिए इसे IIFE (या बस यूएमडी) प्रारूप में वापस ट्रांसपाइल करें। आपको संपूर्ण फ़ाइल को फिर से लिखना नहीं है, लेकिन निर्भरता की घोषणाओं को ठीक करें।

— बरगी

Answer 1

चलो इसे पहले से बाहर कर दें, मॉड्यूल सुविधाएँ, यदि स्पष्ट रूप से निर्यात नहीं की जाती हैं, तो निजी तौर पर परिभाषित मॉड्यूल के लिए स्कूप किया जाता है । आप इस तथ्य के आसपास नहीं पहुँच सकते। लेकिन वहाँ काम के आसपास के विकल्प आप पर विचार कर सकते हैं।

1. विरासत कोड का न्यूनतम संशोधन स्वीकार्य है

आपके लीगेसी कोड में कम से कम बदलाव के साथ एक काम बस वस्तु को जोड़ना Utilsऔर RandomHelperकरना होगा window। मसलन, इसमें बदलाव var Utils = (...)();करें window.Utils = (...)();। नतीजतन, वस्तु दोनों विरासत कोड (लोड के माध्यम से import) और नए कोड आधार द्वारा वैश्विक वस्तु से सुलभ होगी ।

2. यह मानते हुए कि विरासत कोड में बिल्कुल संशोधन नहीं किया जा सकता है

एक नया ES6 मॉड्यूल विरासत स्क्रिप्ट लोड करने के लिए प्रॉक्सी के रूप में बनाया जाना चाहिए:

// ./legacy-main.js

const utilsScript = await fetch( './Utils.js' )
const randomHelperScript = await fetch( './RandomHelper.js' )

const utilsScriptText = await utilsScript.text()
const randomHelperScriptText = await randomHelperScript.text()

// Support access to `Utils` via `import` 
export const Utils = Function( `${utilsScriptText}; return Utils;` )()
// Additionally support access via global object 
Object.defineProperty(window, 'Utils', { value: Utils })

// Support access to `RandomHelper` via `import`
// Note that `Utils` which is a dependency for `RandomHelper` ought to be explicitly injected
// into the scope of execution of `RandomHelper`.
export const RandomHelper = Function( 'Utils', `${randomHelperScriptText}; return RandomHelper;` )( Utils )
// Additionally support access via global object 
Object.defineProperty(window, 'RandomHelper', { value: RandomHelper })

अंत में, आप आयात कर सकते हैं Utilsऔर RandomHelperसे legacy-main.jsजरूरत पड़ने पर:

import { Utils, RandomHelper } from './legacy-main.js'

Utils.MyFunction()
RandomHelper.DoThing()

Answer 2

एक दृष्टिकोण जिस पर आप विचार कर सकते हैं वह निर्भरता इंजेक्शन के कुछ रूप हैं : अपने रिएक्ट ऐप को रैंडम हेल्पर, या इसके कुछ गुणों को प्राप्त करें, बाहरी दुनिया से। तब आप इसे हटा सकते हैं जब आप कॉर्ड को काटने के लिए तैयार हों।

var Utils = (function(){
  var self = {
    MyFunction: function(name){
      return `Hello, ${name}!`;
    }
  };
  return self;
})();

var RandomHelper = (function(){
  var self = {
    DoThing: function(name){
      return Utils.MyFunction(name);
    }
  };
  return self;
})();

const ComponentOne = ({hello}) => {
  return <h1>{hello('ComponentOne')}</h1>;
}

const ComponentTwo = ({hello}) => {
  return <h2>{hello('ComponentTwo')}</h2>
}

const App = ({ExternalFunctions}) => {
  return (
    <header>
      <ComponentOne hello={ExternalFunctions.hello} />
      <ComponentTwo hello={ExternalFunctions.hello} />
    </header>
  )
}

ReactDOM.render(
  <App ExternalFunctions={{hello: RandomHelper.DoThing}} />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>