M

MLOG

தமிழ்

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

வெப் பேக் 5 உடன் ஜாவாஸ்கிரிப்ட் மாட்யூல் ஃபெடரேஷன்: மைக்ரோ-ஃபிரண்ட்எண்ட்களுக்கான ஒரு விரிவான வழிகாட்டி

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

மைக்ரோ-ஃபிரண்ட்எண்ட்கள் என்றால் என்ன?

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

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

மைக்ரோ-ஃபிரண்ட்எண்ட்களின் நன்மைகள்:

மைக்ரோ-ஃபிரண்ட்எண்ட்களின் சவால்கள்:

ஜாவாஸ்கிரிப்ட் மாட்யூல் ஃபெடரேஷன் என்றால் என்ன?

ஜாவாஸ்கிரிப்ட் மாட்யூல் ஃபெடரேஷன் என்பது ஒரு வெப் பேக் 5 அம்சமாகும், இது தனித்தனியாக தொகுக்கப்பட்ட ஜாவாஸ்கிரிப்ட் பயன்பாடுகளுக்கு இடையில் இயக்க நேரத்தில் குறியீட்டைப் பகிர உங்களை அனுமதிக்கிறது. இது உங்கள் பயன்பாட்டின் பகுதிகளை "மாட்யூல்களாக" வெளிப்படுத்த உதவுகிறது, அவற்றை மற்ற பயன்பாடுகள் பயன்படுத்தலாம், npm போன்ற ஒரு மைய களஞ்சியத்தில் வெளியிட வேண்டிய அவசியமில்லை.

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

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

மாட்யூல் ஃபெடரேஷனில் முக்கிய கருத்துக்கள்:

வெப் பேக் 5 உடன் மாட்யூல் ஃபெடரேஷனை அமைத்தல்: ஒரு நடைமுறை வழிகாட்டி

வெப் பேக் 5 உடன் மாட்யூல் ஃபெடரேஷனை அமைப்பதற்கான ஒரு நடைமுறை உதாரணத்தைப் பார்ப்போம். நாம் இரண்டு எளிய பயன்பாடுகளை உருவாக்குவோம்: ஒரு Host பயன்பாடு மற்றும் ஒரு Remote பயன்பாடு. Remote பயன்பாடு ஒரு கூறினை வெளிப்படுத்தும், மற்றும் Host பயன்பாடு அதைப் பயன்படுத்தும்.

1. திட்ட அமைப்பு

உங்கள் பயன்பாடுகளுக்கு இரண்டு தனித்தனி கோப்பகங்களை உருவாக்கவும்: `host` மற்றும் `remote`.

```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```

2. தொலைநிலை பயன்பாட்டு கட்டமைப்பு

`remote` கோப்பகத்தில், பின்வரும் கோப்புகளை உருவாக்கவும்:

src/index.js:

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Remote Application

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx:

```javascript import React from 'react'; const RemoteComponent = () => (

This is a Remote Component!

Rendered from the Remote Application.

); export default RemoteComponent; ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

`public/index.html` கோப்பை அடிப்படை HTML கட்டமைப்புடன் உருவாக்கவும். `

` என்பது முக்கியம்

3. Host பயன்பாட்டு கட்டமைப்பு

`host` கோப்பகத்தில், பின்வரும் கோப்புகளை உருவாக்கவும்:

  • `src/index.js`: பயன்பாட்டிற்கான நுழைவுப் புள்ளி.
  • `webpack.config.js`: வெப் பேக் கட்டமைப்பு கோப்பு.

src/index.js:

```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (

Host Application

Loading Remote Component...
}>
); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

`public/index.html` கோப்பை அடிப்படை HTML கட்டமைப்புடன் உருவாக்கவும் (remote பயன்பாட்டைப் போலவே). `

` என்பது முக்கியம்

4. Babel ஐ நிறுவவும்

`host` மற்றும் `remote` ஆகிய இரண்டு கோப்பகங்களிலும், Babel சார்புகளை நிறுவவும்:

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

5. பயன்பாடுகளை இயக்கவும்

`host` மற்றும் `remote` ஆகிய இரண்டு கோப்பகங்களிலும், `package.json` இல் பின்வரும் ஸ்கிரிப்டைச் சேர்க்கவும்:

```json "scripts": { "start": "webpack serve" } ```

இப்போது, இரண்டு பயன்பாடுகளையும் தொடங்கவும்:

```bash cd remote npm start cd ../host npm start ```

உங்கள் உலாவியைத் திறந்து `http://localhost:3000` க்குச் செல்லவும். Remote Component அதனுள் ரெண்டர் செய்யப்பட்ட Host பயன்பாட்டைக் காண்பீர்கள்.

முக்கிய கட்டமைப்பு விருப்பங்களின் விளக்கம்:

மேம்பட்ட மாட்யூல் ஃபெடரேஷன் நுட்பங்கள்

மாட்யூல் ஃபெடரேஷன் மேலும் அதிநவீன மைக்ரோ-ஃபிரண்ட்எண்ட் கட்டமைப்புகளை உருவாக்க உதவும் பல மேம்பட்ட அம்சங்களை வழங்குகிறது.

டைனமிக் ரிமோட்கள்

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

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

```javascript // In webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Assume remoteUrl is something like 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // the key of module federation is that the remote app is // available using the name in the remote resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

இப்போது நீங்கள் Host பயன்பாட்டை `?remote=http://localhost:3001/remoteEntry.js` என்ற வினவல் அளவுருவுடன் ஏற்றலாம்

பதிப்பு செய்யப்பட்ட பகிரப்பட்ட மாட்யூல்கள்

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

வெப் பேக் கட்டமைப்பில் ஒவ்வொரு பகிரப்பட்ட மாட்யூலின் பதிப்பு வரம்பையும் நீங்கள் குறிப்பிடலாம்.

```javascript // In webpack.config.js shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

தனிப்பயன் மாட்யூல் லோடர்கள்

மாட்யூல் ஃபெடரேஷன் வெவ்வேறு மூலங்களிலிருந்து அல்லது வெவ்வேறு வடிவங்களில் மாட்யூல்களை ஏற்றுவதற்குப் பயன்படுத்தக்கூடிய தனிப்பயன் மாட்யூல் லோடர்களை வரையறுக்க உங்களை அனுமதிக்கிறது. இது ஒரு CDN இலிருந்து அல்லது ஒரு தனிப்பயன் மாட்யூல் பதிவேட்டிலிருந்து மாட்யூல்களை ஏற்றுவதற்குப் பயனுள்ளதாக இருக்கும்.

மைக்ரோ-ஃபிரண்ட்எண்ட்களுக்கு இடையில் நிலையைப் பகிர்தல்

மைக்ரோ-ஃபிரண்ட்எண்ட் கட்டமைப்புகளின் சவால்களில் ஒன்று வெவ்வேறு மைக்ரோ-ஃபிரண்ட்எண்ட்களுக்கு இடையில் நிலையைப் பகிர்வது. இந்த சவாலை எதிர்கொள்ள நீங்கள் பல அணுகுமுறைகளை எடுக்கலாம்:

மாட்யூல் ஃபெடரேஷனுடன் மைக்ரோ-ஃபிரண்ட்எண்ட்களை செயல்படுத்துவதற்கான சிறந்த நடைமுறைகள்

மாட்யூல் ஃபெடரேஷனுடன் மைக்ரோ-ஃபிரண்ட்எண்ட்களை செயல்படுத்தும்போது மனதில் கொள்ள வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

செயல்பாட்டில் மாட்யூல் ஃபெடரேஷனின் நிஜ-உலக உதாரணங்கள்

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

முடிவுரை

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

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