ஜாவாஸ்கிரிப்ட் மாட்யூல் ஏற்றும் நிலைகள்: இறக்குமதி தீர்வு மற்றும் செயல்படுத்தல்

ஜாவாஸ்கிரிப்ட் மாட்யூல்கள் நவீன வலை மேம்பாட்டின் ஒரு அடிப்படைக் கட்டுமானப் பொருளாகும். அவை டெவலப்பர்கள் கோடை மீண்டும் பயன்படுத்தக்கூடிய அலகுகளாக ஒழுங்கமைக்கவும், பராமரிப்பை மேம்படுத்தவும், மற்றும் பயன்பாட்டு செயல்திறனை அதிகரிக்கவும் அனுமதிக்கின்றன. மாட்யூல் ஏற்றுதலின் நுணுக்கங்களை, குறிப்பாக இறக்குமதி தீர்வு மற்றும் செயல்படுத்தல் நிலைகளைப் புரிந்துகொள்வது, வலுவான மற்றும் திறமையான ஜாவாஸ்கிரிப்ட் பயன்பாடுகளை எழுதுவதற்கு முக்கியமானது. இந்த வழிகாட்டி இந்த நிலைகள் பற்றிய விரிவான கண்ணோட்டத்தை வழங்குகிறது, இதில் பல்வேறு மாட்யூல் அமைப்புகள் மற்றும் நடைமுறை எடுத்துக்காட்டுகள் அடங்கும்.

ஜாவாஸ்கிரிப்ட் மாட்யூல்களுக்கான அறிமுகம்

இறக்குமதி தீர்வு மற்றும் செயல்படுத்தலின் பிரத்யேக விவரங்களுக்குள் செல்வதற்கு முன், ஜாவாஸ்கிரிப்ட் மாட்யூல்களின் கருத்தையும் அவை ஏன் முக்கியமானவை என்பதையும் புரிந்துகொள்வது அவசியம். மாட்யூல்கள், குளோபல் நேம்ஸ்பேஸ் மாசுபாடு, கோட் அமைப்பு, மற்றும் சார்பு மேலாண்மை போன்ற பாரம்பரிய ஜாவாஸ்கிரிப்ட் மேம்பாட்டுடன் தொடர்புடைய பல சவால்களைத் தீர்க்கின்றன.

மாட்யூல்களைப் பயன்படுத்துவதன் நன்மைகள்

• நேம்ஸ்பேஸ் மேலாண்மை: மாட்யூல்கள் தங்களது சொந்த வரையறைக்குள் கோடை இணைக்கின்றன, இது மாறிகள் மற்றும் செயல்பாடுகளை மற்ற மாட்யூல்களில் அல்லது குளோபல் ஸ்கோப்பில் உள்ளவற்றுடன் மோதுவதைத் தடுக்கிறது. இது பெயரிடும் முரண்பாடுகளின் அபாயத்தைக் குறைத்து, கோட் பராமரிப்பை மேம்படுத்துகிறது.
• கோட் மறுபயன்பாடு: மாட்யூல்களை எளிதாக இறக்குமதி செய்து ஒரு பயன்பாட்டின் வெவ்வேறு பகுதிகளில் அல்லது பல திட்டங்களில் கூட மீண்டும் பயன்படுத்தலாம். இது கோட் மாடுலாரிட்டியை ஊக்குவிக்கிறது மற்றும் தேவையற்றதை குறைக்கிறது.
• சார்பு மேலாண்மை: மாட்யூல்கள் மற்ற மாட்யூல்கள் மீதான தங்கள் சார்புகளை வெளிப்படையாக அறிவிக்கின்றன, இது கோட்பேஸின் வெவ்வேறு பகுதிகளுக்கு இடையிலான உறவுகளைப் புரிந்துகொள்வதை எளிதாக்குகிறது. இது சார்பு மேலாண்மையை எளிதாக்குகிறது மற்றும் காணாமல் போன அல்லது தவறான சார்புகளால் ஏற்படும் பிழைகளின் அபாயத்தைக் குறைக்கிறது.
• மேம்படுத்தப்பட்ட அமைப்பு: மாட்யூல்கள் டெவலப்பர்களை கோடை தர்க்கரீதியான அலகுகளாக ஒழுங்கமைக்க அனுமதிக்கின்றன, இது புரிந்துகொள்வதற்கும், வழிசெலுத்துவதற்கும், பராமரிப்பதற்கும் எளிதாக்குகிறது. இது பெரிய மற்றும் சிக்கலான பயன்பாடுகளுக்கு குறிப்பாக முக்கியமானது.
• செயல்திறன் மேம்படுத்தல்: மாட்யூல் பண்ட்லர்கள் ஒரு பயன்பாட்டின் சார்பு வரைபடத்தை பகுப்பாய்வு செய்து மாட்யூல்களை ஏற்றுவதை மேம்படுத்தலாம், இது HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைத்து ஒட்டுமொத்த செயல்திறனை மேம்படுத்துகிறது.

ஜாவாஸ்கிரிப்டில் உள்ள மாட்யூல் அமைப்புகள்

பல ஆண்டுகளாக, ஜாவாஸ்கிரிப்டில் பல மாட்யூல் அமைப்புகள் உருவாகியுள்ளன, ஒவ்வொன்றும் அதன் சொந்த தொடரியல், அம்சங்கள் மற்றும் வரம்புகளுடன் உள்ளன. இந்த வெவ்வேறு மாட்யூல் அமைப்புகளைப் புரிந்துகொள்வது, தற்போதுள்ள கோட்பேஸ்களுடன் பணிபுரிவதற்கும் புதிய திட்டங்களுக்கு சரியான அணுகுமுறையைத் தேர்ந்தெடுப்பதற்கும் முக்கியமானது.

காமன்ஜேஎஸ் (CJS)

காமன்ஜேஎஸ் என்பது முதன்மையாக Node.js போன்ற சர்வர் பக்க ஜாவாஸ்கிரிப்ட் சூழல்களில் பயன்படுத்தப்படும் ஒரு மாட்யூல் அமைப்பாகும். இது மாட்யூல்களை இறக்குமதி செய்ய require() செயல்பாட்டையும் அவற்றை ஏற்றுமதி செய்ய module.exports பொருளையும் பயன்படுத்துகிறது.

            
// math.js
function add(a, b) {
  return a + b;
}

module.exports = {
  add: add
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // Output: 5

            

              
                Copy
              
            
          

காமன்ஜேஎஸ் ஒத்திசைவானது, அதாவது மாட்யூல்கள் தேவைப்படும் வரிசையில் ஏற்றப்பட்டு செயல்படுத்தப்படுகின்றன. கோப்பு முறைமை அணுகல் வேகமாகவும் நம்பகமானதாகவும் இருக்கும் சர்வர் பக்க சூழல்களில் இது நன்றாக வேலை செய்கிறது.

ஒத்திசைவற்ற மாட்யூல் வரையறை (AMD)

AMD என்பது வலை உலாவிகளில் மாட்யூல்களை ஒத்திசைவற்ற முறையில் ஏற்றுவதற்காக வடிவமைக்கப்பட்ட ஒரு மாட்யூல் அமைப்பாகும். இது மாட்யூல்களை வரையறுக்கவும் அவற்றின் சார்புகளைக் குறிப்பிடவும் define() செயல்பாட்டைப் பயன்படுத்துகிறது.

            
// math.js
define(function() {
  function add(a, b) {
    return a + b;
  }

  return {
    add: add
  };
});

// app.js
require(['./math'], function(math) {
  console.log(math.add(2, 3)); // Output: 5
});

            

              
                Copy
              
            
          

AMD ஒத்திசைவற்றது, அதாவது மாட்யூல்களை இணையாக ஏற்ற முடியும், இது நெட்வொர்க் தாமதம் ஒரு குறிப்பிடத்தக்க காரணியாக இருக்கும் வலை உலாவிகளில் செயல்திறனை மேம்படுத்துகிறது.

யுனிவர்சல் மாட்யூல் வரையறை (UMD)

UMD என்பது காமன்ஜேஎஸ் மற்றும் AMD ஆகிய இரண்டு சூழல்களிலும் மாட்யூல்களைப் பயன்படுத்த அனுமதிக்கும் ஒரு வடிவமாகும். இது பொதுவாக require() அல்லது define() இருப்பதைக் சரிபார்த்து, அதற்கேற்ப மாட்யூல் வரையறையை மாற்றியமைப்பதை உள்ளடக்கியது.

            
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory();
  } else {
    // Browser global (root is window)
    root.myModule = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {

  // Module logic
  function add(a, b) {
    return a + b;
  }

  return {
    add: add
  };
}));

            

              
                Copy
              
            
          

UMD பல்வேறு சூழல்களில் பயன்படுத்தக்கூடிய மாட்யூல்களை எழுத ஒரு வழியை வழங்குகிறது, ஆனால் இது மாட்யூல் வரையறையில் சிக்கலைச் சேர்க்கக்கூடும்.

ECMAScript மாட்யூல்கள் (ESM)

ESM என்பது ஜாவாஸ்கிரிப்டிற்கான நிலையான மாட்யூல் அமைப்பாகும், இது ECMAScript 2015 (ES6) இல் அறிமுகப்படுத்தப்பட்டது. இது மாட்யூல்கள் மற்றும் அவற்றின் சார்புகளை வரையறுக்க import மற்றும் export முக்கிய வார்த்தைகளைப் பயன்படுத்துகிறது.

            
// math.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // Output: 5

            

              
                Copy
              
            
          

ESM சூழலைப் பொறுத்து ஒத்திசைவானதாகவும் ஒத்திசைவற்றதாகவும் வடிவமைக்கப்பட்டுள்ளது. வலை உலாவிகளில், ESM மாட்யூல்கள் இயல்பாக ஒத்திசைவற்ற முறையில் ஏற்றப்படுகின்றன, அதே நேரத்தில் Node.js இல், --experimental-modules கொடியைப் பயன்படுத்தி அவற்றை ஒத்திசைவாகவோ அல்லது ஒத்திசைவற்றதாகவோ ஏற்றலாம். ESM நேரடி பிணைப்புகள் மற்றும் சுழற்சி சார்புகள் போன்ற அம்சங்களையும் ஆதரிக்கிறது.

மாட்யூல் ஏற்றும் நிலைகள்: இறக்குமதி தீர்வு மற்றும் செயல்படுத்தல்

ஜாவாஸ்கிரிப்ட் மாட்யூல்களை ஏற்றுதல் மற்றும் செயல்படுத்தும் செயல்முறையை இரண்டு முக்கிய கட்டங்களாகப் பிரிக்கலாம்: இறக்குமதி தீர்வு மற்றும் செயல்படுத்தல். மாட்யூல்கள் ஒன்றோடொன்று எவ்வாறு தொடர்பு கொள்கின்றன மற்றும் சார்புகள் எவ்வாறு நிர்வகிக்கப்படுகின்றன என்பதைப் புரிந்துகொள்ள இந்த நிலைகளைப் புரிந்துகொள்வது முக்கியமானது.

இறக்குமதி தீர்வு

இறக்குமதி தீர்வு என்பது ஒரு குறிப்பிட்ட மாட்யூல் மூலம் இறக்குமதி செய்யப்படும் மாட்யூல்களைக் கண்டுபிடித்து ஏற்றும் செயல்முறையாகும். இது மாட்யூல் குறிப்பான்களை (எ.கா., './math.js', 'lodash') உண்மையான கோப்பு பாதைகள் அல்லது URLகளுக்குத் தீர்ப்பதை உள்ளடக்கியது. இறக்குமதி தீர்வு செயல்முறை மாட்யூல் அமைப்பு மற்றும் சூழலைப் பொறுத்து மாறுபடும்.

ESM இறக்குமதி தீர்வு

ESM இல், இறக்குமதி தீர்வு செயல்முறை ECMAScript விவரக்குறிப்பால் வரையறுக்கப்பட்டு ஜாவாஸ்கிரிப்ட் இன்ஜின்களால் செயல்படுத்தப்படுகிறது. இந்த செயல்முறை பொதுவாக பின்வரும் படிகளை உள்ளடக்கியது:

1. மாட்யூல் குறிப்பானை அலசுதல்: ஜாவாஸ்கிரிப்ட் இன்ஜின் import அறிக்கையில் உள்ள மாட்யூல் குறிப்பானை (எ.கா., import { add } from './math.js';) அலசுகிறது.
2. மாட்யூல் குறிப்பானைத் தீர்த்தல்: இன்ஜின் மாட்யூல் குறிப்பானை முழு தகுதி வாய்ந்த URL அல்லது கோப்பு பாதைக்குத் தீர்க்கிறது. இது ஒரு மாட்யூல் வரைபடத்தில் மாட்யூலைத் தேடுவது, முன்வரையறுக்கப்பட்ட கோப்பகங்களில் மாட்யூலைத் தேடுவது அல்லது தனிப்பயன் தீர்வு அல்காரிதத்தைப் பயன்படுத்துவதை உள்ளடக்கியிருக்கலாம்.
3. மாட்யூலைப் பெறுதல்: இன்ஜின் தீர்க்கப்பட்ட URL அல்லது கோப்பு பாதையிலிருந்து மாட்யூலைப் பெறுகிறது. இது ஒரு HTTP கோரிக்கையை வைப்பது, கோப்பு அமைப்பிலிருந்து கோப்பைப் படிப்பது அல்லது ஒரு தற்காலிக சேமிப்பகத்திலிருந்து மாட்யூலைப் பெறுவதை உள்ளடக்கியிருக்கலாம்.
4. மாட்யூல் கோடை அலசுதல்: இன்ஜின் மாட்யூல் கோடை அலசி ஒரு மாட்யூல் பதிவை உருவாக்குகிறது, இது மாட்யூலின் ஏற்றுமதிகள், இறக்குமதிகள் மற்றும் செயல்படுத்தும் சூழல் பற்றிய தகவல்களைக் கொண்டுள்ளது.

இறக்குமதி தீர்வு செயல்முறையின் குறிப்பிட்ட விவரங்கள் சூழலைப் பொறுத்து மாறுபடலாம். எடுத்துக்காட்டாக, வலை உலாவிகளில், இறக்குமதி தீர்வு செயல்முறை மாட்யூல் குறிப்பான்களை URLகளுடன் இணைக்க இறக்குமதி வரைபடங்களைப் பயன்படுத்துவதை உள்ளடக்கியிருக்கலாம், அதே நேரத்தில் Node.js இல், இது node_modules கோப்பகத்தில் மாட்யூல்களைத் தேடுவதை உள்ளடக்கியிருக்கலாம்.

காமன்ஜேஎஸ் இறக்குமதி தீர்வு

காமன்ஜேஎஸ்ஸில், இறக்குமதி தீர்வு செயல்முறை ESM ஐ விட எளிமையானது. require() செயல்பாடு அழைக்கப்படும் போது, Node.js மாட்யூல் குறிப்பானைத் தீர்க்க பின்வரும் படிகளைப் பயன்படுத்துகிறது:

1. சார்பு பாதைகள்: மாட்யூல் குறிப்பான் ./ அல்லது ../ உடன் தொடங்கினால், Node.js அதை தற்போதைய மாட்யூலின் கோப்பகத்திற்கான ஒரு சார்பு பாதையாக விளக்குகிறது.
2. முழுமையான பாதைகள்: மாட்யூல் குறிப்பான் / உடன் தொடங்கினால், Node.js அதை கோப்பு முறைமையில் ஒரு முழுமையான பாதையாக விளக்குகிறது.
3. மாட்யூல் பெயர்கள்: மாட்யூல் குறிப்பான் ஒரு எளிய பெயராக இருந்தால் (எ.கா., 'lodash'), Node.js தற்போதைய மாட்யூலின் கோப்பகத்திலும் அதன் பெற்றோர் கோப்பகங்களிலும் node_modules என்ற பெயரிடப்பட்ட ஒரு கோப்பகத்தைத் தேடுகிறது, அது ஒரு பொருந்தும் மாட்யூலைக் கண்டுபிடிக்கும் வரை.

மாட்யூல் கண்டுபிடிக்கப்பட்டவுடன், Node.js மாட்யூலின் கோடைப் படித்து, அதைச் செயல்படுத்தி, module.exports இன் மதிப்பைத் திருப்பித் தருகிறது.

மாட்யூல் பண்ட்லர்கள்

Webpack, Parcel மற்றும் Rollup போன்ற மாட்யூல் பண்ட்லர்கள் ஒரு பயன்பாட்டின் சார்பு வரைபடத்தை பகுப்பாய்வு செய்து அனைத்து மாட்யூல்களையும் ஒரே கோப்பில் அல்லது குறைந்த எண்ணிக்கையிலான கோப்புகளில் தொகுப்பதன் மூலம் இறக்குமதி தீர்வு செயல்முறையை எளிதாக்குகின்றன. இது HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைத்து ஒட்டுமொத்த செயல்திறனை மேம்படுத்துகிறது.

மாட்யூல் பண்ட்லர்கள் பொதுவாக பயன்பாட்டின் நுழைவுப் புள்ளி, மாட்யூல் தீர்வு விதிகள் மற்றும் வெளியீட்டு வடிவமைப்பைக் குறிப்பிட ஒரு உள்ளமைவு கோப்பைப் பயன்படுத்துகின்றன. அவை கோட் பிரித்தல், ட்ரீ ஷேக்கிங் மற்றும் ஹாட் மாட்யூல் ரீப்ளேஸ்மென்ட் போன்ற அம்சங்களையும் வழங்குகின்றன.

செயல்படுத்தல்

மாட்யூல்கள் தீர்க்கப்பட்டு ஏற்றப்பட்டவுடன், செயல்படுத்தல் கட்டம் தொடங்குகிறது. இது ஒவ்வொரு மாட்யூலிலும் உள்ள கோடைச் செயல்படுத்துவதையும் மாட்யூல்களுக்கு இடையிலான உறவுகளை நிறுவுவதையும் உள்ளடக்கியது. மாட்யூல்களின் செயல்படுத்தும் வரிசை சார்பு வரைபடத்தால் தீர்மானிக்கப்படுகிறது.

ESM செயல்படுத்தல்

ESM இல், செயல்படுத்தும் வரிசை இறக்குமதி அறிக்கைகளால் தீர்மானிக்கப்படுகிறது. மாட்யூல்கள் சார்பு வரைபடத்தின் ஆழம்-முதல், பின்-வரிசை பயணத்தில் செயல்படுத்தப்படுகின்றன. இதன் பொருள் ஒரு மாட்யூலின் சார்புகள் மாட்யூலுக்கு முன்பே செயல்படுத்தப்படுகின்றன, மேலும் மாட்யூல்கள் அவை இறக்குமதி செய்யப்படும் வரிசையில் செயல்படுத்தப்படுகின்றன.

ESM நேரடி பிணைப்புகள் போன்ற அம்சங்களையும் ஆதரிக்கிறது, இது மாட்யூல்களை குறிப்பு மூலம் மாறிகள் மற்றும் செயல்பாடுகளைப் பகிர அனுமதிக்கிறது. இதன் பொருள் ஒரு மாட்யூலில் ஒரு மாறியின் மாற்றங்கள் அதை இறக்குமதி செய்யும் மற்ற எல்லா மாட்யூல்களிலும் பிரதிபலிக்கும்.

காமன்ஜேஎஸ் செயல்படுத்தல்

காமன்ஜேஎஸ்ஸில், மாட்யூல்கள் தேவைப்படும் வரிசையில் ஒத்திசைவாக செயல்படுத்தப்படுகின்றன. require() செயல்பாடு அழைக்கப்படும் போது, Node.js மாட்யூலின் கோடை உடனடியாகச் செயல்படுத்தி, module.exports இன் மதிப்பைத் திருப்பித் தருகிறது. இதன் பொருள், கவனமாகக் கையாளப்படாவிட்டால் சுழற்சி சார்புகள் சிக்கல்களை ஏற்படுத்தக்கூடும்.

சுழற்சி சார்புகள்

இரண்டு அல்லது அதற்கு மேற்பட்ட மாட்யூல்கள் ஒன்றையொன்று சார்ந்து இருக்கும்போது சுழற்சி சார்புகள் ஏற்படுகின்றன. எடுத்துக்காட்டாக, மாட்யூல் A மாட்யூல் B ஐ இறக்குமதி செய்யலாம், மேலும் மாட்யூல் B மாட்யூல் A ஐ இறக்குமதி செய்யலாம். சுழற்சி சார்புகள் ESM மற்றும் காமன்ஜேஎஸ் இரண்டிலும் சிக்கல்களை ஏற்படுத்தக்கூடும், ஆனால் அவை வித்தியாசமாகக் கையாளப்படுகின்றன.

ESM இல், நேரடி பிணைப்புகளைப் பயன்படுத்தி சுழற்சி சார்புகள் ஆதரிக்கப்படுகின்றன. ஒரு சுழற்சி சார்பு கண்டறியப்படும் போது, ஜாவாஸ்கிரிப்ட் இன்ஜின் இன்னும் முழுமையாகத் தொடங்கப்படாத மாட்யூலுக்கு ஒரு ஒதுக்கிட மதிப்பை உருவாக்குகிறது. இது முடிவற்ற சுழற்சியை ஏற்படுத்தாமல் மாட்யூல்களை இறக்குமதி செய்து செயல்படுத்த அனுமதிக்கிறது.

காமன்ஜேஎஸ்ஸில், மாட்யூல்கள் ஒத்திசைவாக செயல்படுத்தப்படுவதால் சுழற்சி சார்புகள் சிக்கல்களை ஏற்படுத்தக்கூடும். ஒரு சுழற்சி சார்பு கண்டறியப்பட்டால், require() செயல்பாடு மாட்யூலுக்கு ஒரு முழுமையற்ற அல்லது தொடங்கப்படாத மதிப்பைத் திருப்பித் தரக்கூடும். இது பிழைகள் அல்லது எதிர்பாராத நடத்தைக்கு வழிவகுக்கும்.

சுழற்சி சார்புகளுடன் சிக்கல்களைத் தவிர்க்க, சுழற்சி சார்பை அகற்ற கோடை மறுசீரமைப்பது அல்லது சுழற்சியை உடைக்க சார்பு உட்செலுத்துதல் போன்ற ஒரு நுட்பத்தைப் பயன்படுத்துவது நல்லது.

நடைமுறை எடுத்துக்காட்டுகள்

மேலே விவாதிக்கப்பட்ட கருத்துக்களை விளக்க, ஜாவாஸ்கிரிப்டில் மாட்யூல் ஏற்றுதலின் சில நடைமுறை எடுத்துக்காட்டுகளைப் பார்ப்போம்.

எடுத்துக்காட்டு 1: ஒரு வலை உலாவியில் ESM ஐப் பயன்படுத்துதல்

இந்த எடுத்துக்காட்டு ஒரு வலை உலாவியில் ESM மாட்யூல்களை எவ்வாறு பயன்படுத்துவது என்பதைக் காட்டுகிறது.

            
<!DOCTYPE html>
<html>
<head>
  <title>ESM Example</title>
</head>
<body>
  <script type="module" src="./app.js"></script>
</body>
</html>

            

              
                Copy
              
            
          

            
// math.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // Output: 5

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், <script type="module"> குறிச்சொல் உலாவியிடம் app.js கோப்பை ஒரு ESM மாட்யூலாக ஏற்றுமாறு கூறுகிறது. app.js இல் உள்ள import அறிக்கை math.js மாட்யூலிலிருந்து add செயல்பாட்டை இறக்குமதி செய்கிறது.

எடுத்துக்காட்டு 2: Node.js இல் காமன்ஜேஎஸ் ஐப் பயன்படுத்துதல்

இந்த எடுத்துக்காட்டு Node.js இல் காமன்ஜேஎஸ் மாட்யூல்களை எவ்வாறு பயன்படுத்துவது என்பதைக் காட்டுகிறது.

            
// math.js
function add(a, b) {
  return a + b;
}

module.exports = {
  add: add
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // Output: 5

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், math.js மாட்யூலை இறக்குமதி செய்ய require() செயல்பாடும், add செயல்பாட்டை ஏற்றுமதி செய்ய module.exports பொருளும் பயன்படுத்தப்படுகின்றன.

எடுத்துக்காட்டு 3: ஒரு மாட்யூல் பண்ட்லரைப் பயன்படுத்துதல் (Webpack)

இந்த எடுத்துக்காட்டு ஒரு வலை உலாவியில் பயன்படுத்த ESM மாட்யூல்களைத் தொகுக்க ஒரு மாட்யூல் பண்ட்லரை (Webpack) எவ்வாறு பயன்படுத்துவது என்பதைக் காட்டுகிறது.

            
// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  mode: 'development'
};

            

              
                Copy
              
            
          

            
// src/math.js
export function add(a, b) {
  return a + b;
}

// src/app.js
import { add } from './math.js';
console.log(add(2, 3)); // Output: 5

            

              
                Copy
              
            
          

            
<!DOCTYPE html>
<html>
<head>
  <title>Webpack Example</title>
</head>
<body>
  <script src="./dist/bundle.js"></script>
</body>
</html>

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், src/app.js மற்றும் src/math.js மாட்யூல்களை bundle.js என்ற ஒரே கோப்பில் தொகுக்க Webpack பயன்படுத்தப்படுகிறது. HTML கோப்பில் உள்ள <script> குறிச்சொல் bundle.js கோப்பை ஏற்றுகிறது.

செயல்படுத்தக்கூடிய நுண்ணறிவுகள் மற்றும் சிறந்த நடைமுறைகள்

ஜாவாஸ்கிரிப்ட் மாட்யூல்களுடன் பணிபுரிவதற்கான சில செயல்படுத்தக்கூடிய நுண்ணறிவுகள் மற்றும் சிறந்த நடைமுறைகள் இங்கே:

• ESM மாட்யூல்களைப் பயன்படுத்தவும்: ESM என்பது ஜாவாஸ்கிரிப்டிற்கான நிலையான மாட்யூல் அமைப்பாகும், மேலும் இது மற்ற மாட்யூல் அமைப்புகளை விட பல நன்மைகளை வழங்குகிறது. முடிந்தவரை ESM மாட்யூல்களைப் பயன்படுத்தவும்.
• ஒரு மாட்யூல் பண்ட்லரைப் பயன்படுத்தவும்: Webpack, Parcel மற்றும் Rollup போன்ற மாட்யூல் பண்ட்லர்கள் மேம்பாட்டு செயல்முறையை எளிதாக்கி, மாட்யூல்களை ஒரே கோப்பில் அல்லது குறைந்த எண்ணிக்கையிலான கோப்புகளில் தொகுப்பதன் மூலம் செயல்திறனை மேம்படுத்தலாம்.
• சுழற்சி சார்புகளைத் தவிர்க்கவும்: சுழற்சி சார்புகள் ESM மற்றும் காமன்ஜேஎஸ் இரண்டிலும் சிக்கல்களை ஏற்படுத்தக்கூடும். சுழற்சி சார்புகளை அகற்ற கோடை மறுசீரமைக்கவும் அல்லது சுழற்சியை உடைக்க சார்பு உட்செலுத்துதல் போன்ற ஒரு நுட்பத்தைப் பயன்படுத்தவும்.
• விளக்கமான மாட்யூல் குறிப்பான்களைப் பயன்படுத்தவும்: மாட்யூல்களுக்கு இடையிலான உறவைப் புரிந்துகொள்வதை எளிதாக்கும் தெளிவான மற்றும் விளக்கமான மாட்யூல் குறிப்பான்களைப் பயன்படுத்தவும்.
• மாட்யூல்களை சிறியதாகவும் கவனம் செலுத்துவதாகவும் வைத்திருங்கள்: மாட்யூல்களை சிறியதாகவும் ஒரே பொறுப்பில் கவனம் செலுத்துவதாகவும் வைத்திருங்கள். இது கோடைப் புரிந்துகொள்வதற்கும், பராமரிப்பதற்கும், மீண்டும் பயன்படுத்துவதற்கும் எளிதாக்கும்.
• யூனிட் சோதனைகளை எழுதுங்கள்: ஒவ்வொரு மாட்யூலும் சரியாக வேலை செய்கிறது என்பதை உறுதிப்படுத்த அதற்கு யூனிட் சோதனைகளை எழுதுங்கள். இது பிழைகளைத் தடுக்கவும், கோடின் ஒட்டுமொத்த தரத்தை மேம்படுத்தவும் உதவும்.
• கோட் லின்டர்கள் மற்றும் ஃபார்மேட்டர்களைப் பயன்படுத்தவும்: சீரான கோடிங் பாணியை அமல்படுத்தவும் பொதுவான பிழைகளைத் தடுக்கவும் கோட் லின்டர்கள் மற்றும் ஃபார்மேட்டர்களைப் பயன்படுத்தவும்.

முடிவுரை

இறக்குமதி தீர்வு மற்றும் செயல்படுத்தல் ஆகிய மாட்யூல் ஏற்றும் நிலைகளைப் புரிந்துகொள்வது, வலுவான மற்றும் திறமையான ஜாவாஸ்கிரிப்ட் பயன்பாடுகளை எழுதுவதற்கு முக்கியமானது. வெவ்வேறு மாட்யூல் அமைப்புகள், இறக்குமதி தீர்வு செயல்முறை மற்றும் செயல்படுத்தும் வரிசையைப் புரிந்துகொள்வதன் மூலம், டெவலப்பர்கள் புரிந்துகொள்ள, பராமரிக்க மற்றும் மீண்டும் பயன்படுத்த எளிதான கோடை எழுத முடியும். இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், டெவலப்பர்கள் பொதுவான ஆபத்துக்களைத் தவிர்க்கலாம் மற்றும் அவர்களின் கோடின் ஒட்டுமொத்த தரத்தை மேம்படுத்தலாம்.

சார்புகளை நிர்வகிப்பது முதல் கோட் அமைப்பை மேம்படுத்துவது வரை, ஜாவாஸ்கிரிப்ட் மாட்யூல்களில் தேர்ச்சி பெறுவது எந்தவொரு நவீன வலை டெவலப்பருக்கும் அவசியம். மாடுலாரிட்டியின் சக்தியைத் தழுவி, உங்கள் ஜாவாஸ்கிரிப்ட் திட்டங்களை அடுத்த கட்டத்திற்கு உயர்த்துங்கள்.

மேலும் படிக்க

• ஜாவாஸ்கிரிப்ட் மாட்யூல்கள் - MDN வலை ஆவணங்கள்
• மாட்யூல்கள் - Node.js ஆவணப்படுத்தல்
• Webpack ஆவணப்படுத்தல்
• Parcel ஆவணப்படுத்தல்
• Rollup ஆவணப்படுத்தல்