Node.js භාවිතා කිරීමට එදිරිව ES6 ආනයනය / අපනයනය අවශ්‍ය වේ


955

මම සහයෝගයෙන් කටයුතු කරන ව්‍යාපෘතියක, අපට භාවිතා කළ හැකි මොඩියුල පද්ධතිය පිළිබඳ තේරීම් දෙකක් තිබේ:

  1. භාවිතා කරමින් මොඩියුල ආනයනය කිරීම requireසහ භාවිතයෙන් අපනයනය කිරීම module.exportsසහ exports.foo.
  2. ES6 භාවිතා කරමින් මොඩියුල ආනයනය කිරීම importසහ ES6 භාවිතයෙන් අපනයනය කිරීමexport

එකක් අනෙකට වඩා භාවිතා කිරීමෙන් කාර්ය සාධන ප්‍රතිලාභ තිබේද? අපි නෝඩ් ඒවාට වඩා ES6 මොඩියුල භාවිතා කරන්නේ නම් අප දැනගත යුතු වෙනත් යමක් තිබේද?


9
node --experimental-modules index.mjsimportබාබෙල් නොමැතිව භාවිතා කිරීමට ඔබට ඉඩ සලසන අතර 8.5.0+ නෝඩ් හි ක්‍රියා කරයි. පැරණි ක්‍රමයට පසුපසට ගැළපෙන පරිදි ඔබේ එන්පීඑම් පැකේජ ස්වදේශීය ඊඑස් මොඩියුලය ලෙස ප්‍රකාශයට පත් කළ හැකිය (සහ කළ යුතුය) require.
ඩෑන් ඩස්කල්ස්කු

Answers:


749

එකක් අනෙකට වඩා භාවිතා කිරීමෙන් කාර්ය සාධන ප්‍රතිලාභ තිබේද?

ES6 මොඩියුල සඳහා ස්වදේශීයව සහය දක්වන ජාවාස්ක්‍රිප්ට් එන්ජිමක් තවමත් නොමැති බව මතක තබා ගන්න. ඔබ බාබෙල් භාවිතා කරන බව ඔබම කියා ගත්තා. බාබෙල් වැළඳ importහා exportCommonJS (ප්රකාශය කළේ require/ module.exportsපෙරනිමි කිසිඳු). එබැවින් ඔබ ES6 මොඩියුලය සින්ටැක්ස් භාවිතා කළත්, ඔබ කේතය නෝඩ් හි ධාවනය කරන්නේ නම්, ඔබ හුඩ් යටතේ පොදු ජේඑස් භාවිතා කරනු ඇත.

CommonJS සහ ES6 මොඩියුල අතර තාක්ෂණික වෙනස්කම් ඇත, උදා: CommonJS මඟින් මොඩියුල ගතිකව පැටවීමට ඔබට ඉඩ සලසයි. ES6 මෙයට ඉඩ නොදේ, නමුත් ඒ සඳහා සංවර්ධනයේ API ඇත .

ES6 මොඩියුලයන් සම්මතයේ කොටසක් බැවින් මම ඒවා භාවිතා කරමි.


යාවත්කාලීන කිරීම 2020

Node v12 සිට, ඊඑස් මොඩියුල සඳහා සහය පෙරනිමියෙන් සක්‍රීය කර ඇත, නමුත් මෙය ලියන අවස්ථාවේ දී එය තවමත් පර්යේෂණාත්මක ය. නෝඩ් මොඩියුල ඇතුළු ලිපිගොනු අවසන් විය යුතුය .mjsහෝ ළඟම ඇති package.jsonගොනුවේ අඩංගු විය යුතුය "type": "module". මෙම node එකක් මතම ඊට අදාල ලියකියවිලි ද CommonJS හා ES මොඩියුල අතර interop ගැන ටොන් වැඩි විස්තර, ඇත.

කාර්ය සාධනය අනුව සෑම විටම නව විශේෂාංග පවතින විශේෂාංග තරම් ප්‍රශස්තිකරණය නොකිරීමේ අවස්ථාව තිබේ. කෙසේ වෙතත්, මොඩියුල ගොනු තක්සේරු කරනු ලබන්නේ එක් වරක් පමණක් බැවින්, කාර්ය සාධන අංගය නොසලකා හැරිය හැක. කෙසේ වෙතත් නිශ්චිත පිළිතුරක් ලබා ගැනීම සඳහා ඔබ මිණුම් සලකුණු ධාවනය කළ යුතුය.

ES මොඩියුලයන් import()ශ්‍රිතය හරහා ගතිකව පැටවිය හැකිය . මෙන් නොව require, මෙය පොරොන්දුවක් ලබා දෙයි.


16
භාවිතා කිරීමට මම උත්සාහ ES6 importසමග requireනමුත් ඔවුන් වෙනස් වැඩ කළා. CommonJS විසින් පන්තිය අපනයනය කරන අතර එක් පන්තියක් පමණක් ඇත. ES6 අපනයන බහුවිධ පංති ඇති බැවින් .ClassNameඅපනයන පන්තිය ලබා ගැනීමට ඔබ භාවිතා කළ යුතුය. ක්‍රියාත්මක කිරීමට සැබවින්ම බලපාන වෙනත් වෙනස්කම් තිබේද
Thellimist

79
NtEntei: ඔබට පෙරනිමි අපනයනයක් අවශ්‍ය බව පෙනේ, නම් කරන ලද අපනයනයක් නොවේ. module.exports = ...;සමාන වේ export default .... exports.foo = ...සමාන වේ export var foo = ...;
ෆීලික්ස් ක්ලින්ග්

11
importවෙබ් පැක් 2 / රෝල්අප් (සහ ඊඑස් 6 ගස් සෙලවීමට ඉඩ සලසන වෙනත් ඕනෑම බණ්ඩලයක්) සමඟ භාවිතා කරන බාබෙල් අවසානයේ නෝඩ් හි පොදු ජේඑස් වෙත සම්ප්‍රේෂණය කළද, සමාන කේතයක් වන නෝඩ් ක්‍රන්ච් වලට වඩා සැලකිය යුතු තරම් කුඩා ගොනුවක් සමඟ සුළං හමන්නට පුළුවන. ආනයන / අපනයන ස්ථිතික විශ්ලේෂණයට ES6 ඉඩ ලබා දෙන කාරණය නිසාrequire හරියටම භාවිතා කිරීමෙන් . මෙය නෝඩ් (තවමත්) හි වෙනසක් සිදු නොකරන අතර, කේතය අවසානයේ තනි බ්‍රව්සර් මිටියක් ලෙස හමා එන්නේ නම් එය නිසැකවම කළ හැකිය.
ලී බෙන්සන්

5
ඔබට ගතික ආනයනයක් කිරීමට අවශ්‍ය නොවන්නේ නම්
chulian

3
ES6 මොඩියුලයන් නවතම V8 හි ඇති අතර ධජ පිටුපස ඇති වෙනත් බ්‍රව්සර් වෙතද පැමිණේ. බලන්න: medium.com/dev-channel/…
Nexii Malthus

184

ඔබට සලකා බැලිය යුතු භාවිත / හැකියාවන් කිහිපයක් තිබේ:

අවශ්‍යයි:

  • පටවන ලද මොඩියුලයේ නම පූර්ව නිශ්චිත / ස්ථිතික නොවන තැනක හෝ ඔබ මොඩියුලයක් කොන්දේසි සහිතව පටවන තැනක “සැබවින්ම අවශ්‍ය නම්” (ඇතැම් කේත ප්‍රවාහ මත පදනම්ව) ඔබට ගතික පැටවීමක් කළ හැකිය.
  • පැටවීම සමමුහුර්ත වේ. ඒ කියන්නේ ඔබට බහු requires තිබේ නම්, ඒවා එකින් එක පටවා සකසනු ලැබේ.

ES6 ආනයන:

  • ඔබට අවශ්‍ය කෑලි පමණක් තෝරා බේරා ගැනීමට ඔබට නම් කළ ආනයන භාවිතා කළ හැකිය. එමගින් මතකය සුරැකිය හැකිය.
  • ආනයනය අසමමුහුර්ත විය හැකිය (සහ වර්තමාන ES6 මොඩියුලය පූරණය කිරීමේදී එය ඇත්ත වශයෙන්ම වේ) සහ ඊට වඩා හොඳ කාර්ය සාධනයක් කළ හැකිය.

එසේම, අවශ්‍ය මොඩියුල පද්ධතිය සම්මත මත පදනම් නොවේ. ES6 මොඩියුල පවතින බැවින් දැන් සම්මත වීමට බොහෝ දුරට ඉඩ නැත. අනාගතයේදී විවිධ ක්‍රියාත්මක කිරීම් වලදී ES6 මොඩියුල සඳහා ස්වදේශීය සහාය ලැබෙනු ඇති අතර එය කාර්ය සාධනය අනුව වාසිදායක වනු ඇත.


16
ES6 ආනයන අසමමුහුර්ත යැයි ඔබ සිතන්නේ කුමක් ද?
ෆීලික්ස් ක්ලින්ග්

5
El ෆීලික්ස්ක්ලින් - විවිධ නිරීක්ෂණවල සංයෝජනය. ජේඑස්පීඑම් භාවිතා කිරීම (ඊඑස් 6 මොඩියුලය ලෝඩර් ...) ආනයනයක් මගින් ගෝලීය නාම අවකාශය වෙනස් කළ විට එහි බලපෑම වෙනත් ආනයන තුළ දක්නට නොලැබෙන බව මම දුටුවෙමි (ඒවා අසමමුහුර්තව සිදුවන නිසා .. මෙය පාරදෘශ්‍ය කේතයෙන් ද දැකිය හැකිය). එසේම, එම හැසිරීම නිසා (1 ආනයනය අනෙක් අයට බලපාන්නේ නැත) එසේ නොකිරීමට කිසිදු හේතුවක් නැත, එබැවින් එය ක්‍රියාත්මක කිරීම මත රඳා පැවතිය හැකිය
අමිත්

36
ඔබ ඉතා වැදගත් දෙයක් සඳහන් කරයි: මොඩියුල පැටවුම. ES6 ආනයන හා අපනයන සින්ටැක්ස් සපයන අතර, මොඩියුල පැටවිය යුතු ආකාරය එය අර්ථ දක්වන්නේ නැත. වැදගත් කොටස නම් ප්‍රකාශන සංඛ්‍යාත්මකව විශ්ලේෂණය කළ හැකි වන අතර එමඟින් කේතය ක්‍රියාත්මක නොකර පරායත්තතා තීරණය කළ හැකිය. මොඩියුලය පැටවන්නාට මොඩියුලයක් සමමුහුර්තව හෝ අසමමුහුර්තව පැටවීමට මෙය ඉඩ දෙයි. නමුත් ES6 මොඩියුලයන් සමමුහුර්ත හෝ අසමමුහුර්ත නොවේ.
ෆීලික්ස් ක්ලින්ග්

5
El ෆීලික්ස්ක්ලිං ඊඑස් 6 මොඩියුලය ලෝඩරය OP හි ටැග් කර ඇති බැවින් එය පිළිතුරට අදාළ වේ යැයි සිතමි. නිරීක්ෂණ මත පදනම්ව වර්තමාන හැසිරීම මෙන්ම අනාගතයේ (ඕනෑම ක්‍රියාවට නැංවීමේදී) ඇති හැකියාව ද සලකා බැලිය යුතු කරුණක් බව මම ප්‍රකාශ කළෙමි. ඔබ සිතන්නේ එය වැරදියි කියාද?
අමිත්

10
මොඩියුල පද්ධතිය / සින්ටැක්ස් මොඩියුල ලෝඩරය සමඟ සම්බන්ධ නොකිරීම වැදගත් යැයි මම සිතමි. උදා: ඔබ නෝඩ් සඳහා සංවර්ධනය කරන්නේ නම්, ඔබ requireකෙසේ හෝ ES6 මොඩියුල සම්පාදනය කරනු ඇත , එබැවින් ඔබ කෙසේ හෝ Node හි මොඩියුල පද්ධතිය සහ පැටවුම භාවිතා කරයි.
ෆීලික්ස් ක්ලින්ග්

41

ප්රධාන වාසි සින්ටැක්ටික් ය:

  • වඩාත් ප්‍රකාශන / සංයුක්ත සින්ටැක්ස්
  • ES6 මොඩියුලයන් මූලික වශයෙන් UMD (විශ්ව මොඩියුල අර්ථ දැක්වීම) යල් පැන ගිය එකක් බවට පත් කරනු ඇත - මූලික වශයෙන් CommonJS සහ AMD (සේවාදායක එදිරිව බ්‍රව්සරය) අතර ඇති භේදය ඉවත් කරයි.

ES6 මොඩියුල සමඟ කිසිදු කාර්ය සාධන ප්‍රතිලාභයක් ඔබට නොපෙනේ. බ්‍රව්සරයේ ES6 විශේෂාංග සඳහා පූර්ණ සහය තිබියදීත්, මොඩියුල එකතු කිරීම සඳහා ඔබට අමතර පුස්තකාලයක් අවශ්‍ය වේ.


4
බ්‍රව්සරයේ සම්පූර්ණ ES6 මොඩියුල සහය තිබියදීත් යමෙකුට බණ්ඩලයක් අවශ්‍ය වන්නේ මන්දැයි ඔබට පැහැදිලි කළ හැකිද?
ඊ. සුන්ඩින්

1
සමාව ඉල්ලීම, වඩාත් අර්ථවත් කිරීම සඳහා සංස්කරණය කරන ලදි. මා අදහස් කළේ ආනයන / අපනයන මොඩියුල විශේෂාංගය කිසිදු බ්‍රව්සරයක දේශීයව ක්‍රියාත්මක නොවන බවයි. ප්‍රවාහකයෙකු තවමත් අවශ්‍ය වේ.
snozza

16
එය මට තරමක් පරස්පර විරෝධී බවක් පෙනේ. තිබේ නම්, පූර්ණ සහයෝගය පසුව කුමක් bundler අරමුණ? ES6 පිරිවිතරයේ යමක් අස්ථානගත වී තිබේද? සම්පුර්ණයෙන්ම සහය දක්වන පරිසරයක නොමැති බණ්ඩලර් ඇත්ත වශයෙන්ම කරන්නේ කුමක්ද?
ඊ. සුන්ඩින්

1
ස්නොසා පැවසූ පරිදි ... "ආනයන / අපනයන මොඩියුල විශේෂාංගය කිසිදු බ්‍රව්සරයක අ
ive ාන ලෙස

2
ඔබට තවදුරටත් අමතර පුස්තකාල අවශ්‍ය නොවේ. V8.5.0 සිට (වසරකට පෙර නිකුත් කරන ලදි), බාබෙල් නොමැතිව node --experimemntal-modules index.mjsභාවිතා කිරීමට ඔබට ඉඩ සලසයි import. පැරණි ක්‍රමයට පසුපසට ගැළපෙන පරිදි ඔබේ එන්පීඑම් පැකේජ ස්වදේශීය ඊඑස් මොඩියුලය ලෙස ප්‍රකාශයට පත් කළ හැකිය (සහ කළ යුතුය) require. බොහෝ බ්‍රව්සර් ස්වදේශීයව ගතික ආනයන සඳහා ද සහාය වේ.
ඩෑන් ඩස්කල්ස්කු

38

එකක් අනෙකට වඩා භාවිතා කිරීමෙන් කාර්ය සාධන ප්‍රතිලාභ තිබේද?

වර්තමාන පිළිතුර නැත, මන්ද වර්තමාන බ්‍රව්සර් එන්ජින් කිසිවක් import/exportES6 ප්‍රමිතියෙන් ක්‍රියාත්මක නොවන බැවිනි.

සමහර සංසන්දනාත්මක ප්‍රස්ථාර http://kangax.github.io/compat-table/es6/ මෙය සැලකිල්ලට නොගන්න, එබැවින් ඔබ ක්‍රෝම් සඳහා හරිතයන් සියල්ලම පාහේ දකින විට ප්‍රවේශම් වන්න. importES6 හි මූල පදය සැලකිල්ලට ගෙන නොමැත.

වෙනත් වචන වලින් කිවහොත්, V8 ඇතුළු වත්මන් බ්රවුසරය එන්ජින් ආනයනය කළ නොහැකි නව JavaScript ගොනුව සිට ප්රධාන JavaScript ගොනුව ඕනෑම ජාවාස්ක්රිප්ට් නියෝගයක් හරහා.

(අපි තවමත් දෝෂ කිහිපයක් පමණක් විය හැකිය ES6 පිරිවිතරයන්ට අනුව V8 ක්‍රියාත්මක කරන තෙක් හෝ අවුරුදු ගණනක් away තින් සිටිය හැකිය.)

මෙම ලේඛනය අපට අවශ්‍ය දේ වන අතර මෙම ලේඛනය අප කීකරු විය යුතුය.

ඊඑස් 6 ප්‍රමිතියෙන් කියැවුණේ සී (ක්‍රමලේඛන භාෂාව) වැනි මොඩියුලය කියවීමට පෙර මොඩියුලයේ පරායත්තතා තිබිය යුතු බවයි. .h ලිපිගොනු .

මෙය හොඳ සහ හොඳින් පරීක්ෂා කරන ලද ව්‍යුහයක් වන අතර, ES6 ප්‍රමිතිය නිර්මාණය කළ විශේෂ experts යින්ගේ මතකයේ ඇති බව මට විශ්වාසයි.

සමහර විශේෂ අවස්ථා වලදී බණ්ඩලය ප්‍රශස්තිකරණය කිරීමට වෙබ් පැක් හෝ වෙනත් පැකේජ බැඳුම්කරයන්ට හැකි වන්නේ මෙයයි, සහ අවශ්‍ය නොවන මිටියෙන් යම් පරායත්තතාවයන් අඩු කරයි. නමුත් අපට පරිපූර්ණ පරායත්තතා ඇති විට මෙය කිසි විටෙකත් සිදු නොවේ.

import/exportස්වදේශීය සහාය සජීවීව පවතින තෙක් එයට යම් කාලයක් අවශ්‍ය වන අතර, requireමූලික පදය දිගු කලක් කොතැනකවත් නොයනු ඇත.

කුමක්ද require?

node.jsමොඩියුල පැටවීමේ ක්‍රමය මෙයයි . ( https://github.com/nodejs/node )

ලිපිගොනු කියවීම සඳහා පද්ධති මට්ටමේ ක්‍රම භාවිතා කරයි. භාවිතා කරන විට ඔබ මූලික වශයෙන් ඒ මත විශ්වාසය තබයි require. requireවැනි සමහර පද්ධති ඇමතුම් වලින් අවසන් වේuv_fs_openජාවාස්ක්‍රිප්ට් ගොනුව / මොඩියුලය පූරණය කිරීම සඳහා (අවසන් පද්ධතිය, ලිනක්ස්, මැක්, වින්ඩෝස් මත රඳා පවතී) අවසන් වේ.

මෙය සත්‍යයක් දැයි පරීක්ෂා කිරීමට, බාබෙල්.ජේ භාවිතා කිරීමට උත්සාහ කරන්න, එවිට importමූලික පදය බවට පරිවර්තනය වන බව ඔබට පෙනෙනු ඇත require.

රූප විස්තරය මෙහි ඇතුළත් කරන්න


2
ඇත්ත වශයෙන්ම, කාර්ය සාධනය වැඩි දියුණු කළ හැකි එක් අංශයක් ඇත - මිටි ප්‍රමාණය. importවෙබ් පැක් 2 / රෝල්අප් සෑදීමේ ක්‍රියාවලියක් භාවිතා කිරීමෙන් එහි ප්‍රති file ලයක් ලෙස ඇති ගොනු ප්‍රමාණය 'ගස් සෙලවීම' භාවිතයට නොගත් මොඩියුල / කේත මගින් අඩු කළ හැකිය. කුඩා ගොනු ප්‍රමාණය = බාගත කිරීමට වේගවත් = සේවාදායකයා මත ආරම්භ කිරීමට / ක්‍රියාත්මක කිරීමට වේගවත්.
ලී බෙන්සන්

2
තර්කානුකූලව පෘථිවියේ වර්තමාන බ්‍රව්සරයක් නොතිබුණි import . නැතහොත් මෙයින් අදහස් කරන්නේ ඔබට ජාවාස්ක්‍රිප්ට් ගොනුවකින් වෙනත් ජාවාස්ක්‍රිප්ට් ගොනුවක් ආයාත කළ නොහැකි බවයි. මේ දෙකෙහි කාර්ය සාධන ප්‍රතිලාභ ඔබට සැසඳිය නොහැක්කේ මේ නිසා ය. නමුත් ඇත්ත වශයෙන්ම, Webpack1 / 2 හෝ Browserify වැනි මෙවලම් සම්පීඩනය සමඟ කටයුතු කළ හැකිය. ඒවා බෙල්ලෙන් බෙල්ලට: gist.github.com/substack/68f8d502be42d5cd4942
prosti

4
ඔබ 'ගස් සෙලවීම' නොසලකා හැර ඇත. ඔබේ සාරාංශ සබැඳියේ කිසිම තැනක ගස් සෙලවීම ගැන සාකච්ඡා කර නැත. නිසා ES6 මොඩියුල භාවිතා කරමින්, එය සක්රීය importසහ exportබැවින්ද, නිශ්චිත කේතය මාර්ගය ආනයනය කරන ස්ථිතික ප්රකාශ වේ requireගතික විය යුතු අතර ඒ අනුව භාවිතා නැහැ බව කේතය දී ලැබුනු හැක. කාර්ය සාධනය ප්රතිලාභ indirect-- Webpack 2 සහ / හෝ Rollup හැක හැකි වේගවත් බාගත කිරීම සඳහා බව කුඩා මිටියක් ප්රමාණ හේතු අතර, එම නිසා අවසාන පරිශීලක (අ බ්රව්සරයේ) වෙත snappier පෙනී යයි. මෙය ක්‍රියාත්මක වන්නේ සියලුම කේත ES6 මොඩියුලවල ලියා ඇත්නම් පමණි. එබැවින් ආනයන සංඛ්‍යානමය වශයෙන් විශ්ලේෂණය කළ හැකිය.
ලී බෙන්සන්

2
මම පිළිතුර යාවත්කාලීන කළෙමි e ලීබෙන්සන්, බ්‍රව්සර් එන්ජින් වලින් ලැබෙන දේශීය සහයෝගය සලකා බැලුවහොත් අපට තවමත් සැසඳිය නොහැක. වෙබ් පැක් භාවිතා කරමින් හුරුබුහුටි තුන් සෙලවීමේ විකල්පයක් ලෙස අප පොදු ජේඑස් මොඩියුල සැකසීමට පෙර සිටම සාක්ෂාත් කරගත හැකිය, මන්ද බොහෝ සැබෑ යෙදුම් සඳහා මොඩියුල භාවිතා කළ යුත්තේ කුමක් දැයි අපි දනිමු.
prosti

1
ඔබේ පිළිතුර මුළුමනින්ම වලංගු වේ, නමුත් මම හිතන්නේ අපි වෙනස් ලක්ෂණ දෙකක් සංසන්දනය කරමු. සියල්ල import/export පරිවර්තනය කර ඇත require, ලබා දී ඇත. නමුත් මෙම පියවරට පෙර සිදුවන දේ "කාර්ය සාධනය" වැඩි දියුණු කිරීමක් ලෙස සැලකිය හැකිය. උදාහරණය: lodashES6 සහ ඔබ තුළ ලියා ඇත්නම් import { omit } from lodash, අවසාන මිටියේ අඩංගු වන්නේ 'අතහරින්න' මිස අනෙක් උපයෝගිතා නොවේ, සරල එකක් require('lodash')මඟින් සියල්ල ආනයනය කරයි. මෙය මිටි ප්‍රමාණය වැඩි කරයි, බාගත කිරීමට වැඩි කාලයක් ගත වේ, එබැවින් කාර්ය සාධනය අඩු වේ. ඇත්ත වශයෙන්ම මෙය වලංගු වන්නේ බ්‍රව්සර් සන්දර්භය තුළ පමණි.
ලී බෙන්සන්

33

ES6 මොඩියුල භාවිතා කිරීම 'ගස් සෙලවීම' සඳහා ප්‍රයෝජනවත් වේ; එනම්, භාවිතා නොකරන / ආනයනය නොකරන ලද කේත මාර්ග හඳුනා ගැනීමට වෙබ් පැක් 2, රෝල්අප් (හෝ වෙනත් බණ්ඩලර්) සක්‍රීය කිරීම, එම නිසා එහි ප්‍රති ing ලයක් ලෙස ඇති මිටියට එය නොකරන්න. ඔබට කිසි විටෙකත් අවශ්‍ය නොවන කේතය ඉවත් කිරීමෙන් මෙය එහි ගොනු ප්‍රමාණය සැලකිය යුතු ලෙස අඩු කළ හැකිය, නමුත් පොදු ජේඑස් සමඟ පෙරනිමියෙන් එකතු වන්නේ වෙබ් පැක් සහ වෙනත් අයට එය අවශ්‍ය දැයි දැන ගැනීමට ක්‍රමයක් නොමැති බැවිනි.

කේත මාවතේ ස්ථිතික විශ්ලේෂණය භාවිතා කරමින් මෙය සිදු කෙරේ.

උදාහරණයක් ලෙස, භාවිතා කිරීම:

import { somePart } 'of/a/package';

... package.anotherPartඅවශ්‍ය නොවන ඉඟියක් බණ්ඩලය වෙත ලබා දෙයි (එය ආනයනය නොකළහොත් එය භාවිතා කළ නොහැක- හරිද?), එබැවින් එය බැඳීමට කරදර නොවනු ඇත.

වෙබ් පැක් 2 සඳහා මෙය සක්‍රීය කිරීම සඳහා, ඔබේ ප්‍රවාහකය පොදු ජේඑස් මොඩියුලයන් පිට නොකිරීමට වග බලා ගත යුතුය. ඔබ es2015බාබල් සමඟ ප්ලග් ඉන් භාවිතා කරන්නේ නම් , ඔබට එය එලෙස අක්‍රිය කළ හැකිය .babelrc:

{
  "presets": [
    ["es2015", { modules: false }],
  ]
}

රෝල්අප් සහ වෙනත් අය වෙනස් ආකාරයකින් ක්‍රියා කළ හැකිය - ඔබ කැමති නම් ලියකියවිලි බලන්න .


2
ගස් සෙලවීම සඳහා ද විශිෂ්ටයි 2ality.com/2015/12/webpack-tree-shaking.html
prosti

25

අසමමුහුර්ත හෝ කම්මැලි පැටවීම සම්බන්ධයෙන් ගත් විට, import ()එය වඩා බලවත් වේ. අපට සංරචකය අසමමුහුර්ත ආකාරයකින් අවශ්‍ය වන විට බලන්න, ඉන්පසු අපි importඑය constවිචල්‍ය භාවිතයේදී මෙන් යම් අසමමුහුර්ත ආකාරයකින් භාවිතා කරමු await.

const module = await import('./module.js');

නැතහොත් ඔබට භාවිතා කිරීමට අවශ්‍ය require()නම්,

const converter = require('./converter');

කාරණය යනු import()ස්වභාවයෙන්ම අසමසමයකි. ReactConf හි නීහාර් වෙනුගෝපාල් සඳහන් කළ පරිදි , සේවාදායක පාර්ශවයේ ගෘහ නිර්මාණ ශිල්පය සඳහා ප්‍රතික්‍රියා සංරචක ගතිකව පැටවීමට ඔබට එය භාවිතා කළ හැකිය.

එසේම එය රවුටින් වෙත පැමිණෙන විට වඩා හොඳය. පරිශීලකයා විශේෂිත වෙබ් අඩවියට එහි විශේෂිත අංගයට සම්බන්ධ වන විට අවශ්‍ය කොටස බාගත කිරීම සඳහා ජාල ලොග් බවට පත් කරන එක් විශේෂ දෙයක් එයයි. උදා: උපකරණ පුවරුවට පෙර පිවිසුම් පිටුව උපකරණ පුවරුවේ සියලුම අංග බාගත නොකරයි. වත්මන් අවශ්‍ය වන්නේ එනම් පිවිසුම් සංරචකය නිසා එය බාගත වනු ඇත.

පොදු exportජේඑස් සඳහා ES6 exportහරියටම සමාන වේ module.exports.

සටහන - ඔබ node.js ව්‍යාපෘතියක් සංවර්ධනය කරන්නේ නම්, ඔබ භාවිතා කළ යුතු require()ආකාරයට නෝඩ් ව්‍යතිරේක දෝෂයක් ඇති බැවින් invalid token 'import'ඔබ දැඩි ලෙස භාවිතා කළ importයුතුය. එබැවින් ආනයන ප්‍රකාශ සඳහා නෝඩ් සහාය නොදක්වයි.

යාවත්කාලීන කිරීම - ඩෑන් ඩස්කලෙස්කු යෝජනා කළ පරිදි : v8.5.0 සිට (2017 සැප්තැම්බර් නිකුත් කරන ලදි), බාබෙල් නොමැතිව node --experimental-modules index.mjsභාවිතා කිරීමට ඔබට ඉඩ සලසයි import. පැරණි ක්‍රමයට පසුපසට ගැළපෙන පරිදි ඔබේ එන්පීඑම් පැකේජ ස්වදේශීය ඊඑස් මොඩියුලය ලෙස ප්‍රකාශයට පත් කළ හැකිය (සහ කළ යුතුය) require.

අසංක ආනයන භාවිතා කළ යුතු ස්ථානය පිළිබඳ වැඩි විස්තර සඳහා මෙය බලන්න - https://www.youtube.com/watch?v=bb6RCrDaxhw


1
එබැවින් අවශ්‍යතාවය සමමුහුර්ත වී බලා සිටිය යුතුද?
බක්ලාසාන්

1
ඇත්ත වශයෙන්ම කිව හැකිය!
සැවේරි හමුවන්න

16

දැනගත යුතු වැදගත්ම දෙය නම් ES6 මොඩියුලයන් ඇත්ත වශයෙන්ම නිල ප්‍රමිතියක් වන අතර CommonJS (Node.js) මොඩියුලයන් නොවේ.

2019 දී ES6 මොඩියුල සඳහා බ්‍රව්සර් වලින් 84% ක් සහාය දක්වයි . Node.js ක පිටුපස අරන් ඒවා අතර --experimental-මොඩියුල ධජය, එහි ද නමින් පහසු node එකක් මතම ඊට අදාල ඇසුරුම් වේ esm ඒකාබද්ධ සුමට වන පරිදි,.

මෙම මොඩියුල පද්ධති අතර ඔබ ගැටීමට ඉඩ ඇති තවත් ගැටළුවක් වන්නේ කේත පිහිටීමයි. Node.js උපකල්පනය කරන්නේ ප්‍රභවය node_modulesනාමාවලියක තබා ඇති අතර බොහෝ ES6 මොඩියුලයන් පැතලි නාමාවලි ව්‍යුහයක් තුළ යොදවා ඇති බවයි. මේවා ප්‍රතිසන්ධානය කිරීම පහසු නැත, නමුත් එය ඔබගේ package.jsonගොනුව පෙර සහ පසු ස්ථාපන ස්ක්‍රිප්ට් මගින් අනවසරයෙන් හැක් කිරීමෙන් කළ හැකිය . මෙන්න උදාහරණ සමාවයවික මොඩියුලයක් සහ එය ක්‍රියාත්මක වන ආකාරය විස්තර කරන ලිපියක් .


15

මේ වන විට ES6 ආනයනය අනුව, අපනයනය සැමවිටම CommonJS වෙත සම්පාදනය කර ඇති බැවින් එකක් හෝ වෙනත් එකක් භාවිතා කිරීමෙන් කිසිදු ප්‍රතිලාභයක් නොමැත . ES6 භාවිතය නිර්දේශ කළද බ්‍රව්සර් වෙතින් ස්වදේශීය සහාය නිකුත් වූ විට එය වාසිදායක විය යුතුය. හේතුව, ඔබට පොදු ගොනුව සමඟ එක් ගොනුවකින් කොටස් ආනයනය කළ හැකි අතර ඔබට සියලු ගොනුව අවශ්‍ය වේ.

ES6 import, export default, export

CommonJS require, module.exports, exports.foo

පහත දැක්වෙන්නේ ඒවායේ පොදු භාවිතයයි.

ES6 අපනයන පෙරනිමිය

// hello.js
function hello() {
  return 'hello'
}
export default hello

// app.js
import hello from './hello'
hello() // returns hello

ES6 බහු අපනයනය සහ බහු ආනයනය

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
export { hello1, hello2 }

// app.js
import { hello1, hello2 } from './hello'
hello1()  // returns hello1
hello2()  // returns hello2

CommonJS module.exports

// hello.js
function hello() {
  return 'hello'
}
module.exports = hello

// app.js
const hello = require('./hello')
hello()   // returns hello

CommonJS module.exports බහු

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
module.exports = {
  hello1,
  hello2
}

// app.js
const hello = require('./hello')
hello.hello1()   // returns hello1
hello.hello2()   // returns hello2

8

මම පුද්ගලිකව ආනයනය භාවිතා කරමි, මන්ද අපට අවශ්‍ය ක්‍රම ආනයනය කළ හැකිය.

import {foo, bar} from "dep";

ගොනුවේ නම: dep.js

export foo function(){};
export const bar = 22

ණය පෝල් ෂාන්ට හිමිවේ. වැඩි විස්තර .


1
විශිෂ්ට තේරීමක්! ඔබ ද වේ පසු අනුකූල සමග, දේශීය ESModule ලෙස ඔබේ npm පැකේජ පළ පැරණි සඳහා requireමාර්ගය?
ඩෑන් ඩස්කලෙස්කු

7
අවශ්‍යතාවය පරිදි ඔබට එය කළ හැකිය!
සූයිස්

4
const {a,b} = require('module.js'); එසේම ක්‍රියාත්මක වේ ... ඔබ අපනයනය කරන්නේ නම් aසහb
කෙසෙල් ඇසිඩ්

module.exports = { a: ()={}, b: 22 }- ana බනානා ඇසිඩ් ප්‍රතිචාරයේ දෙවන කොටස
සෙත් මැක්ලේන්

0

(බොහෝ විට ප්‍රශස්තිකරණය - කම්මැලි පැටවීම?) එය එසේ ක්‍රියා කරන්නේ මන්දැයි නිශ්චිතවම කිව නොහැක, නමුත් importආනයනික මොඩියුල භාවිතා නොකරන්නේ නම් එය කේත විග්‍රහ නොකරනු ඇතැයි මම දුටුවෙමි .
සමහර අවස්ථාවල අපේක්ෂා කළ නොහැකි හැසිරීම.

අපගේ සාම්පල පරායත්තතාවය ලෙස වෛරයට පාත්‍ර වූ ෆූ පන්තිය ගන්න.

foo.ts

export default class Foo {}
console.log('Foo loaded');

උදාහරණයක් වශයෙන්:

index.ts

import Foo from './foo'
// prints nothing

index.ts

const Foo = require('./foo').default;
// prints "Foo loaded"

index.ts

(async () => {
    const FooPack = await import('./foo');
    // prints "Foo loaded"
})();

අනිත් අතට:

index.ts

import Foo from './foo'
typeof Foo; // any use case
// prints "Foo loaded"
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.