ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ಗಳ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ, 'ಸ್ಕೋಪ್ಸ್' ವೈಶಿಷ್ಟ್ಯ, ಸ್ಕೋಪ್ ಇನ್ಹೆರಿಟೆನ್ಸ್ ಮತ್ತು ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ಮಾಡ್ಯೂಲ್ ರೆಸಲ್ಯೂಶನ್ ಹೈರಾರ್ಕಿಯ ಮೇಲೆ ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ.
ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಹೊಸ ಯುಗವನ್ನು ಅನಾವರಣಗೊಳಿಸುವುದು: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ಸ್ ಸ್ಕೋಪ್ ಇನ್ಹೆರಿಟೆನ್ಸ್‌ನ ಆಳವಾದ ವಿಶ್ಲೇಷಣೆ
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್‌ಗಳ ಪ್ರಯಾಣವು ಒಂದು ಸುದೀರ್ಘ ಮತ್ತು ಅಂಕುಡೊಂಕಾದ ಹಾದಿಯಾಗಿದೆ. ಆರಂಭಿಕ ವೆಬ್‌ನ ಜಾಗತಿಕ ನೇಮ್‌ಸ್ಪೇಸ್ ಗೊಂದಲದಿಂದ ಹಿಡಿದು Node.js ಗಾಗಿ CommonJS ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ AMD ಯಂತಹ ಅತ್ಯಾಧುನಿಕ ಮಾದರಿಗಳವರೆಗೆ, ಡೆವಲಪರ್‌ಗಳು ಕೋಡ್ ಅನ್ನು ಸಂಘಟಿಸಲು ಮತ್ತು ಹಂಚಿಕೊಳ್ಳಲು ಉತ್ತಮ ಮಾರ್ಗಗಳನ್ನು ನಿರಂತರವಾಗಿ ಹುಡುಕಿದ್ದಾರೆ. ಸ್ಥಳೀಯ ES ಮಾಡ್ಯೂಲ್‌ಗಳ (ESM) ಆಗಮನವು ಒಂದು ಸ್ಮಾರಕ ಬದಲಾವಣೆಯನ್ನು ಗುರುತಿಸಿತು, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಭಾಷೆ ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ನೇರವಾಗಿ ಮಾಡ್ಯೂಲ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಪ್ರಮಾಣೀಕರಿಸಿತು.
ಆದಾಗ್ಯೂ, ಈ ಹೊಸ ಮಾನದಂಡವು ಬ್ರೌಸರ್-ಆಧಾರಿತ ಅಭಿವೃದ್ಧಿಗೆ ಗಣನೀಯ ಅಡಚಣೆಯೊಂದಿಗೆ ಬಂದಿತು. Node.js ನಲ್ಲಿ ನಾವು ಒಗ್ಗಿಕೊಂಡಿರುವ ಸರಳ, ಸೊಗಸಾದ ಇಂಪೋರ್ಟ್ ಸ್ಟೇಟ್‌ಮೆಂಟ್‌ಗಳು, ಉದಾಹರಣೆಗೆ import _ from 'lodash';, ಬ್ರೌಸರ್‌ನಲ್ಲಿ ದೋಷವನ್ನು ನೀಡುತ್ತವೆ. ಏಕೆಂದರೆ ಬ್ರೌಸರ್‌ಗಳು, `node_modules` ಅಲ್ಗಾರಿದಮ್ ಹೊಂದಿರುವ Node.js ಗಿಂತ ಭಿನ್ನವಾಗಿ, ಈ "ಬೇರ್ ಮಾಡ್ಯೂಲ್ ಸ್ಪೆಸಿಫೈಯರ್‌ಗಳನ್ನು" ಮಾನ್ಯ URL ಗೆ ಪರಿಹರಿಸಲು ಯಾವುದೇ ಸ್ಥಳೀಯ ಕಾರ್ಯವಿಧಾನವನ್ನು ಹೊಂದಿಲ್ಲ.
ವರ್ಷಗಳಿಂದ, ಪರಿಹಾರವು ಕಡ್ಡಾಯವಾದ ಬಿಲ್ಡ್ ಹಂತವಾಗಿತ್ತು. Webpack, Rollup, ಮತ್ತು Parcel ನಂತಹ ಪರಿಕರಗಳು ನಮ್ಮ ಕೋಡ್ ಅನ್ನು ಬಂಡಲ್ ಮಾಡುತ್ತಿದ್ದವು, ಈ ಬೇರ್ ಸ್ಪೆಸಿಫೈಯರ್‌ಗಳನ್ನು ಬ್ರೌಸರ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಂತಹ ಮಾರ್ಗಗಳಾಗಿ ಪರಿವರ್ತಿಸುತ್ತಿದ್ದವು. ಶಕ್ತಿಶಾಲಿಯಾಗಿದ್ದರೂ, ಈ ಪರಿಕರಗಳು ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಗೆ ಸಂಕೀರ್ಣತೆ, ಕಾನ್ಫಿಗರೇಶನ್ ಓವರ್‌ಹೆಡ್ ಮತ್ತು ನಿಧಾನವಾದ ಪ್ರತಿಕ್ರಿಯೆ ಲೂಪ್‌ಗಳನ್ನು ಸೇರಿಸಿದವು. ಇದನ್ನು ಸ್ಥಳೀಯವಾಗಿ, ಬಿಲ್ಡ್-ಟೂಲ್-ಮುಕ್ತ ರೀತಿಯಲ್ಲಿ ಪರಿಹರಿಸಲು ಮಾರ್ಗವಿದ್ದರೆ ಹೇಗೆ? ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ಸ್ ಪ್ರವೇಶಿಸಿ.
ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ಗಳು W3C ಮಾನದಂಡವಾಗಿದ್ದು, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಪೋರ್ಟ್‌ಗಳ ನಡವಳಿಕೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು ಸ್ಥಳೀಯ ಕಾರ್ಯವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಅವು ಲುಕಪ್ ಟೇಬಲ್‌ನಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಮಾಡ್ಯೂಲ್ ಸ್ಪೆಸಿಫೈಯರ್‌ಗಳನ್ನು ಕಾಂಕ್ರೀಟ್ URL ಗಳಿಗೆ ಹೇಗೆ ಪರಿಹರಿಸಬೇಕು ಎಂಬುದನ್ನು ಬ್ರೌಸರ್‌ಗೆ ನಿಖರವಾಗಿ ತಿಳಿಸುತ್ತವೆ. ಆದರೆ ಅವುಗಳ ಶಕ್ತಿಯು ಸರಳವಾದ ಅಲಿಯಾಸಿಂಗ್ ಮೀರಿ ವಿಸ್ತರಿಸುತ್ತದೆ. ನಿಜವಾದ ಗೇಮ್-ಚೇಂಜರ್ ಕಡಿಮೆ ತಿಳಿದಿರುವ ಆದರೆ ನಂಬಲಾಗದಷ್ಟು ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯದಲ್ಲಿ ಅಡಗಿದೆ: `scopes`. ಸ್ಕೋಪ್‌ಗಳು ಸಾಂದರ್ಭಿಕ ಮಾಡ್ಯೂಲ್ ರೆಸಲ್ಯೂಶನ್‌ಗೆ ಅವಕಾಶ ನೀಡುತ್ತವೆ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿವಿಧ ಭಾಗಗಳು ಒಂದೇ ಸ್ಪೆಸಿಫೈಯರ್ ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಲು ಆದರೆ ಅದನ್ನು ವಿಭಿನ್ನ ಮಾಡ್ಯೂಲ್‌ಗಳಿಗೆ ಪರಿಹರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಮೈಕ್ರೋ-ಫ್ರಂಟ್‌ಎಂಡ್‌ಗಳು, A/B ಪರೀಕ್ಷೆ ಮತ್ತು ಯಾವುದೇ ಬಂಡಲರ್ ಕಾನ್ಫಿಗರೇಶನ್‌ನ ಒಂದೇ ಸಾಲು ಇಲ್ಲದೆ ಸಂಕೀರ್ಣ ಡಿಪೆಂಡೆನ್ಸಿ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್‌ಗಾಗಿ ಹೊಸ ವಾಸ್ತುಶಿಲ್ಪದ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ನಿಮ್ಮನ್ನು ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ಗಳ ಜಗತ್ತಿನಲ್ಲಿ ಆಳವಾಗಿ ಕೊಂಡೊಯ್ಯುತ್ತದೆ, `scopes` ನಿಂದ ನಿಯಂತ್ರಿಸಲ್ಪಡುವ ಮಾಡ್ಯೂಲ್ ರೆಸಲ್ಯೂಶನ್ ಹೈರಾರ್ಕಿಯನ್ನು ವಿವರಿಸಲು ವಿಶೇಷ ಗಮನವನ್ನು ನೀಡುತ್ತದೆ. ಸ್ಕೋಪ್ ಇನ್ಹೆರಿಟೆನ್ಸ್ (ಅಥವಾ, ಹೆಚ್ಚು ನಿಖರವಾಗಿ, ಫಾಲ್‌ಬ್ಯಾಕ್ ಕಾರ್ಯವಿಧಾನ) ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ, ರೆಸಲ್ಯೂಶನ್ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸುತ್ತೇವೆ ಮತ್ತು ನಿಮ್ಮ ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ವರ್ಕ್‌ಫ್ಲೋನಲ್ಲಿ ಕ್ರಾಂತಿಕಾರಿ ಬದಲಾವಣೆ ತರಲು ಪ್ರಾಯೋಗಿಕ ಮಾದರಿಗಳನ್ನು ಅನಾವರಣಗೊಳಿಸುತ್ತೇವೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ಗಳು ಎಂದರೇನು? ಒಂದು ಮೂಲಭೂತ ಅವಲೋಕನ
ಅದರ ಮೂಲದಲ್ಲಿ, ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಒಂದು JSON ಆಬ್ಜೆಕ್ಟ್ ಆಗಿದ್ದು, ಡೆವಲಪರ್ ಇಂಪೋರ್ಟ್ ಮಾಡಲು ಬಯಸುವ ಮಾಡ್ಯೂಲ್‌ನ ಹೆಸರು ಮತ್ತು ಅನುಗುಣವಾದ ಮಾಡ್ಯೂಲ್ ಫೈಲ್‌ನ URL ನಡುವೆ ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಕೋಡ್‌ನಲ್ಲಿ ಕ್ಲೀನ್, ಬೇರ್ ಮಾಡ್ಯೂಲ್ ಸ್ಪೆಸಿಫೈಯರ್‌ಗಳನ್ನು ಬಳಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, Node.js ಪರಿಸರದಲ್ಲಿರುವಂತೆ, ಮತ್ತು ಬ್ರೌಸರ್ ರೆಸಲ್ಯೂಶನ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಬಿಡುತ್ತದೆ.
ಮೂಲಭೂತ ಸಿಂಟ್ಯಾಕ್ಸ್
ನೀವು type="importmap" ಅಟ್ರಿಬ್ಯೂಟ್‌ನೊಂದಿಗೆ <script> ಟ್ಯಾಗ್ ಬಳಸಿ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಅನ್ನು ಘೋಷಿಸುತ್ತೀರಿ. ಈ ಟ್ಯಾಗ್ ಅನ್ನು ಮ್ಯಾಪ್ ಮಾಡಿದ ಇಂಪೋರ್ಟ್‌ಗಳನ್ನು ಬಳಸುವ ಯಾವುದೇ <script type="module"> ಟ್ಯಾಗ್‌ಗಳ ಮೊದಲು HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಇರಿಸಬೇಕು.
ಇಲ್ಲಿ ಒಂದು ಸರಳ ಉದಾಹರಣೆ ಇದೆ:
<!DOCTYPE html>
<html>
<head>
<!-- The Import Map -->
<script type="importmap">
{
"imports": {
"moment": "https://cdn.skypack.dev/moment",
"lodash": "/js/vendor/lodash-4.17.21.min.js",
"app/": "/js/app/"
}
}
</script>
<!-- Your Application Code -->
<script type="module" src="/js/main.js"></script>
</head>
<body>
<h1>Welcome to Import Maps!</h1>
</body>
</html>
ನಮ್ಮ /js/main.js ಫೈಲ್‌ನೊಳಗೆ, ನಾವು ಈಗ ಈ ರೀತಿ ಕೋಡ್ ಬರೆಯಬಹುದು:
// This works because "moment" is mapped in the import map.
import moment from 'moment';
// This works because "lodash" is mapped.
import { debounce } from 'lodash';
// This is a package-like import for your own code.
// It resolves to /js/app/utils.js because of the "app/" mapping.
import { helper } from 'app/utils.js';
console.log('Today is:', moment().format('MMMM Do YYYY'));
ಇಂಪೋರ್ಟ್ಸ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸೋಣ:
"moment": "https://cdn.skypack.dev/moment": ಇದು ನೇರ ಮ್ಯಾಪಿಂಗ್ ಆಗಿದೆ. ಬ್ರೌಸರ್import ... from 'moment'ಎಂದು ನೋಡಿದಾಗಲೆಲ್ಲಾ, ಅದು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ CDN URL ನಿಂದ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ."lodash": "/js/vendor/lodash-4.17.21.min.js": ಇದು `lodash` ಸ್ಪೆಸಿಫೈಯರ್ ಅನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಹೋಸ್ಟ್ ಮಾಡಿದ ಫೈಲ್‌ಗೆ ಮ್ಯಾಪ್ ಮಾಡುತ್ತದೆ."app/": "/js/app/": ಇದು ಪಾಥ್-ಆಧಾರಿತ ಮ್ಯಾಪಿಂಗ್ ಆಗಿದೆ. ಕೀ ಮತ್ತು ಮೌಲ್ಯ ಎರಡರಲ್ಲೂ ಕೊನೆಯ ಸ್ಲ್ಯಾಷ್ ಅನ್ನು ಗಮನಿಸಿ. `app/` ನಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಯಾವುದೇ ಇಂಪೋರ್ಟ್ ಸ್ಪೆಸಿಫೈಯರ್ ಅನ್ನು `/js/app/` ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಪರಿಹರಿಸಬೇಕು ಎಂದು ಇದು ಬ್ರೌಸರ್‌ಗೆ ತಿಳಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, `import ... from 'app/auth/user.js'` ಅನ್ನು `/js/app/auth/user.js` ಗೆ ಪರಿಹರಿಸಲಾಗುತ್ತದೆ. `../../` ನಂತಹ ಗೊಂದಲಮಯವಾದ ರಿಲೇಟಿವ್ ಪಾಥ್‌ಗಳನ್ನು ಬಳಸದೆ ನಿಮ್ಮ ಸ್ವಂತ ಅಪ್ಲಿಕೇಶನ್ ಕೋಡ್ ಅನ್ನು ರಚಿಸಲು ಇದು ನಂಬಲಾಗದಷ್ಟು ಉಪಯುಕ್ತವಾಗಿದೆ.
ಪ್ರಮುಖ ಪ್ರಯೋಜನಗಳು
ಈ ಸರಳ ಬಳಕೆಯೊಂದಿಗೆ ಸಹ, ಪ್ರಯೋಜನಗಳು ಸ್ಪಷ್ಟವಾಗಿವೆ:
- ಬಿಲ್ಡ್-ಲೆಸ್ ಡೆವಲಪ್‌ಮೆಂಟ್: ನೀವು ಆಧುನಿಕ, ಮಾಡ್ಯುಲರ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬರೆಯಬಹುದು ಮತ್ತು ಬಂಡಲರ್ ಇಲ್ಲದೆ ಅದನ್ನು ನೇರವಾಗಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ರನ್ ಮಾಡಬಹುದು. ಇದು ವೇಗವಾದ ರಿಫ್ರೆಶ್‌ಗಳು ಮತ್ತು ಸರಳವಾದ ಅಭಿವೃದ್ಧಿ ಸೆಟಪ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
- ಡೀಕಪಲ್ಡ್ ಡಿಪೆಂಡೆನ್ಸಿಗಳು: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಕೋಡ್ ಹಾರ್ಡ್‌ಕೋಡ್ ಮಾಡಿದ URL ಗಳ ಬದಲಿಗೆ ಅಬ್‌ಸ್ಟ್ರ್ಯಾಕ್ಟ್ ಸ್ಪೆಸಿಫೈಯರ್‌ಗಳನ್ನು (`'moment'`) ಉಲ್ಲೇಖಿಸುತ್ತದೆ. ಇದು ಆವೃತ್ತಿಗಳನ್ನು, CDN ಪ್ರೊವೈಡರ್‌ಗಳನ್ನು ಬದಲಾಯಿಸುವುದನ್ನು ಅಥವಾ ಸ್ಥಳೀಯ ಫೈಲ್‌ನಿಂದ CDN ಗೆ ಸ್ಥಳಾಂತರಿಸುವುದನ್ನು ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ JSON ಅನ್ನು ಮಾತ್ರ ಬದಲಾಯಿಸುವ ಮೂಲಕ ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
- ಸುಧಾರಿತ ಕ್ಯಾಚಿಂಗ್: ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ಗಳಾಗಿ ಲೋಡ್ ಮಾಡುವುದರಿಂದ, ಬ್ರೌಸರ್ ಅವುಗಳನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ಸಂಗ್ರಹಿಸಬಹುದು (ಕ್ಯಾಶ್ ಮಾಡಬಹುದು). ಒಂದು ಸಣ್ಣ ಮಾಡ್ಯೂಲ್‌ಗೆ ಬದಲಾವಣೆ ಮಾಡುವುದು ದೊಡ್ಡ ಬಂಡಲ್ ಅನ್ನು ಮರುಡೌನ್‌ಲೋಡ್ ಮಾಡುವ ಅಗತ್ಯವಿಲ್ಲ.
ಮೂಲಭೂತ ವಿಷಯಗಳ ಆಚೆಗೆ: ಗ್ರ್ಯಾನ್ಯುಲರ್ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ `scopes` ಪರಿಚಯ
ಟಾಪ್-ಲೆವೆಲ್ `imports` ಕೀಲಿಯು ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಜಾಗತಿಕ ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಆದರೆ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಸಂಕೀರ್ಣತೆಯಲ್ಲಿ ಬೆಳೆದಾಗ ಏನಾಗುತ್ತದೆ? ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಚಾಟ್ ವಿಜೆಟ್ ಅನ್ನು ಸಂಯೋಜಿಸುವ ದೊಡ್ಡ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನೀವು ನಿರ್ಮಿಸುತ್ತಿರುವ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ. ಮುಖ್ಯ ಅಪ್ಲಿಕೇಶನ್ ಚಾರ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯ ಆವೃತ್ತಿ 5 ಅನ್ನು ಬಳಸುತ್ತದೆ, ಆದರೆ ಲೆಗಸಿ ಚಾಟ್ ವಿಜೆಟ್ ಆವೃತ್ತಿ 4 ರೊಂದಿಗೆ ಮಾತ್ರ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ.
"scopes" ಇಲ್ಲದೆ, ನೀವು ಕಷ್ಟಕರವಾದ ಆಯ್ಕೆಯನ್ನು ಎದುರಿಸಬೇಕಾಗುತ್ತದೆ: ವಿಜೆಟ್ ಅನ್ನು ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿ, ಬೇರೆ ವಿಜೆಟ್ ಅನ್ನು ಹುಡುಕಿ, ಅಥವಾ ಹೊಸ ಚಾರ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಲು ಸಾಧ್ಯವಿಲ್ಲ ಎಂದು ಒಪ್ಪಿಕೊಳ್ಳಿ. ಇದು ನಿಖರವಾಗಿ "scopes" ಅನ್ನು ಪರಿಹರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.
ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ನಲ್ಲಿನ `scopes` ಕೀಲಿಯು ಇಂಪೋರ್ಟ್ ಎಲ್ಲಿಂದ ಮಾಡಲಾಗುತ್ತಿದೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಒಂದೇ ಸ್ಪೆಸಿಫೈಯರ್‌ಗಾಗಿ ವಿಭಿನ್ನ ಮ್ಯಾಪಿಂಗ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಸಾಂದರ್ಭಿಕ, ಅಥವಾ ಸ್ಕೋಪ್ಡ್, ಮಾಡ್ಯೂಲ್ ರೆಸಲ್ಯೂಶನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.
`scopes` ರಚನೆ
`scopes` ಮೌಲ್ಯವು ಒಂದು ಆಬ್ಜೆಕ್ಟ್ ಆಗಿದ್ದು, ಅಲ್ಲಿ ಪ್ರತಿ ಕೀಲಿಯು URL ಪ್ರಿಫಿಕ್ಸ್ ಆಗಿದ್ದು, "ಸ್ಕೋಪ್ ಪಾಥ್" ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಪ್ರತಿ ಸ್ಕೋಪ್ ಪಾಥ್‌ಗಾಗಿ ಮೌಲ್ಯವು `imports`-ತರಹದ ಆಬ್ಜೆಕ್ಟ್ ಆಗಿದ್ದು, ಆ ಸ್ಕೋಪ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟವಾಗಿ ಅನ್ವಯಿಸುವ ಮ್ಯಾಪಿಂಗ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
ಉದಾಹರಣೆಯೊಂದಿಗೆ ನಮ್ಮ ಚಾರ್ಟಿಂಗ್ ಲೈಬ್ರರಿ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸೋಣ:
<script type="importmap">
{
"imports": {
"charting-lib": "/libs/charting-lib/v5/main.js",
"api-client": "/js/api/v2/client.js"
},
"scopes": {
"/widgets/chat/": {
"charting-lib": "/libs/charting-lib/v4/legacy.js"
}
}
}
</script>
<script type="module" src="/js/app.js"></script>
<script type="module" src="/widgets/chat/init.js"></script>
ಬ್ರೌಸರ್ ಇದನ್ನು ಹೇಗೆ ಅರ್ಥೈಸುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:
- `/js/app.js` ನಲ್ಲಿರುವ ಸ್ಕ್ರಿಪ್ಟ್ `charting-lib` ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಲು ಬಯಸುತ್ತದೆ. ಸ್ಕ್ರಿಪ್ಟ್‌ನ ಪಾಥ್ (`/js/app.js`) ಯಾವುದೇ ಸ್ಕೋಪ್ ಪಾಥ್‌ಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆಯೇ ಎಂದು ಬ್ರೌಸರ್ ಪರಿಶೀಲಿಸುತ್ತದೆ. ಇದು `/widgets/chat/` ಗೆ ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ. ಆದ್ದರಿಂದ, ಬ್ರೌಸರ್ ಟಾಪ್-ಲೆವೆಲ್ `imports` ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಮತ್ತು `charting-lib` `/libs/charting-lib/v5/main.js` ಗೆ ಪರಿಹರಿಸುತ್ತದೆ.
- `/widgets/chat/init.js` ನಲ್ಲಿರುವ ಸ್ಕ್ರಿಪ್ಟ್ ಸಹ `charting-lib` ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಲು ಬಯಸುತ್ತದೆ. ಈ ಸ್ಕ್ರಿಪ್ಟ್‌ನ ಪಾಥ್ (`/widgets/chat/init.js`) `/widgets/chat/` ಸ್ಕೋಪ್ ಅಡಿಯಲ್ಲಿ ಬರುತ್ತದೆ ಎಂದು ಬ್ರೌಸರ್ ನೋಡುತ್ತದೆ. ಇದು ಈ ಸ್ಕೋಪ್‌ನೊಳಗೆ `charting-lib` ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ಹುಡುಕುತ್ತದೆ ಮತ್ತು ಒಂದನ್ನು ಕಂಡುಕೊಳ್ಳುತ್ತದೆ. ಹೀಗಾಗಿ, ಈ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಾಗಿ ಮತ್ತು ಆ ಪಾಥ್‌ನಿಂದ ಅದು ಇಂಪೋರ್ಟ್ ಮಾಡುವ ಯಾವುದೇ ಮಾಡ್ಯೂಲ್‌ಗಳಿಗಾಗಿ, `charting-lib` `/libs/charting-lib/v4/legacy.js` ಗೆ ಪರಿಹರಿಸುತ್ತದೆ.
"scopes" ನೊಂದಿಗೆ, ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಎರಡು ಭಾಗಗಳು ಒಂದೇ ಡಿಪೆಂಡೆನ್ಸಿಯ ವಿಭಿನ್ನ ಆವೃತ್ತಿಗಳನ್ನು ಬಳಸಲು ನಾವು ಯಶಸ್ವಿಯಾಗಿ ಅನುಮತಿಸಿದ್ದೇವೆ, ಯಾವುದೇ ಘರ್ಷಣೆಗಳಿಲ್ಲದೆ ಶಾಂತಿಯುತವಾಗಿ ಸಹಬಾಳ್ವೆ ನಡೆಸಲು. ಇದು ಸಂಕೀರ್ಣ ಬಂಡಲರ್ ಕಾನ್ಫಿಗರೇಶನ್‌ಗಳು ಅಥವಾ ಐಫ್ರೇಮ್-ಆಧಾರಿತ ಐಸೋಲೇಶನ್‌ನೊಂದಿಗೆ ಮಾತ್ರ ಹಿಂದೆ ಸಾಧಿಸಬಹುದಾದ ನಿಯಂತ್ರಣದ ಮಟ್ಟವಾಗಿದೆ.
ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆ: ಸ್ಕೋಪ್ ಇನ್ಹೆರಿಟೆನ್ಸ್ ಮತ್ತು ಮಾಡ್ಯೂಲ್ ರೆಸಲ್ಯೂಶನ್ ಹೈರಾರ್ಕಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ಈಗ ನಾವು ವಿಷಯದ ತಿರುಳಿಗೆ ಬರುತ್ತೇವೆ. ಫೈಲ್‌ನ ಪಾಥ್‌ಗೆ ಹಲವಾರು ಸ್ಕೋಪ್‌ಗಳು ಸಂಭಾವ್ಯವಾಗಿ ಹೊಂದಿಕೆಯಾಗಬಹುದಾದಾಗ ಬ್ರೌಸರ್ ಯಾವ ಸ್ಕೋಪ್ ಅನ್ನು ಬಳಸಬೇಕೆಂದು ಹೇಗೆ ನಿರ್ಧರಿಸುತ್ತದೆ? ಮತ್ತು ಟಾಪ್-ಲೆವೆಲ್ `imports` ನಲ್ಲಿನ ಮ್ಯಾಪಿಂಗ್‌ಗಳಿಗೆ ಏನಾಗುತ್ತದೆ? ಇದನ್ನು ಸ್ಪಷ್ಟ ಮತ್ತು ಊಹಿಸಬಹುದಾದ ಕ್ರಮಾನುಗತದಿಂದ ನಿಯಂತ್ರಿಸಲಾಗುತ್ತದೆ.
ಗೋಲ್ಡನ್ ರೂಲ್: ಅತ್ಯಂತ ನಿರ್ದಿಷ್ಟ ಸ್ಕೋಪ್ ಗೆಲ್ಲುತ್ತದೆ
ಸ್ಕೋಪ್ ರೆಸಲ್ಯೂಶನ್‌ನ ಮೂಲಭೂತ ತತ್ವವು ನಿರ್ದಿಷ್ಟತೆಯಾಗಿದೆ. ಒಂದು ನಿರ್ದಿಷ್ಟ URL ನಲ್ಲಿನ ಮಾಡ್ಯೂಲ್ ಮತ್ತೊಂದು ಮಾಡ್ಯೂಲ್ ಅನ್ನು ವಿನಂತಿಸಿದಾಗ, ಬ್ರೌಸರ್ `scopes` ಆಬ್ಜೆಕ್ಟ್‌ನಲ್ಲಿನ ಎಲ್ಲಾ ಕೀಗಳನ್ನು ನೋಡುತ್ತದೆ. ಇದು ವಿನಂತಿಸುವ ಮಾಡ್ಯೂಲ್‌ನ URL ನ ಪ್ರಿಫಿಕ್ಸ್ ಆಗಿರುವ ಅತಿ ಉದ್ದದ ಕೀಲಿಯನ್ನು ಕಂಡುಕೊಳ್ಳುತ್ತದೆ. ಈ "ಅತ್ಯಂತ ನಿರ್ದಿಷ್ಟ" ಹೊಂದಾಣಿಕೆಯ ಸ್ಕೋಪ್ ಅನ್ನು ಇಂಪೋರ್ಟ್ ಅನ್ನು ಪರಿಹರಿಸಲು ಮಾತ್ರ ಬಳಸಲಾಗುತ್ತದೆ. ಈ ನಿರ್ದಿಷ್ಟ ರೆಸಲ್ಯೂಶನ್‌ಗಾಗಿ ಎಲ್ಲಾ ಇತರ ಸ್ಕೋಪ್‌ಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ.
ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಫೈಲ್ ರಚನೆ ಮತ್ತು ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ನೊಂದಿಗೆ ಇದನ್ನು ವಿವರಿಸೋಣ.
ಫೈಲ್ ರಚನೆ:
- `/index.html` (ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ)
- `/js/main.js`
- `/js/feature-a/index.js`
- `/js/feature-a/core/logic.js`
`index.html` ನಲ್ಲಿ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್:
{
"imports": {
"api": "/js/api/v1/api.js",
"ui-kit": "/js/ui/v2/kit.js"
},
"scopes": {
"/js/feature-a/": {
"api": "/js/api/v2-beta/api.js"
},
"/js/feature-a/core/": {
"api": "/js/api/v3-experimental/api.js",
"ui-kit": "/js/ui/v1/legacy-kit.js"
}
}
}
ಈಗ ವಿವಿಧ ಫೈಲ್‌ಗಳಿಂದ `import api from 'api';` ಮತ್ತು `import ui from 'ui-kit';` ನ ರೆಸಲ್ಯೂಶನ್ ಅನ್ನು ಪತ್ತೆಹಚ್ಚೋಣ:
-
In `/js/main.js`:
- ಪಾಥ್ `/js/main.js` `/js/feature-a/` ಅಥವಾ `/js/feature-a/core/` ಗೆ ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ.
- ಯಾವುದೇ ಸ್ಕೋಪ್ ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ. ರೆಸಲ್ಯೂಶನ್ ಟಾಪ್-ಲೆವೆಲ್ `imports` ಗೆ ಹಿಂತಿರುಗುತ್ತದೆ.
- `api` `/js/api/v1/api.js` ಗೆ ಪರಿಹರಿಸುತ್ತದೆ.
- `ui-kit` `/js/ui/v2/kit.js` ಗೆ ಪರಿಹರಿಸುತ್ತದೆ.
-
In `/js/feature-a/index.js`:
- ಪಾಥ್ `/js/feature-a/index.js` `/js/feature-a/` ನಿಂದ ಪ್ರಿಫಿಕ್ಸ್ ಮಾಡಲಾಗಿದೆ. ಇದು `/js/feature-a/core/` ನಿಂದ ಪ್ರಿಫಿಕ್ಸ್ ಮಾಡಲಾಗಿಲ್ಲ.
- ಅತ್ಯಂತ ನಿರ್ದಿಷ್ಟ ಹೊಂದಾಣಿಕೆಯ ಸ್ಕೋಪ್ `/js/feature-a/` ಆಗಿದೆ.
- ಈ ಸ್ಕೋಪ್ `api` ಗಾಗಿ ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ. ಆದ್ದರಿಂದ, `api` `/js/api/v2-beta/api.js` ಗೆ ಪರಿಹರಿಸುತ್ತದೆ.
- ಈ ಸ್ಕೋಪ್ `ui-kit` ಗಾಗಿ ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ಒಳಗೊಂಡಿಲ್ಲ. ಈ ಸ್ಪೆಸಿಫೈಯರ್‌ಗಾಗಿ ರೆಸಲ್ಯೂಶನ್ ಟಾಪ್-ಲೆವೆಲ್ `imports` ಗೆ ಹಿಂತಿರುಗುತ್ತದೆ. `ui-kit` `/js/ui/v2/kit.js` ಗೆ ಪರಿಹರಿಸುತ್ತದೆ.
-
In `/js/feature-a/core/logic.js`:
- ಪಾಥ್ `/js/feature-a/core/logic.js` ಅನ್ನು `/js/feature-a/` ಮತ್ತು `/js/feature-a/core/` ಎರಡರಿಂದಲೂ ಪ್ರಿಫಿಕ್ಸ್ ಮಾಡಲಾಗಿದೆ.
- `/js/feature-a/core/` ಉದ್ದವಾಗಿದೆ ಮತ್ತು ಆದ್ದರಿಂದ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾಗಿದೆ, ಇದನ್ನು ಗೆಲ್ಲುವ ಸ್ಕೋಪ್ ಆಗಿ ಆಯ್ಕೆ ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಫೈಲ್‌ಗಾಗಿ `/js/feature-a/` ಸ್ಕೋಪ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ.
- ಈ ಸ್ಕೋಪ್ `api` ಗಾಗಿ ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ. `api` `/js/api/v3-experimental/api.js` ಗೆ ಪರಿಹರಿಸುತ್ತದೆ.
- ಈ ಸ್ಕೋಪ್ `ui-kit` ಗಾಗಿ ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ಸಹ ಒಳಗೊಂಡಿದೆ. `ui-kit` `/js/ui/v1/legacy-kit.js` ಗೆ ಪರಿಹರಿಸುತ್ತದೆ.
"ಇನ್ಹೆರಿಟೆನ್ಸ್" ಬಗ್ಗೆ ಸತ್ಯ: ಇದು ಫಾಲ್‌ಬ್ಯಾಕ್, ವಿಲೀನವಲ್ಲ
ಸಾಮಾನ್ಯ ಗೊಂದಲದ ಅಂಶವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. "ಸ್ಕೋಪ್ ಇನ್ಹೆರಿಟೆನ್ಸ್" ಎಂಬ ಪದವು ದಾರಿತಪ್ಪಿಸುವಂತಿರಬಹುದು. ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ಸ್ಕೋಪ್ ಕಡಿಮೆ ನಿರ್ದಿಷ್ಟ (ಪೋಷಕ) ಸ್ಕೋಪ್‌ನೊಂದಿಗೆ ಇನ್ಹೆರಿಟ್ ಆಗುವುದಿಲ್ಲ ಅಥವಾ ವಿಲೀನಗೊಳ್ಳುವುದಿಲ್ಲ. ರೆಸಲ್ಯೂಶನ್ ಪ್ರಕ್ರಿಯೆಯು ಸರಳವಾಗಿದೆ ಮತ್ತು ಹೆಚ್ಚು ನೇರವಾಗಿದೆ:
- ಇಂಪೋರ್ಟ್ ಮಾಡುವ ಸ್ಕ್ರಿಪ್ಟ್‌ನ URL ಗಾಗಿ ಒಂದೇ ಅತ್ಯಂತ ನಿರ್ದಿಷ್ಟ ಹೊಂದಾಣಿಕೆಯ ಸ್ಕೋಪ್ ಅನ್ನು ಹುಡುಕಿ.
- ಆ ಸ್ಕೋಪ್ ವಿನಂತಿಸಿದ ಸ್ಪೆಸಿಫೈಯರ್‌ಗಾಗಿ ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ಹೊಂದಿದ್ದರೆ, ಅದನ್ನು ಬಳಸಿ. ಪ್ರಕ್ರಿಯೆ ಇಲ್ಲಿ ಕೊನೆಗೊಳ್ಳುತ್ತದೆ.
- ಗೆಲ್ಲುವ ಸ್ಕೋಪ್ ಸ್ಪೆಸಿಫೈಯರ್‌ಗಾಗಿ ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ಬ್ರೌಸರ್ ತಕ್ಷಣವೇ ಮ್ಯಾಪಿಂಗ್‌ಗಾಗಿ ಟಾಪ್-ಲೆವೆಲ್ `imports` ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಇದು ಯಾವುದೇ ಇತರ, ಕಡಿಮೆ ನಿರ್ದಿಷ್ಟ ಸ್ಕೋಪ್‌ಗಳನ್ನು ನೋಡುವುದಿಲ್ಲ.
- ಟಾಪ್-ಲೆವೆಲ್ `imports` ನಲ್ಲಿ ಮ್ಯಾಪಿಂಗ್ ಕಂಡುಬಂದರೆ, ಅದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
- ಗೆಲ್ಲುವ ಸ್ಕೋಪ್ ಅಥವಾ ಟಾಪ್-ಲೆವೆಲ್ `imports` ಎರಡರಲ್ಲೂ ಯಾವುದೇ ಮ್ಯಾಪಿಂಗ್ ಕಂಡುಬರದಿದ್ದರೆ, `TypeError` ಎಸೆಯಲಾಗುತ್ತದೆ.
ಇದನ್ನು ದೃಢೀಕರಿಸಲು ನಮ್ಮ ಕೊನೆಯ ಉದಾಹರಣೆಯನ್ನು ಮತ್ತೆ ನೋಡೋಣ. `/js/feature-a/index.js` ನಿಂದ `ui-kit` ಅನ್ನು ಪರಿಹರಿಸುವಾಗ, ಗೆಲ್ಲುವ ಸ್ಕೋಪ್ `/js/feature-a/` ಆಗಿತ್ತು. ಈ ಸ್ಕೋಪ್ `ui-kit` ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲಿಲ್ಲ, ಆದ್ದರಿಂದ ಬ್ರೌಸರ್ `/` ಸ್ಕೋಪ್ ಅನ್ನು (ಇದು ಕೀಲಿಯಾಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲ) ಅಥವಾ ಯಾವುದೇ ಇತರ ಪೋಷಕರನ್ನು ಪರಿಶೀಲಿಸಲಿಲ್ಲ. ಅದು ನೇರವಾಗಿ ಜಾಗತಿಕ `imports` ಗೆ ಹೋಗಿ ಅಲ್ಲಿ ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ಕಂಡುಕೊಂಡಿತು. ಇದು ಫಾಲ್‌ಬ್ಯಾಕ್ ಕಾರ್ಯವಿಧಾನವಾಗಿದೆ, CSS ನಂತಹ ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಅಥವಾ ವಿಲೀನಗೊಳ್ಳುವ ಇನ್ಹೆರಿಟೆನ್ಸ್ ಅಲ್ಲ.
ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಸುಧಾರಿತ ಸನ್ನಿವೇಶಗಳು
ಸ್ಕೋಪ್ಡ್ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ಗಳ ಶಕ್ತಿಯು ಸಂಕೀರ್ಣ, ನೈಜ-ಪ್ರಪಂಚದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ನಿಜವಾಗಿಯೂ ಹೊಳೆಯುತ್ತದೆ. ಅವು ಸಕ್ರಿಯಗೊಳಿಸುವ ಕೆಲವು ವಾಸ್ತುಶಿಲ್ಪದ ಮಾದರಿಗಳು ಇಲ್ಲಿವೆ.
ಮೈಕ್ರೋ-ಫ್ರಂಟ್‌ಎಂಡ್‌ಗಳು
ಇದು ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಸ್ಕೋಪ್‌ಗಳಿಗೆ ಮಾರಕವಾದ ಬಳಕೆಯ ಪ್ರಕರಣವಾಗಿದೆ. ಉತ್ಪನ್ನ ಹುಡುಕಾಟ, ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ ಮತ್ತು ಚೆಕ್‌ಔಟ್ ಎಲ್ಲವೂ ವಿಭಿನ್ನ ತಂಡಗಳಿಂದ ಅಭಿವೃದ್ಧಿಪಡಿಸಲಾದ ಪ್ರತ್ಯೇಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಾಗಿರುವ (ಮೈಕ್ರೋ-ಫ್ರಂಟ್‌ಎಂಡ್‌ಗಳು) ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್ ಅನ್ನು ಊಹಿಸಿ. ಅವೆಲ್ಲವೂ ಒಂದೇ ಹೋಸ್ಟ್ ಪುಟಕ್ಕೆ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟಿವೆ.
- ಹುಡುಕಾಟ ತಂಡವು React ನ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಯನ್ನು ಬಳಸಬಹುದು.
- ಪೂರ್ವ ಡಿಪೆಂಡೆನ್ಸಿ ಕಾರಣ ಕಾರ್ಟ್ ತಂಡವು React ನ ಹಳೆಯ, ಸ್ಥಿರ ಆವೃತ್ತಿಯಲ್ಲಿರಬಹುದು.
- ಹೋಸ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ತನ್ನ ಶೆಲ್‌ಗಾಗಿ Preact ಅನ್ನು ಬಳಸಬಹುದು.
ಒಂದು ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಇದನ್ನು ಮನಬಂದಂತೆ ಸಂಘಟಿಸಬಹುದು:
{
"imports": {
"react": "/libs/preact/v10/preact.js",
"react-dom": "/libs/preact/v10/preact-dom.js",
"shared-state": "/js/state-manager.js"
},
"scopes": {
"/apps/search/": {
"react": "/libs/react/v18/react.js",
"react-dom": "/libs/react/v18/react-dom.js"
},
"/apps/cart/": {
"react": "/libs/react/v17/react.js",
"react-dom": "/libs/react/v17/react-dom.js"
}
}
}
ಇಲ್ಲಿ, ಪ್ರತಿ ಮೈಕ್ರೋ-ಫ್ರಂಟ್‌ಎಂಡ್, ಅದರ URL ಪಾಥ್‌ನಿಂದ ಗುರುತಿಸಲ್ಪಟ್ಟಿದೆ, React ನ ತನ್ನದೇ ಆದ ಪ್ರತ್ಯೇಕ ಆವೃತ್ತಿಯನ್ನು ಪಡೆಯುತ್ತದೆ. ಅವು ಇನ್ನೂ ಪರಸ್ಪರ ಸಂವಹನ ನಡೆಸಲು ಟಾಪ್-ಲೆವೆಲ್ `imports` ನಿಂದ `shared-state` ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಬಹುದು. ಇದು ಸಂಕೀರ್ಣ ಬಂಡಲರ್ ಫೆಡರೇಶನ್ ಸೆಟಪ್‌ಗಳಿಲ್ಲದೆ ಬಲವಾದ ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಶನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ ಮತ್ತು ನಿಯಂತ್ರಿತ ಇಂಟರ್‌ಆಪರಬಿಲಿಟಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ.
A/B ಪರೀಕ್ಷೆ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯ ಫ್ಲ್ಯಾಗಿಂಗ್
ನಿಮ್ಮ ಬಳಕೆದಾರರ ಶೇಕಡಾವಾರು ಪ್ರಮಾಣಕ್ಕೆ ಚೆಕ್‌ಔಟ್ ಫ್ಲೋನ ಹೊಸ ಆವೃತ್ತಿಯನ್ನು ಪರೀಕ್ಷಿಸಲು ಬಯಸುವಿರಾ? ನೀವು ಮಾರ್ಪಡಿಸಿದ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ನೊಂದಿಗೆ ಪರೀಕ್ಷಾ ಗುಂಪಿಗೆ ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾದ `index.html` ಅನ್ನು ಸರ್ವ್ ಮಾಡಬಹುದು.
ನಿಯಂತ್ರಣ ಗುಂಪಿನ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್:
{
"imports": {
"checkout-flow": "/js/checkout/v1/flow.js"
}
}
ಪರೀಕ್ಷಾ ಗುಂಪಿನ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್:
{
"imports": {
"checkout-flow": "/js/checkout/v2-beta/flow.js"
}
}
ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಕೋಡ್ ಒಂದೇ ಆಗಿರುತ್ತದೆ: `import start from 'checkout-flow';`. ಯಾವ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಬೇಕು ಎಂಬುದರ ರೂಟಿಂಗ್ ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಮಟ್ಟದಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ, ಇದನ್ನು ಬಳಕೆದಾರರ ಕುಕೀಗಳು ಅಥವಾ ಇತರ ಮಾನದಂಡಗಳ ಆಧಾರದ ಮೇಲೆ ಸರ್ವರ್‌ನಲ್ಲಿ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ರಚಿಸಬಹುದು.
ಮೊನೊರೆಪೋಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು
ದೊಡ್ಡ ಮೊನೊರೆಪೋದಲ್ಲಿ, ನೀವು ಪರಸ್ಪರ ಅವಲಂಬಿಸಿರುವ ಅನೇಕ ಆಂತರಿಕ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಹೊಂದಿರಬಹುದು. ಸ್ಕೋಪ್‌ಗಳು ಈ ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಸ್ವಚ್ಛವಾಗಿ ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ. ಅಭಿವೃದ್ಧಿಯ ಸಮಯದಲ್ಲಿ ನೀವು ಪ್ರತಿ ಪ್ಯಾಕೇಜ್‌ನ ಹೆಸರನ್ನು ಅದರ ಮೂಲ ಕೋಡ್‌ಗೆ ಮ್ಯಾಪ್ ಮಾಡಬಹುದು.
{
"imports": {
"@my-corp/design-system": "/packages/design-system/src/index.js",
"@my-corp/utils": "/packages/utils/src/index.js"
},
"scopes": {
"/packages/design-system/": {
"@my-corp/utils": "/packages/design-system/src/vendor/utils-shim.js"
}
}
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಹೆಚ್ಚಿನ ಪ್ಯಾಕೇಜ್‌ಗಳು ಮುಖ್ಯ `utils` ಲೈಬ್ರರಿಯನ್ನು ಪಡೆಯುತ್ತವೆ. ಆದಾಗ್ಯೂ, `design-system` ಪ್ಯಾಕೇಜ್, ಬಹುಶಃ ನಿರ್ದಿಷ್ಟ ಕಾರಣಕ್ಕಾಗಿ, ತನ್ನದೇ ಆದ ಸ್ಕೋಪ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ `utils` ನ ಶಿಮ್ಡ್ ಅಥವಾ ವಿಭಿನ್ನ ಆವೃತ್ತಿಯನ್ನು ಪಡೆಯುತ್ತದೆ.
ಬ್ರೌಸರ್ ಬೆಂಬಲ, ಟೂಲಿಂಗ್ ಮತ್ತು ಡಿಪ್ಲಾಯ್ಮೆಂಟ್ ಪರಿಗಣನೆಗಳು
ಬ್ರೌಸರ್ ಬೆಂಬಲ
2023 ರ ಅಂತ್ಯದ ವೇಳೆಗೆ, ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ಗಳಿಗೆ ಸ್ಥಳೀಯ ಬೆಂಬಲವು Chrome, Edge, Safari, ಮತ್ತು Firefox ಸೇರಿದಂತೆ ಎಲ್ಲಾ ಪ್ರಮುಖ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಲಭ್ಯವಿದೆ. ಇದರರ್ಥ ನೀವು ಯಾವುದೇ ಪಾಲಿಫಿಲ್‌ಗಳಿಲ್ಲದೆ ನಿಮ್ಮ ಹೆಚ್ಚಿನ ಬಳಕೆದಾರರ ನೆಲೆಯನ್ನು ಉದ್ದೇಶಿಸಿ ಉತ್ಪಾದನೆಯಲ್ಲಿ ಅವುಗಳನ್ನು ಬಳಸಲು ಪ್ರಾರಂಭಿಸಬಹುದು.
ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು
ಸ್ಥಳೀಯ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಬೆಂಬಲವಿಲ್ಲದ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ, ಸಮುದಾಯವು ದೃಢವಾದ ಪರಿಹಾರವನ್ನು ಹೊಂದಿದೆ: `es-module-shims.js` ಪಾಲಿಫಿಲ್. ಈ ಒಂದೇ ಸ್ಕ್ರಿಪ್ಟ್, ನಿಮ್ಮ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ಗೆ ಮೊದಲು ಸೇರಿಸಿದಾಗ, ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ಗಳು ಮತ್ತು ಇತರ ಆಧುನಿಕ ಮಾಡ್ಯೂಲ್ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ (ಡೈನಾಮಿಕ್ `import()` ನಂತಹ) ಹಳೆಯ ಪರಿಸರಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ. ಇದು ಹಗುರವಾದ, ಯುದ್ಧ-ಪರೀಕ್ಷಿತ ಮತ್ತು ವ್ಯಾಪಕ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಶಿಫಾರಸು ಮಾಡಲಾದ ವಿಧಾನವಾಗಿದೆ.
<!-- Polyfill for older browsers -->
<script async src="https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js"></script>
<!-- Your import map -->
<script type="importmap">
...
</script>
ಡೈನಾಮಿಕ್, ಸರ್ವರ್-ಜೆನರೇಟೆಡ್ ಮ್ಯಾಪ್‌ಗಳು
ಅತ್ಯಂತ ಶಕ್ತಿಯುತ ಡಿಪ್ಲಾಯ್ಮೆಂಟ್ ಪ್ಯಾಟರ್ನ್‌ಗಳಲ್ಲಿ ಒಂದೆಂದರೆ ನಿಮ್ಮ HTML ಫೈಲ್‌ನಲ್ಲಿ ಸ್ಥಿರವಾದ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಅನ್ನು ಹೊಂದಿಲ್ಲದಿರುವುದು. ಬದಲಾಗಿ, ನಿಮ್ಮ ಸರ್ವರ್ ವಿನಂತಿಯ ಆಧಾರದ ಮೇಲೆ JSON ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ರಚಿಸಬಹುದು. ಇದು ಇದಕ್ಕೆ ಅನುಮತಿಸುತ್ತದೆ:
- ಪರಿಸರ ಸ್ವಿಚಿಂಗ್: `development` ಪರಿಸರದಲ್ಲಿ ಮಿನಿಫೈ ಮಾಡದ, ಸೋರ್ಸ್-ಮ್ಯಾಪ್ ಮಾಡಿದ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಮತ್ತು `production` ನಲ್ಲಿ ಮಿನಿಫೈ ಮಾಡಿದ, ಉತ್ಪಾದನೆಗೆ ಸಿದ್ಧವಾದ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಸರ್ವ್ ಮಾಡಿ.
- ಬಳಕೆದಾರ-ಪಾತ್ರ-ಆಧಾರಿತ ಮಾಡ್ಯೂಲ್‌ಗಳು: ನಿರ್ವಾಹಕ ಬಳಕೆದಾರರು ನಿರ್ವಾಹಕ-ಮಾತ್ರ ಪರಿಕರಗಳಿಗೆ ಮ್ಯಾಪಿಂಗ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಅನ್ನು ಪಡೆಯಬಹುದು.
- ಸ್ಥಳೀಕರಣ: ಬಳಕೆದಾರರ `Accept-Language` ಹೆಡರ್ ಆಧಾರದ ಮೇಲೆ `translations` ಮಾಡ್ಯೂಲ್ ಅನ್ನು ವಿಭಿನ್ನ ಫೈಲ್‌ಗಳಿಗೆ ಮ್ಯಾಪ್ ಮಾಡಿ.
ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸಂಭಾವ್ಯ ಅಪಾಯಗಳು
ಯಾವುದೇ ಶಕ್ತಿಯುತ ಸಾಧನದಂತೆ, ಅನುಸರಿಸಬೇಕಾದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ತಪ್ಪಿಸಬೇಕಾದ ಅಪಾಯಗಳಿವೆ.
- ಓದಬಲ್ಲಂತೆ ಇರಿಸಿ: ನೀವು ಬಹಳ ಆಳವಾದ ಮತ್ತು ಸಂಕೀರ್ಣ ಸ್ಕೋಪ್ ಹೈರಾರ್ಕಿಗಳನ್ನು ರಚಿಸಬಹುದಾದರೂ, ಡೀಬಗ್ ಮಾಡಲು ಕಷ್ಟವಾಗಬಹುದು. ನಿಮ್ಮ ಅಗತ್ಯಗಳನ್ನು ಪೂರೈಸುವ ಸರಳವಾದ ಸ್ಕೋಪ್ ರಚನೆಗಾಗಿ ಶ್ರಮಿಸಿ. ನಿಮ್ಮ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ JSON ಸಂಕೀರ್ಣವಾದರೆ ಕಾಮೆಂಟ್ ಮಾಡಿ.
- ಪಾಥ್‌ಗಳಿಗೆ ಯಾವಾಗಲೂ ಕೊನೆಯ ಸ್ಲ್ಯಾಷ್‌ಗಳನ್ನು ಬಳಸಿ: ಪಾಥ್ ಪ್ರಿಫಿಕ್ಸ್ (ಡೈರೆಕ್ಟರಿ) ಅನ್ನು ಮ್ಯಾಪ್ ಮಾಡುವಾಗ, ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ನಲ್ಲಿನ ಕೀ ಮತ್ತು URL ಮೌಲ್ಯ ಎರಡೂ `/` ನೊಂದಿಗೆ ಕೊನೆಗೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಆ ಡೈರೆಕ್ಟರಿಯೊಳಗಿನ ಎಲ್ಲಾ ಫೈಲ್‌ಗಳಿಗೆ ಹೊಂದಾಣಿಕೆಯ ಅಲ್ಗಾರಿದಮ್ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಇದನ್ನು ಮರೆಯುವುದು ಸಾಮಾನ್ಯ ದೋಷಗಳ ಮೂಲವಾಗಿದೆ.
- ಅಪಾಯ: ಆನುವಂಶಿಕವಲ್ಲದ ಬಲೆ: ನೆನಪಿಡಿ, ನಿರ್ದಿಷ್ಟ ಸ್ಕೋಪ್ ಕಡಿಮೆ ನಿರ್ದಿಷ್ಟ ಒಂದರಿಂದ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುವುದಿಲ್ಲ. ಇದು ಜಾಗತಿಕ `imports` ಗೆ ಮಾತ್ರ ಹಿಂತಿರುಗುತ್ತದೆ. ನೀವು ರೆಸಲ್ಯೂಶನ್ ಸಮಸ್ಯೆಯನ್ನು ಡೀಬಗ್ ಮಾಡುತ್ತಿದ್ದರೆ, ಯಾವಾಗಲೂ ಮೊದಲು ಒಂದೇ ಗೆಲ್ಲುವ ಸ್ಕೋಪ್ ಅನ್ನು ಗುರುತಿಸಿ.
- ಅಪಾಯ: ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಅನ್ನು ಸಂಗ್ರಹಿಸುವುದು (ಕ್ಯಾಶಿಂಗ್): ನಿಮ್ಮ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಮಾಡ್ಯೂಲ್ ಗ್ರಾಫ್‌ಗೆ ಪ್ರವೇಶ ಬಿಂದುವಾಗಿದೆ. ನೀವು ನಕ್ಷೆಯಲ್ಲಿ ಮಾಡ್ಯೂಲ್‌ನ URL ಅನ್ನು ನವೀಕರಿಸಿದರೆ, ಬಳಕೆದಾರರು ಹೊಸ ನಕ್ಷೆಯನ್ನು ಪಡೆಯುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬೇಕು. ಮುಖ್ಯ `index.html` ಫೈಲ್ ಅನ್ನು ಹೆಚ್ಚು ಸಂಗ್ರಹಿಸದಿರುವುದು ಅಥವಾ ವಿಷಯದ ಹ್ಯಾಶ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ URL ನಿಂದ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಅನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಲೋಡ್ ಮಾಡುವುದು ಸಾಮಾನ್ಯ ತಂತ್ರವಾಗಿದೆ, ಆದರೂ ಮೊದಲನೆಯದು ಹೆಚ್ಚು ಸಾಮಾನ್ಯವಾಗಿದೆ.
- ಡೀಬಗ್ ಮಾಡುವುದು ನಿಮ್ಮ ಸ್ನೇಹಿತ: ಮಾಡ್ಯೂಲ್ ಸಮಸ್ಯೆಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಆಧುನಿಕ ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು ಅತ್ಯುತ್ತಮವಾಗಿವೆ. ನೆಟ್‌ವರ್ಕ್ ಟ್ಯಾಬ್‌ನಲ್ಲಿ, ಪ್ರತಿ ಮಾಡ್ಯೂಲ್‌ಗಾಗಿ ಯಾವ URL ಅನ್ನು ವಿನಂತಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ನೀವು ನಿಖರವಾಗಿ ನೋಡಬಹುದು. ಕನ್ಸೋಲ್‌ನಲ್ಲಿ, ರೆಸಲ್ಯೂಶನ್ ದೋಷಗಳು ಯಾವ ಸ್ಪೆಸಿಫೈಯರ್ ಯಾವ ಇಂಪೋರ್ಟ್ ಮಾಡುವ ಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ ಪರಿಹರಿಸಲು ವಿಫಲವಾಗಿದೆ ಎಂಬುದನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ತಿಳಿಸುತ್ತವೆ.
ತೀರ್ಮಾನ: ಬಿಲ್ಡ್-ಲೆಸ್ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಭವಿಷ್ಯ
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ಗಳು, ಮತ್ತು ವಿಶೇಷವಾಗಿ ಅವುಗಳ `scopes` ವೈಶಿಷ್ಟ್ಯವು, ಫ್ರಂಟ್‌ಎಂಡ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಮಾದರಿ ಬದಲಾವಣೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಅವು ಒಂದು ಮಹತ್ವದ ತರ್ಕದ ತುಣುಕನ್ನು — ಮಾಡ್ಯೂಲ್ ರೆಸಲ್ಯೂಶನ್ — ಪೂರ್ವ-ಕಂಪೈಲೇಶನ್ ಬಿಲ್ಡ್ ಹಂತದಿಂದ ನೇರವಾಗಿ ಬ್ರೌಸರ್-ಸ್ಥಳೀಯ ಮಾನದಂಡಕ್ಕೆ ಸರಿಸುತ್ತವೆ. ಇದು ಕೇವಲ ಅನುಕೂಲಕ್ಕಾಗಿ ಅಲ್ಲ; ಇದು ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ, ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಸ್ಥಿತಿಸ್ಥಾಪಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದರ ಬಗ್ಗೆ.
ಮಾಡ್ಯೂಲ್ ರೆಸಲ್ಯೂಶನ್ ಕ್ರಮಾನುಗತವು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನಾವು ನೋಡಿದ್ದೇವೆ: ಅತ್ಯಂತ ನಿರ್ದಿಷ್ಟ ಸ್ಕೋಪ್ ಪಾಥ್ ಯಾವಾಗಲೂ ಗೆಲ್ಲುತ್ತದೆ, ಮತ್ತು ಇದು ಜಾಗತಿಕ `imports` ಆಬ್ಜೆಕ್ಟ್‌ಗೆ ಹಿಂತಿರುಗುತ್ತದೆ, ಪೋಷಕ ಸ್ಕೋಪ್‌ಗಳಿಗೆ ಅಲ್ಲ. ಈ ಸರಳ ಆದರೆ ಶಕ್ತಿಯುತ ನಿಯಮವು ಮೈಕ್ರೋ-ಫ್ರಂಟ್‌ಎಂಡ್‌ಗಳಂತಹ ಅತ್ಯಾಧುನಿಕ ಅಪ್ಲಿಕೇಶನ್ ವಾಸ್ತುಶಿಲ್ಪಗಳ ರಚನೆಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ ಮತ್ತು ಆಶ್ಚರ್ಯಕರ ಸುಲಭವಾಗಿ A/B ಪರೀಕ್ಷೆಯಂತಹ ಕ್ರಿಯಾತ್ಮಕ ನಡವಳಿಕೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
ವೆಬ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಪ್ರಬುದ್ಧವಾಗುತ್ತಾ ಸಾಗುತ್ತಿರುವಂತೆ, ಅಭಿವೃದ್ಧಿಗಾಗಿ ಭಾರೀ, ಸಂಕೀರ್ಣ ಬಿಲ್ಡ್ ಪರಿಕರಗಳ ಮೇಲಿನ ಅವಲಂಬನೆಯು ಕಡಿಮೆಯಾಗುತ್ತಿದೆ. ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್‌ಗಳು ಈ "ಬಿಲ್ಡ್-ಲೆಸ್" ಭವಿಷ್ಯದ ಮೂಲಾಧಾರವಾಗಿದ್ದು, ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಸರಳ, ವೇಗವಾದ ಮತ್ತು ಹೆಚ್ಚು ಪ್ರಮಾಣೀಕೃತ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತವೆ. ಸ್ಕೋಪ್‌ಗಳು ಮತ್ತು ರೆಸಲ್ಯೂಶನ್ ಕ್ರಮಾನುಗತದ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಹೊಸ ಬ್ರೌಸರ್ API ಅನ್ನು ಕಲಿಯುತ್ತಿಲ್ಲ; ಜಾಗತಿಕ ವೆಬ್‌ಗಾಗಿ ಮುಂದಿನ ಪೀಳಿಗೆಯ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನೀವು ನಿಮ್ಮನ್ನು ಸಜ್ಜುಗೊಳಿಸುತ್ತಿದ್ದೀರಿ.