ES6 মডিউল আমদানির মাধ্যমে উত্তরাধিকারী জেএস মডিউলগুলি (যেমন IIFEs) লোড করুন এবং গ্রাস করুন

Question

আইসি 10 + (কোনও ES6 মডিউল লোডিং ইত্যাদি নয়) এর জন্য কাজ করা দরকার এমন একটি উত্তরাধিকার অ্যাপ্লিকেশনটিতে লাইব্রেরি কোডের জন্য আমার আইআইএফই ফাংশন রয়েছে।

যাইহোক, আমি একটি প্রতিক্রিয়া অ্যাপ্লিকেশন বিকাশ করতে শুরু করছি যা ES6 এবং টাইপস্ক্রিপ্ট ব্যবহার করবে এবং আমি ফাইলগুলি নকল না করেই আমার ইতিমধ্যে থাকা কোডটি পুনরায় ব্যবহার করতে চাই। কিছুটা গবেষণার পরে আমি দেখতে পেলাম যে এই লাইব্রেরি ফাইলগুলিকে <script src=*>আমদানি হিসাবে উভয়ই কাজ করতে দেয় এবং প্রতিক্রিয়া অ্যাপ্লিকেশনটিকে ES6 মডিউল লোডিংয়ের মাধ্যমে সেগুলি আমদানি করার অনুমতি দিতে আমি একটি ইউএমডি প্যাটার্ন ব্যবহার করতে চাই ।

আমি নিম্নলিখিত রূপান্তর নিয়ে এসেছি:

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>

যাইহোক, আমার আইআইএফইর কিছু অন্যান্য আইআইএফই এর নির্ভরতা হিসাবে ব্যবহার করে (খারাপ আমি জানি তবে একটি বাস্তবতা)।

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 সামঞ্জস্যপূর্ণ রেখে একটি প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে ইউটিস ব্যবহার করতে সক্ষম হতে পারি তবে এখনও প্রতিক্রিয়াতে কাজ করে work সম্ভবত কোনওরকম একটি উইন্ডো / বৈশ্বিক চলক সেট করছেন?

PS: আমি বুঝেছি ES6 মডিউল লোডিংয়ের বিষয়টি নির্ভরতাগুলি মোকাবেলা করা এবং আমার বিদ্যমান আইআইএফই আদর্শ নয়। আমি শেষ পর্যন্ত এস classes টি ক্লাস এবং আরও ভাল নির্ভরতা নিয়ন্ত্রণে স্যুইচ করার পরিকল্পনা করছি তবে আপাতত পুনরায় লেখার ছাড়াই যা পাওয়া যায় তা ব্যবহার করতে চাই

Comments

প্রতিক্রিয়াটি জেএসএক্স ব্যবহার করে এবং কোনও ব্রাউজার জেএসএক্স বুঝতে পারে না তাই আপনার যেভাবেই বাবেল দরকার, একটি প্রতিক্রিয়া প্রকল্পে আমদানি বিবৃতি ব্যবহার না করার কোনও ব্যবহার নেই কারণ আপনাকে যেভাবেই বাবেল ব্যবহার করতে হবে। প্রতিক্রিয়াও ওও থেকে দূরে সরে যাচ্ছে তাই বলেছে যে আপনি প্রতিক্রিয়া সহ ES6 ক্লাস ব্যবহার করতে চান তাতে কোনও লাভ হয় না। এটি এখনও ক্লাস সমর্থন করে তবে কার্যকরী উপাদানগুলির দিকে এগিয়ে চলেছে।

— এইচএমআর

হ্যাঁ আমার কাছে বাবেল / ওয়েবপ্যাক রয়েছে এবং আমি সিআরএ ফ্রেমওয়ার্ক ব্যবহার করি।

— প্যারাক্স

নোড.জেজে আমি গ্লোবাল.ওটিলস = (ফানক ... এবং ভ্যার ইউটিলস = গ্লোবাল.ইউটিস) ব্যবহার করতে পারি; তারপরে

— টম

আপনাকে কী সমর্থন করতে হবে তার উপর নির্ভর করে আমি কল্পনা করেছি এমন কয়েকটি স্টেনসিলজ সহ এটিতে কিছু ওয়েব উপাদান প্রেম ঘষতে পারে।

— ক্রিস ডাব্লু।

আমি মনে করি আপনি আপনার নতুন অ্যাপ্লিকেশনটিতে যা ব্যবহার করতে চান তার জন্য ES6 আমদানি সিনট্যাক্সে স্থানান্তরিত হওয়া উচিত এবং উত্তরাধিকার অ্যাপ্লিকেশনটির জন্য এটি আইআইএফই (বা কেবলমাত্র ইউএমডি) ফর্ম্যাটে ফিরিয়ে দেওয়া উচিত। আপনাকে সম্পূর্ণ ফাইলটি নতুন করে লিখতে হবে না, তবে নির্ভরতা ঘোষণাগুলি ঠিক করুন।

— বার্গি

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>