ஜாவாஸ்கிரிப்ட் மூலக் கட்ட இறக்குமதிகள்: உருவாக்க நேரத் தொகுதித் தீர்வை எளிமையாக விளக்குதல்

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

மூலக் கட்ட இறக்குமதிகள் என்றால் என்ன?

மூலக் கட்ட இறக்குமதிகள் என்பது மேம்பாட்டின் *மூலக் குறியீட்டுக் கட்டத்தின்* போது மாட்யூல்களை (ஜாவாஸ்கிரிப்ட் கோப்புகள்) மற்ற மாட்யூல்களில் இறக்குமதி செய்யும் செயல்முறையைக் குறிக்கிறது. அதாவது, உங்கள் `.js` அல்லது `.ts` கோப்புகளில் இறக்குமதி அறிக்கைகள் உள்ளன, இது உங்கள் பயன்பாட்டின் வெவ்வேறு பகுதிகளுக்கு இடையிலான சார்புகளைக் குறிக்கிறது. இந்த இறக்குமதி அறிக்கைகள் நேரடியாக உலாவி அல்லது நோட்.ஜேஎஸ் ரன்டைமால் இயக்கப்படாது; உருவாக்கச் செயல்முறையின் போது ஒரு மாட்யூல் பண்ட்லர் அல்லது டிரான்ஸ்பைலரால் அவை செயலாக்கப்பட்டு தீர்க்கப்பட வேண்டும்.

ஒரு எளிய எடுத்துக்காட்டைக் கவனியுங்கள்:

            // 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
              
            
          

இந்த எடுத்துக்காட்டில், `app.js` கோப்பு `math.js` கோப்பிலிருந்து `add` செயல்பாட்டை இறக்குமதி செய்கிறது. `import` கூற்று ஒரு மூலக் கட்ட இறக்குமதி ஆகும். மாட்யூல் பண்ட்லர் இந்த அறிக்கையை பகுப்பாய்வு செய்து, `math.js` கோப்பை இறுதி பண்டலில் சேர்க்கும், இதனால் `add` செயல்பாடு `app.js`-க்கு கிடைக்கும்.

உருவாக்க நேரத் தொகுதித் தீர்வு: இறக்குமதிகளுக்குப் பின்னால் உள்ள இயந்திரம்

உருவாக்க நேரத் தொகுதித் தீர்வு என்பது ஒரு உருவாக்கக் கருவி (வெப்பேக், ரோல்அப், அல்லது இஎஸ்பில்ட் போன்றவை) இறக்குமதி செய்யப்படும் ஒரு மாட்யூலின் *உண்மையான கோப்புப் பாதையை* தீர்மானிக்கும் பொறிமுறையாகும். இது ஒரு `import` கூற்றில் உள்ள மாட்யூல் ஸ்பெசிஃபையரை (எ.கா., `./math.js`, `lodash`, `react`) அதனுடன் தொடர்புடைய ஜாவாஸ்கிரிப்ட் கோப்பின் முழுமையான அல்லது சார்புப் பாதையாக மாற்றும் செயல்முறையாகும்.

மாட்யூல் தீர்வில் பல படிகள் உள்ளன, அவற்றுள்:

• இறக்குமதி அறிக்கைகளை பகுப்பாய்வு செய்தல்: உருவாக்கக் கருவி உங்கள் குறியீட்டை அலசி, அனைத்து `import` அறிக்கைகளையும் அடையாளம் காண்கிறது.
• மாட்யூல் ஸ்பெசிஃபையர்களைத் தீர்த்தல்: கருவி ஒவ்வொரு மாட்யூல் ஸ்பெசிஃபையரையும் தீர்க்க ஒரு விதிகளை (அதன் உள்ளமைவால் வரையறுக்கப்பட்டது) பயன்படுத்துகிறது.
• சார்பு வரைபடத்தை உருவாக்குதல்: உருவாக்கக் கருவி உங்கள் பயன்பாட்டில் உள்ள அனைத்து மாட்யூல்களுக்கும் இடையிலான உறவுகளைக் குறிக்கும் ஒரு சார்பு வரைபடத்தை உருவாக்குகிறது. இந்த வரைபடம் மாட்யூல்கள் எந்த வரிசையில் தொகுக்கப்பட வேண்டும் என்பதைத் தீர்மானிக்கப் பயன்படுகிறது.
• தொகுத்தல் (Bundling): இறுதியாக, உருவாக்கக் கருவி தீர்க்கப்பட்ட அனைத்து மாட்யூல்களையும் ஒன்று அல்லது அதற்கு மேற்பட்ட பண்டல் கோப்புகளில் இணைக்கிறது, அவை பயன்படுத்த உகந்ததாக இருக்கும்.

மாட்யூல் ஸ்பெசிஃபையர்கள் எவ்வாறு தீர்க்கப்படுகின்றன

ஒரு மாட்யூல் ஸ்பெசிஃபையர் தீர்க்கப்படும் விதம் அதன் வகையைப் பொறுத்தது. பொதுவான வகைகள் பின்வருமாறு:

• சார்புப் பாதைகள் (எ.கா., `./math.js`, `../utils/helper.js`): இவை தற்போதைய கோப்பைப் பொறுத்து தீர்க்கப்படுகின்றன. உருவாக்கக் கருவி குறிப்பிட்ட கோப்பைக் கண்டுபிடிக்க டைரக்டரி மரத்தில் மேலும் கீழும் செல்கிறது.
• முழுமையான பாதைகள் (எ.கா., `/path/to/my/module.js`): இந்தப் பாதைகள் கோப்பு முறைமையில் கோப்பின் சரியான இருப்பிடத்தைக் குறிப்பிடுகின்றன. முழுமையான பாதைகளைப் பயன்படுத்துவது உங்கள் குறியீட்டை மற்ற இடங்களுக்கு எடுத்துச் செல்வதை கடினமாக்கும் என்பதை நினைவில் கொள்ளவும்.
• மாட்யூல் பெயர்கள் (எ.கா., `lodash`, `react`): இவை `node_modules`-இல் நிறுவப்பட்ட மாட்யூல்களைக் குறிக்கின்றன. உருவாக்கக் கருவி பொதுவாக `node_modules` டைரக்டரியை (மற்றும் அதன் பெற்றோர் டைரக்டரிகளை) குறிப்பிட்ட பெயருடன் ஒரு டைரக்டரிக்காகத் தேடுகிறது. பின்னர் அது அந்த டைரக்டரியில் ஒரு `package.json` கோப்பைத் தேடி, மாட்யூலின் நுழைவுப் புள்ளியைத் தீர்மானிக்க `main` புலத்தைப் பயன்படுத்துகிறது. இது பண்ட்லர் உள்ளமைவில் குறிப்பிடப்பட்ட குறிப்பிட்ட கோப்பு நீட்டிப்புகளையும் தேடுகிறது.

நோட்.ஜேஎஸ் மாட்யூல் தீர்வு நெறிமுறை

ஜாவாஸ்கிரிப்ட் உருவாக்கக் கருவிகள் பெரும்பாலும் நோட்.ஜேஎஸ்-இன் மாட்யூல் தீர்வு நெறிமுறையைப் பின்பற்றுகின்றன. இந்த நெறிமுறை, நீங்கள் `require()` அல்லது `import` அறிக்கைகளைப் பயன்படுத்தும்போது நோட்.ஜேஎஸ் எவ்வாறு மாட்யூல்களைத் தேடுகிறது என்பதைக் கட்டளையிடுகிறது. இது பின்வரும் படிகளை உள்ளடக்கியது:

1. மாட்யூல் ஸ்பெசிஃபையர் `/`, `./`, அல்லது `../` உடன் தொடங்கினால், நோட்.ஜேஎஸ் அதை ஒரு கோப்பு அல்லது டைரக்டரிக்கான பாதையாகக் கருதுகிறது.
2. மாட்யூல் ஸ்பெசிஃபையர் மேலே உள்ள எழுத்துக்களில் ஒன்றில் தொடங்கவில்லை என்றால், நோட்.ஜேஎஸ் பின்வரும் இடங்களில் (வரிசையாக) `node_modules` என்ற டைரக்டரியைத் தேடுகிறது:
• தற்போதைய டைரக்டரி
• பெற்றோர் டைரக்டரி
• பெற்றோரின் பெற்றோர் டைரக்டரி, மற்றும் இது ரூட் டைரக்டரியை அடையும் வரை தொடரும்
3. ஒரு `node_modules` டைரக்டரி காணப்பட்டால், நோட்.ஜேஎஸ் `node_modules` டைரக்டரிக்குள் மாட்யூல் ஸ்பெசிஃபையரின் அதே பெயருடன் ஒரு டைரக்டரியைத் தேடுகிறது.
4. ஒரு டைரக்டரி காணப்பட்டால், நோட்.ஜேஎஸ் பின்வரும் கோப்புகளை (வரிசையாக) ஏற்ற முயற்சிக்கிறது:
• `package.json` (மற்றும் `main` புலத்தைப் பயன்படுத்துகிறது)
• `index.js`
• `index.json`
• `index.node`
5. இந்த கோப்புகள் எதுவும் காணப்படவில்லை என்றால், நோட்.ஜேஎஸ் ஒரு பிழையைத் தருகிறது.

மூலக் கட்ட இறக்குமதிகள் மற்றும் உருவாக்க நேரத் தொகுதித் தீர்வின் நன்மைகள்

மூலக் கட்ட இறக்குமதிகள் மற்றும் உருவாக்க நேரத் தொகுதித் தீர்வைப் பயன்படுத்துவது பல நன்மைகளை வழங்குகிறது:

• குறியீட்டு மாடுலாரிட்டி: உங்கள் பயன்பாட்டை சிறிய, மீண்டும் பயன்படுத்தக்கூடிய மாட்யூல்களாக உடைப்பது குறியீட்டு அமைப்பு மற்றும் பராமரிப்பை ஊக்குவிக்கிறது.
• சார்பு மேலாண்மை: `import` அறிக்கைகள் மூலம் சார்புகளை தெளிவாக வரையறுப்பது உங்கள் பயன்பாட்டின் வெவ்வேறு பகுதிகளுக்கு இடையிலான உறவுகளைப் புரிந்துகொள்வதையும் நிர்வகிப்பதையும் எளிதாக்குகிறது.
• குறியீட்டை மீண்டும் பயன்படுத்துதல்: மாட்யூல்களை உங்கள் பயன்பாட்டின் வெவ்வேறு பகுதிகளில் அல்லது பிற திட்டங்களிலும் எளிதாக மீண்டும் பயன்படுத்தலாம். இது ஒரு DRY (Don't Repeat Yourself) கொள்கையை ஊக்குவிக்கிறது, குறியீடு நகலெடுப்பைக் குறைத்து நிலைத்தன்மையை மேம்படுத்துகிறது.
• மேம்படுத்தப்பட்ட செயல்திறன்: மாட்யூல் பண்ட்லர்கள் பல்வேறு மேம்படுத்தல்களைச் செய்ய முடியும், அதாவது ட்ரீ ஷேக்கிங் (பயன்படுத்தப்படாத குறியீட்டை அகற்றுதல்), கோட் ஸ்ப்ளிட்டிங் (பயன்பாட்டை சிறிய துண்டுகளாகப் பிரித்தல்), மற்றும் மினிஃபிகேஷன் (கோப்பு அளவுகளைக் குறைத்தல்), இது விரைவான ஏற்றுதல் நேரங்களுக்கும் மேம்பட்ட பயன்பாட்டுச் செயல்திறனுக்கும் வழிவகுக்கிறது.
• எளிமைப்படுத்தப்பட்ட சோதனை: மாடுலர் குறியீட்டைச் சோதிப்பது எளிதானது, ஏனெனில் தனிப்பட்ட மாட்யூல்களைத் தனித்தனியாகச் சோதிக்க முடியும்.
• சிறந்த ஒத்துழைப்பு: ஒரு மாடுலர் குறியீட்டுத் தளம் பல டெவலப்பர்கள் ஒரே நேரத்தில் பயன்பாட்டின் வெவ்வேறு பகுதிகளில் ஒருவருக்கொருவர் குறுக்கிடாமல் வேலை செய்ய அனுமதிக்கிறது.

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

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

வெப்பேக்

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

• மாட்யூல் பண்ட்லிங்: ஜாவாஸ்கிரிப்ட், CSS, படங்கள் மற்றும் பிற சொத்துக்களை மேம்படுத்தப்பட்ட பண்டல்களில் இணைக்கிறது.
• கோட் ஸ்ப்ளிட்டிங்: பயன்பாட்டை சிறிய துண்டுகளாகப் பிரிக்கிறது, அவை தேவைக்கேற்ப ஏற்றப்படலாம்.
• லோடர்கள்: வெவ்வேறு வகையான கோப்புகளை (எ.கா., டைப்ஸ்கிரிப்ட், சாஸ், JSX) ஜாவாஸ்கிரிப்டாக மாற்றுகின்றன.
• செருகுநிரல்கள்: தனிப்பயன் தர்க்கத்துடன் வெப்பேக்கின் செயல்பாட்டை விரிவுபடுத்துகின்றன.
• ஹாட் மாட்யூல் ரீப்ளேஸ்மென்ட் (HMR): முழுப் பக்கத்தையும் மீண்டும் ஏற்றாமல் உலாவியில் மாட்யூல்களைப் புதுப்பிக்க உங்களை அனுமதிக்கிறது.

வெப்பேக்கின் மாட்யூல் தீர்வு மிகவும் தனிப்பயனாக்கக்கூடியது. உங்கள் `webpack.config.js` கோப்பில் பின்வரும் விருப்பங்களை நீங்கள் உள்ளமைக்கலாம்:

• `resolve.modules`: வெப்பேக் மாட்யூல்களைத் தேட வேண்டிய டைரக்டரிகளைக் குறிப்பிடுகிறது. இயல்பாக, இது `node_modules`-ஐ உள்ளடக்கியது. `node_modules`-க்கு வெளியே மாட்யூல்கள் இருந்தால் கூடுதல் டைரக்டரிகளை நீங்கள் சேர்க்கலாம்.
• `resolve.extensions`: வெப்பேக் தானாகவே தீர்க்க முயற்சிக்க வேண்டிய கோப்பு நீட்டிப்புகளைக் குறிப்பிடுகிறது. இயல்புநிலை நீட்டிப்புகள் `['.js', '.json']`. டைப்ஸ்கிரிப்ட் மற்றும் JSX-ஐ ஆதரிக்க `.ts`, `.jsx`, மற்றும் `.tsx` போன்ற நீட்டிப்புகளை நீங்கள் சேர்க்கலாம்.
• `resolve.alias`: மாட்யூல் பாதைகளுக்கு மாற்றுப்பெயர்களை உருவாக்குகிறது. இது இறக்குமதி அறிக்கைகளை எளிதாக்குவதற்கும், உங்கள் பயன்பாடு முழுவதும் மாட்யூல்களை ஒரு நிலையான வழியில் குறிப்பிடுவதற்கும் பயனுள்ளதாக இருக்கும். எடுத்துக்காட்டாக, `src/components/Button`-ஐ `@components/Button`-க்கு மாற்றுப்பெயராக அமைக்கலாம்.
• `resolve.mainFields`: `package.json` கோப்பில் உள்ள எந்தப் புலங்கள் ஒரு மாட்யூலின் நுழைவுப் புள்ளியைத் தீர்மானிக்கப் பயன்படுத்தப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது. இயல்புநிலை மதிப்பு `['browser', 'module', 'main']`. இது உலாவி மற்றும் நோட்.ஜேஎஸ் சூழல்களுக்கு வெவ்வேறு நுழைவுப் புள்ளிகளைக் குறிப்பிட உங்களை அனுமதிக்கிறது.

எடுத்துக்காட்டு வெப்பேக் உள்ளமைவு:

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

            

              
                Copy
              
            
          

ரோல்அப்

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

• ட்ரீ ஷேக்கிங்: பயன்படுத்தப்படாத குறியீட்டை ஆக்ரோஷமாக அகற்றி, சிறிய பண்டல் அளவுகளை விளைவிக்கிறது.
• ESM (ECMAScript Modules): முதன்மையாக ESM உடன் வேலை செய்கிறது, இது ஜாவாஸ்கிரிப்ட்டின் நிலையான மாட்யூல் வடிவமாகும்.
• செருகுநிரல்கள்: செருகுநிரல்களின் ஒரு வளமான சுற்றுச்சூழல் அமைப்பு மூலம் விரிவாக்கக்கூடியது.

ரோல்அப்பின் மாட்யூல் தீர்வு `@rollup/plugin-node-resolve` மற்றும் `@rollup/plugin-commonjs` போன்ற செருகுநிரல்களைப் பயன்படுத்தி உள்ளமைக்கப்படுகிறது.

• `@rollup/plugin-node-resolve`: வெப்பேக்கின் `resolve.modules` விருப்பத்தைப் போலவே, `node_modules`-லிருந்து மாட்யூல்களைத் தீர்க்க ரோல்அப்பை அனுமதிக்கிறது.
• `@rollup/plugin-commonjs`: CommonJS மாட்யூல்களை (நோட்.ஜேஎஸ் பயன்படுத்தும் மாட்யூல் வடிவம்) ESM-ஆக மாற்றுகிறது, அவற்றை ரோல்அப்பில் பயன்படுத்த அனுமதிக்கிறது.

எடுத்துக்காட்டு ரோல்அப் உள்ளமைவு:

            // rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**'
    })
  ],
};

            

              
                Copy
              
            
          

இஎஸ்பில்ட்

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

• வேகம்: கிடைக்கக்கூடிய வேகமான ஜாவாஸ்கிரிப்ட் பண்ட்லர்களில் ஒன்று.
• எளிமை: வெப்பேக்குடன் ஒப்பிடும்போது மிகவும் நெறிப்படுத்தப்பட்ட உள்ளமைவை வழங்குகிறது.
• டைப்ஸ்கிரிப்ட் ஆதரவு: டைப்ஸ்கிரிப்ட்டிற்கு உள்ளமைக்கப்பட்ட ஆதரவை வழங்குகிறது.

இஎஸ்பில்டின் மாட்யூல் தீர்வு பொதுவாக வெப்பேக்கை விட எளிமையானது. இது தானாகவே `node_modules`-லிருந்து மாட்யூல்களைத் தீர்க்கிறது மற்றும் டைப்ஸ்கிரிப்ட்டை உடனடியாக ஆதரிக்கிறது. உள்ளமைவு பொதுவாக கட்டளை வரி கொடிகள் அல்லது ஒரு எளிய உருவாக்க ஸ்கிரிப்ட் மூலம் செய்யப்படுகிறது.

எடுத்துக்காட்டு இஎஸ்பில்ட் உருவாக்க ஸ்கிரிப்ட்:

            // build.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  platform: 'browser',
}).catch(() => process.exit(1));

            

              
                Copy
              
            
          

டைப்ஸ்கிரிப்ட் மற்றும் மாட்யூல் தீர்வு

டைப்ஸ்கிரிப்ட், ஜாவாஸ்கிரிப்ட்டின் ஒரு சூப்பர்செட் ஆகும், இது நிலையான வகைகளைச் சேர்க்கிறது, இதுவும் மாட்யூல் தீர்வில் பெரிதும் தங்கியுள்ளது. டைப்ஸ்கிரிப்ட் கம்பைலர் (`tsc`) இறக்குமதி செய்யப்பட்ட மாட்யூல்களின் வகைகளைத் தீர்மானிக்க மாட்யூல் ஸ்பெசிஃபையர்களைத் தீர்க்க வேண்டும்.

டைப்ஸ்கிரிப்ட்டின் மாட்யூல் தீர்வு `tsconfig.json` கோப்பு மூலம் உள்ளமைக்கப்படுகிறது. முக்கிய விருப்பங்கள் பின்வருமாறு:

• `moduleResolution`: மாட்யூல் தீர்வு உத்தியைக் குறிப்பிடுகிறது. பொதுவான மதிப்புகள் `node` (நோட்.ஜேஎஸ்-இன் மாட்யூல் தீர்வைப் பின்பற்றுகிறது) மற்றும் `classic` (ஒரு பழைய, எளிமையான தீர்வு நெறிமுறை). `node` பொதுவாக நவீன திட்டங்களுக்குப் பரிந்துரைக்கப்படுகிறது.
• `baseUrl`: சார்பற்ற மாட்யூல் பெயர்களைத் தீர்ப்பதற்கான அடிப்படை டைரக்டரியைக் குறிப்பிடுகிறது.
• `paths`: வெப்பேக்கின் `resolve.alias` விருப்பத்தைப் போலவே, பாதை மாற்றுப்பெயர்களை உருவாக்க உங்களை அனுமதிக்கிறது.
• `module`: மாட்யூல் குறியீடு உருவாக்க வடிவத்தைக் குறிப்பிடுகிறது. பொதுவான மதிப்புகள் `ESNext`, `CommonJS`, `AMD`, `System`, `UMD`.

எடுத்துக்காட்டு டைப்ஸ்கிரிப்ட் உள்ளமைவு:

            // tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "ESNext",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    },
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

            

              
                Copy
              
            
          

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

மாட்யூல் தீர்வுக்கான சிறந்த நடைமுறைகள்

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

• ஒரு மாட்யூல் பண்ட்லரைப் பயன்படுத்தவும்: சார்புகளை நிர்வகிக்கவும், உங்கள் பயன்பாட்டைப் பயன்படுத்த உகந்ததாக்கவும் வெப்பேக், ரோல்அப் அல்லது இஎஸ்பில்ட் போன்ற ஒரு மாட்யூல் பண்ட்லரைப் பயன்படுத்தவும்.
• ஒரு நிலையான மாட்யூல் வடிவத்தைத் தேர்வுசெய்யவும்: உங்கள் திட்டம் முழுவதும் ஒரு நிலையான மாட்யூல் வடிவத்தில் (ESM அல்லது CommonJS) ஒட்டிக்கொள்ளுங்கள். நவீன ஜாவாஸ்கிரிப்ட் மேம்பாட்டிற்கு ESM பொதுவாக விரும்பப்படுகிறது.
• மாட்யூல் தீர்வை சரியாக உள்ளமைக்கவும்: மாட்யூல்கள் சரியாகத் தீர்க்கப்படுவதை உறுதிப்படுத்த உங்கள் உருவாக்கக் கருவி மற்றும் டைப்ஸ்கிரிப்ட் கம்பைலரில் (பொருந்தினால்) மாட்யூல் தீர்வு அமைப்புகளை கவனமாக உள்ளமைக்கவும்.
• பாதை மாற்றுப்பெயர்களைப் பயன்படுத்தவும்: இறக்குமதி அறிக்கைகளை எளிதாக்கவும் குறியீட்டு வாசிப்பை மேம்படுத்தவும் பாதை மாற்றுப்பெயர்களைப் பயன்படுத்தவும்.
• உங்கள் `node_modules`-ஐ சுத்தமாக வைத்திருங்கள்: பண்டல் அளவுகளைக் குறைக்கவும் உருவாக்க நேரங்களை மேம்படுத்தவும் உங்கள் சார்புகளை தவறாமல் புதுப்பித்து, பயன்படுத்தப்படாத தொகுப்புகளை அகற்றவும்.
• ஆழமாக உள்ளமைக்கப்பட்ட இறக்குமதிகளைத் தவிர்க்கவும்: ஆழமாக உள்ளமைக்கப்பட்ட இறக்குமதிப் பாதைகளைத் தவிர்க்க முயற்சி செய்யுங்கள் (எ.கா., `../../../../utils/helper.js`). இது உங்கள் குறியீட்டைப் படிக்கவும் பராமரிக்கவும் கடினமாக்கும். பாதை மாற்றுப்பெயர்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும் அல்லது உங்கள் திட்டத்தை மறுசீரமைத்து உள்ளமைவைக் குறைக்கவும்.
• ட்ரீ ஷேக்கிங்கைப் புரிந்து கொள்ளுங்கள்: பயன்படுத்தப்படாத குறியீட்டை அகற்றி பண்டல் அளவுகளைக் குறைக்க ட்ரீ ஷேக்கிங்கைப் பயன்படுத்திக் கொள்ளுங்கள்.
• கோட் ஸ்ப்ளிட்டிங்கை மேம்படுத்தவும்: உங்கள் பயன்பாட்டை சிறிய துண்டுகளாகப் பிரிக்க கோட் ஸ்ப்ளிட்டிங்கைப் பயன்படுத்தவும், அவை தேவைக்கேற்ப ஏற்றப்படலாம், ஆரம்ப ஏற்றுதல் நேரங்களை மேம்படுத்துகிறது. வழிகள், கூறுகள் அல்லது நூலகங்களின் அடிப்படையில் பிரிப்பதைக் கருத்தில் கொள்ளவும்.
• மாட்யூல் கூட்டமைப்பைக் கருத்தில் கொள்ளவும்: பெரிய, சிக்கலான பயன்பாடுகள் அல்லது மைக்ரோ-ஃபிரண்ட்எண்ட் கட்டமைப்புகளுக்கு, இயக்க நேரத்தில் வெவ்வேறு பயன்பாடுகளுக்கு இடையில் குறியீடு மற்றும் சார்புகளைப் பகிர்ந்து கொள்ள மாட்யூல் கூட்டமைப்பை (வெப்பேக் 5 மற்றும் அதற்குப் பிறகு ஆதரிக்கப்படுகிறது) ஆராயுங்கள். இது மிகவும் மாறும் மற்றும் நெகிழ்வான பயன்பாட்டு வரிசைப்படுத்தல்களை அனுமதிக்கிறது.

மாட்யூல் தீர்வுச் சிக்கல்களை சரிசெய்தல்

மாட்யூல் தீர்வுச் சிக்கல்கள் வெறுப்பூட்டக்கூடும், ஆனால் இங்கே சில பொதுவான சிக்கல்கள் மற்றும் தீர்வுகள் உள்ளன:

• "Module not found" பிழைகள்: இது பொதுவாக மாட்யூல் ஸ்பெசிஃபையர் தவறானது அல்லது மாட்யூல் நிறுவப்படவில்லை என்பதைக் குறிக்கிறது. மாட்யூல் பெயரின் எழுத்துப்பிழையை இருமுறை சரிபார்த்து, மாட்யூல் `node_modules`-இல் நிறுவப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். மேலும், உங்கள் மாட்யூல் தீர்வு உள்ளமைவு சரியாக உள்ளதா என்பதைச் சரிபார்க்கவும்.
• முரண்பட்ட மாட்யூல் பதிப்புகள்: ஒரே மாட்யூலின் பல பதிப்புகள் நிறுவப்பட்டிருந்தால், நீங்கள் எதிர்பாராத நடத்தையை சந்திக்க நேரிடலாம். முரண்பாடுகளைத் தீர்க்க உங்கள் தொகுப்பு மேலாளரை (npm அல்லது yarn) பயன்படுத்தவும். ஒரு மாட்யூலின் ஒரு குறிப்பிட்ட பதிப்பைக் கட்டாயப்படுத்த yarn resolutions அல்லது npm overrides-ஐப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும்.
• தவறான கோப்பு நீட்டிப்புகள்: உங்கள் இறக்குமதி அறிக்கைகளில் சரியான கோப்பு நீட்டிப்புகளைப் பயன்படுத்துகிறீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள் (எ.கா., `.js`, `.jsx`, `.ts`, `.tsx`). மேலும், உங்கள் உருவாக்கக் கருவி சரியான கோப்பு நீட்டிப்புகளைக் கையாள உள்ளமைக்கப்பட்டுள்ளதா என்பதைச் சரிபார்க்கவும்.
• கேஸ் சென்சிட்டிவிட்டி சிக்கல்கள்: சில இயக்க முறைமைகளில் (லினக்ஸ் போன்றவை), கோப்புப் பெயர்கள் கேஸ்-சென்சிட்டிவ் ஆகும். மாட்யூல் ஸ்பெசிஃபையரின் கேஸ் உண்மையான கோப்புப் பெயரின் கேஸுடன் பொருந்துவதை உறுதிப்படுத்தவும்.
• சுழற்சி சார்புகள்: இரண்டு அல்லது அதற்கு மேற்பட்ட மாட்யூல்கள் ஒன்றையொன்று சார்ந்து இருக்கும்போது சுழற்சி சார்புகள் ஏற்படுகின்றன, இது ஒரு சுழற்சியை உருவாக்குகிறது. இது எதிர்பாராத நடத்தை மற்றும் செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும். சுழற்சி சார்புகளை அகற்ற உங்கள் குறியீட்டை மறுசீரமைக்க முயற்சிக்கவும். `madge` போன்ற கருவிகள் உங்கள் திட்டத்தில் சுழற்சி சார்புகளைக் கண்டறிய உதவும்.

உலகளாவிய பரிசீலனைகள்

சர்வதேசமயமாக்கப்பட்ட திட்டங்களில் பணிபுரியும்போது, பின்வருவனவற்றைக் கருத்தில் கொள்ளவும்:

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

முடிவுரை

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