{"id":539,"date":"2025-12-06T16:05:10","date_gmt":"2025-12-06T08:05:10","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=539"},"modified":"2025-12-06T16:05:10","modified_gmt":"2025-12-06T08:05:10","slug":"%e5%89%8d%e7%ab%afjavascript%e6%a8%a1%e5%9d%97%e5%8c%96%e8%a7%a3%e6%9e%90%e4%b9%8besmodule%e7%94%a8%e6%b3%95%e7%a4%ba%e4%be%8b","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/%e5%89%8d%e7%ab%afjavascript%e6%a8%a1%e5%9d%97%e5%8c%96%e8%a7%a3%e6%9e%90%e4%b9%8besmodule%e7%94%a8%e6%b3%95%e7%a4%ba%e4%be%8b\/","title":{"rendered":"\u524d\u7aefJavaScript\u6a21\u5757\u5316\u89e3\u6790\u4e4bESModule\u7528\u6cd5\u793a\u4f8b"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd<strong>\u6700\u5b8c\u6574\u3001\u6700\u5bb9\u6613\u7406\u89e3\u7684 ESModule\uff08ESM\uff09\u7528\u6cd5\u89e3\u6790 + \u793a\u4f8b\u4ee3\u7801<\/strong>\uff0c\u524d\u7aef\u5f00\u53d1\u76f4\u63a5\u53ef\u7528\u3002<br>\u5305\u62ec\uff1a<\/p>\n\n\n\n<p>\u2705 \u57fa\u672c\u7528\u6cd5<br>\u2705 \u9ed8\u8ba4\u5bfc\u51fa<br>\u2705 \u5177\u540d\u5bfc\u51fa<br>\u2705 \u91cd\u547d\u540d\u5bfc\u5165<br>\u2705 \u7edf\u4e00\u5bfc\u5165<br>\u2705 \u4ece HTML \u4f7f\u7528 <code>&lt;script type=\"module\"&gt;<\/code><br>\u2705 \u8de8\u6587\u4ef6\u6a21\u5757\u6848\u4f8b<\/p>\n\n\n\n<p>\u975e\u5e38\u9002\u5408\u5165\u95e8\/\u590d\u4e60\/\u5199\u6587\u6863\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udd25 <strong>1. ESModule \u57fa\u672c\u8bed\u6cd5\u89c4\u5219<\/strong><\/h1>\n\n\n\n<p>ESModule \u4e3b\u8981\u901a\u8fc7\u4e24\u7c7b\u5173\u952e\u5b57\uff1a<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u5bfc\u51fa\uff08export\uff09<\/strong><\/h3>\n\n\n\n<p>\u628a\u53d8\u91cf\u3001\u51fd\u6570\u3001\u5bf9\u8c61\u3001\u7c7b\u66b4\u9732\u51fa\u53bb\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u5bfc\u5165\uff08import\uff09<\/strong><\/h3>\n\n\n\n<p>\u8ba9\u53e6\u5916\u4e00\u4e2a JS \u6587\u4ef6\u4f7f\u7528\u8fd9\u4e9b\u66b4\u9732\u5185\u5bb9\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udccc <strong>2. \u6700\u5e38\u7528\u7684\u51e0\u79cd\u5bfc\u51fa\u65b9\u5f0f<\/strong><\/h1>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u65b9\u5f0f A\uff1a\u5177\u540d\u5bfc\u51fa\uff08Named Export\uff09<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>utils.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport const PI = 3.14;\n\nexport function add(a, b) {\n  return a + b;\n}\n\nexport class Person {\n  constructor(name) {\n    this.name = name;\n  }\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>\u5f15\u5165\uff1amain.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { PI, add, Person } from &#039;.\/utils.js&#039;;\n\nconsole.log(PI);\nconsole.log(add(2, 3));\nconsole.log(new Person(&quot;Tom&quot;));\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u65b9\u5f0f B\uff1a\u9ed8\u8ba4\u5bfc\u51fa\uff08Default Export\uff09<\/strong><\/h2>\n\n\n\n<p>\u4e00\u4e2a\u6a21\u5757\u53ea\u80fd\u6709 <strong>\u4e00\u4e2a<\/strong> default\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>math.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport default function (a, b) {\n  return a * b;\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>\u5bfc\u5165\uff1a<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport multiply from &#039;.\/math.js&#039;;\n\nconsole.log(multiply(2, 5));\n\n<\/pre><\/div>\n\n\n<p>\u26a0\ufe0f \u6ce8\u610f\uff1a<br>default \u5bfc\u5165\u4e0d\u9700\u8981 <code>{}<\/code>\uff0c\u540d\u5b57\u53ef\u968f\u4fbf\u8d77\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u65b9\u5f0f C\uff1a\u5177\u540d + \u9ed8\u8ba4\u5bfc\u51fa\u6df7\u7528<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>lib.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport default function sayHello() {\n  console.log(&quot;Hello!&quot;);\n}\n\nexport const version = &quot;1.0.0&quot;;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>\u5bfc\u5165\uff1a<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport hello, { version } from &#039;.\/lib.js&#039;;\n\nhello();\nconsole.log(version);\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udccc <strong>3. \u5bfc\u5165\u65f6\u91cd\u547d\u540d\uff08Alias\uff09<\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>module.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport const a = 10;\nexport const b = 20;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>\u5bfc\u5165\u91cd\u547d\u540d\uff1a<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { a as x, b as y } from &#039;.\/module.js&#039;;\n\nconsole.log(x, y);\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udccc <strong>4. \u5bfc\u5165\u6240\u6709\u5185\u5bb9\uff08import * as\uff09<\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>api.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport const url = &quot;https:\/\/api.xx.com&quot;;\nexport const token = &quot;abc123&quot;;\nexport function getData() {}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>main.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport * as api from &#039;.\/api.js&#039;;\n\nconsole.log(api.url);\napi.getData();\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udccc <strong>5. \u91cd\u65b0\u5bfc\u51fa\uff08re-export\uff09<\/strong><\/h1>\n\n\n\n<p>\u5e38\u7528\u4e8e\u201c\u7edf\u4e00\u5165\u53e3\u201d\u6587\u4ef6 index.js\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>utils\/add.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport function add(a, b) {\n  return a + b;\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>utils\/sub.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport function sub(a, b) {\n  return a - b;\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>utils\/index.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport * from &#039;.\/add.js&#039;;\nexport * from &#039;.\/sub.js&#039;;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>main.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { add, sub } from &#039;.\/utils\/index.js&#039;;\n\nconsole.log(add(1, 2));\nconsole.log(sub(5, 3));\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udccc <strong>6. HTML \u4e2d\u6b63\u786e\u52a0\u8f7d ESModule<\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>index.html<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html&gt;\n&amp;lt;head&gt;\n  &amp;lt;meta charset=&quot;utf-8&quot;&gt;\n  &amp;lt;title&gt;ESModule \u793a\u4f8b&amp;lt;\/title&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n\n&amp;lt;script type=&quot;module&quot; src=&quot;.\/main.js&quot;&gt;&amp;lt;\/script&gt;\n\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<p>\u7279\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9ed8\u8ba4\u662f\u4e25\u683c\u6a21\u5f0f <code>strict mode<\/code><\/li>\n\n\n\n<li>\u5bfc\u5165\u8def\u5f84\u5fc5\u987b\u5199\u6269\u5c55\u540d <code>.js<\/code><\/li>\n\n\n\n<li>\u6a21\u5757\u6309\u9700\u52a0\u8f7d\u3001\u81ea\u52a8\u53bb\u91cd\uff0c\u4e0d\u4f1a\u91cd\u590d\u6267\u884c<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udccc <strong>7. ESModule \u652f\u6301\u5f02\u6b65\u52a0\u8f7d\uff08\u52a8\u6001 import\uff09<\/strong><\/h1>\n\n\n\n<p>\u9002\u5408\u6309\u9700\u52a0\u8f7d\u3001\u8def\u7531\u61d2\u52a0\u8f7d\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport(&#039;.\/math.js&#039;).then(module =&gt; {\n  console.log(module.default(5, 6));\n});\n\n<\/pre><\/div>\n\n\n<p>\u4e5f\u53ef\u4ee5\u914d\u5408 <code>await<\/code>\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst module = await import(&#039;.\/math.js&#039;);\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udccc <strong>8. \u6700\u5b8c\u6574\u7684\u8de8\u6587\u4ef6\u6a21\u5757\u6848\u4f8b\uff08\u53ef\u76f4\u63a5\u8dd1\uff09<\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>math.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport const add = (a, b) =&gt; a + b;\nexport const sub = (a, b) =&gt; a - b;\nexport default function mul(a, b) {\n  return a * b;\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>main.js<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport mul, { add, sub } from &#039;.\/math.js&#039;;\n\nconsole.log(add(1, 2));   \/\/ 3\nconsole.log(sub(5, 3));   \/\/ 2\nconsole.log(mul(4, 6));   \/\/ 24\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>index.html<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script type=&quot;module&quot; src=&quot;.\/main.js&quot;&gt;&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<p>\u4f60\u9700\u8981\u54ea\u4e00\u4e2a\uff1f<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd\u6700\u5b8c\u6574\u3001\u6700\u5bb9\u6613\u7406\u89e3\u7684 ESModule\uff08ESM\uff09\u7528\u6cd5\u89e3\u6790 + \u793a\u4f8b\u4ee3&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/%e5%89%8d%e7%ab%afjavascript%e6%a8%a1%e5%9d%97%e5%8c%96%e8%a7%a3%e6%9e%90%e4%b9%8besmodule%e7%94%a8%e6%b3%95%e7%a4%ba%e4%be%8b\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-539","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=539"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/539\/revisions"}],"predecessor-version":[{"id":540,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/539\/revisions\/540"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}