{"id":492,"date":"2025-12-05T10:42:04","date_gmt":"2025-12-05T02:42:04","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=492"},"modified":"2025-12-05T10:42:04","modified_gmt":"2025-12-05T02:42:04","slug":"javascript%e4%b8%ad%e7%9a%84%e6%a8%a1%e5%9d%97%e5%8c%96%e5%bc%80%e5%8f%91es6%ef%bc%9aimport%e4%b8%8eexport%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/javascript%e4%b8%ad%e7%9a%84%e6%a8%a1%e5%9d%97%e5%8c%96%e5%bc%80%e5%8f%91es6%ef%bc%9aimport%e4%b8%8eexport%e8%af%a6%e8%a7%a3\/","title":{"rendered":"JavaScript\u4e2d\u7684\u6a21\u5757\u5316\u5f00\u53d1ES6\uff1aimport\u4e0eexport\u8be6\u89e3"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4efd <strong>JavaScript ES6 \u6a21\u5757\u5316\u5f00\u53d1\uff08<code>import<\/code> \/ <code>export<\/code>\uff09\u8be6\u89e3<\/strong>\uff0c\u4ece\u57fa\u7840\u8bed\u6cd5\u3001\u5bfc\u51fa\u65b9\u5f0f\u3001\u5bfc\u5165\u65b9\u5f0f\uff0c\u5230\u5b9e\u9645\u5f00\u53d1\u6700\u4f73\u5b9e\u8df5\uff0c\u5168\u65b9\u4f4d\u8986\u76d6\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">1\ufe0f\u20e3 ES6 \u6a21\u5757\u5316\u6982\u5ff5<\/h1>\n\n\n\n<p>\u5728 ES6 \u4e4b\u524d\uff0cJS \u6ca1\u6709\u5b98\u65b9\u6a21\u5757\u7cfb\u7edf\uff0c\u5e38\u7528\u7684\u6709\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>IIFE\uff08\u7acb\u5373\u6267\u884c\u51fd\u6570\uff09<\/li>\n\n\n\n<li>CommonJS\uff08Node.js <code>require<\/code> \/ <code>module.exports<\/code>\uff09<\/li>\n\n\n\n<li>AMD\uff08\u6d4f\u89c8\u5668\u5f02\u6b65\u52a0\u8f7d\u6a21\u5757\uff09<\/li>\n<\/ul>\n\n\n\n<p>ES6 \u6a21\u5757\uff08ESM\uff09\u662f\u5b98\u65b9\u6807\u51c6\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6587\u4ef6\u9ed8\u8ba4\u5c31\u662f\u6a21\u5757\uff08\u5e26 <code>export<\/code> \/ <code>import<\/code>\uff09<\/li>\n\n\n\n<li>\u652f\u6301\u9759\u6001\u5206\u6790\uff08Tree Shaking \u53ef\u4f18\u5316\u6253\u5305\uff09<\/li>\n\n\n\n<li>\u9ed8\u8ba4\u4e25\u683c\u6a21\u5f0f<\/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\">2\ufe0f\u20e3 Export \u5bfc\u51fa\u6a21\u5757<\/h1>\n\n\n\n<p>ES6 \u6709\u4e24\u79cd\u4e3b\u8981\u5bfc\u51fa\u65b9\u5f0f\uff1a<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2.1 <strong>\u547d\u540d\u5bfc\u51fa\uff08Named Export\uff09<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ math.js\nexport const PI = 3.14159;\n\nexport function add(a, b) {\n  return a + b;\n}\n\nexport class Circle {\n  constructor(radius) {\n    this.radius = radius;\n  }\n}\n\n<\/pre><\/div>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u2705 \u7279\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u53ef\u5bfc\u51fa\u591a\u4e2a<\/li>\n\n\n\n<li>\u5bfc\u5165\u65f6\u5fc5\u987b\u4f7f\u7528\u76f8\u540c\u7684\u540d\u5b57\uff08\u53ef\u7528 <code>as<\/code> \u91cd\u547d\u540d\uff09<\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2.2 <strong>\u9ed8\u8ba4\u5bfc\u51fa\uff08Default Export\uff09<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ logger.js\nexport default function log(message) {\n  console.log(message);\n}\n\n\/\/ \u4e5f\u53ef\u4ee5\u5bfc\u51fa\u5bf9\u8c61\n\/\/ export default { log, warn, error }\n\n<\/pre><\/div>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u2705 \u7279\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6bcf\u4e2a\u6a21\u5757\u53ea\u80fd\u6709\u4e00\u4e2a\u9ed8\u8ba4\u5bfc\u51fa<\/li>\n\n\n\n<li>\u5bfc\u5165\u65f6\u53ef\u4ee5\u4efb\u610f\u547d\u540d<\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2.3 <strong>\u6df7\u5408\u5bfc\u51fa<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ utils.js\nexport const sum = (a, b) =&gt; a + b;\nexport const multiply = (a, b) =&gt; a * b;\n\nexport default function log(msg) {\n  console.log(msg);\n}\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\">3\ufe0f\u20e3 Import \u5bfc\u5165\u6a21\u5757<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">3.1 <strong>\u5bfc\u5165\u547d\u540d\u5bfc\u51fa<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { PI, add, Circle } from &#039;.\/math.js&#039;;\n\nconsole.log(PI);\nconsole.log(add(1, 2));\n\nconst c = new Circle(5);\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">3.1.1 \u91cd\u547d\u540d<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { add as sum } from &#039;.\/math.js&#039;;\n\nconsole.log(sum(2, 3));\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\">3.2 <strong>\u5bfc\u5165\u9ed8\u8ba4\u5bfc\u51fa<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport log from &#039;.\/logger.js&#039;;\n\nlog(&quot;Hello World&quot;);\n\n<\/pre><\/div>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u6ce8\u610f\uff1a\u9ed8\u8ba4\u5bfc\u51fa\u65e0\u9700\u5927\u62ec\u53f7<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3.3 <strong>\u5bfc\u5165\u5168\u90e8\u5185\u5bb9<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport * as Utils from &#039;.\/utils.js&#039;;\n\nconsole.log(Utils.sum(1,2));\nUtils.default(&quot;\u6253\u5370\u65e5\u5fd7&quot;); \/\/ default \u5bf9\u5e94\u9ed8\u8ba4\u5bfc\u51fa\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\">3.4 <strong>\u6df7\u5408\u5bfc\u5165<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport log, { sum, multiply } from &#039;.\/utils.js&#039;;\n\nlog(&quot;\u6d4b\u8bd5&quot;);\nconsole.log(sum(2, 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\">4\ufe0f\u20e3 \u52a8\u6001\u5bfc\u5165\uff08Dynamic Import\uff09<\/h1>\n\n\n\n<p>ES2020 \u5f15\u5165 <code>import()<\/code> \u51fd\u6570\u5f0f\u5bfc\u5165\uff0c\u8fd4\u56de <code>Promise<\/code>\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst loadModule = async () =&gt; {\n  const math = await import(&#039;.\/math.js&#039;);\n  console.log(math.add(1,2));\n};\n\nloadModule();\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u4f18\u52bf\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6309\u9700\u52a0\u8f7d\u6a21\u5757\uff08\u61d2\u52a0\u8f7d\uff09<\/li>\n\n\n\n<li>\u652f\u6301\u6761\u4ef6\u52a0\u8f7d<\/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\">5\ufe0f\u20e3 TypeScript \u4e2d\u7684\u6a21\u5757\u5316<\/h1>\n\n\n\n<p>ES6 \u6a21\u5757\u4e0e TS \u5b8c\u7f8e\u7ed3\u5408\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ types.ts\nexport interface User {\n  id: number;\n  name: string;\n}\n\n\/\/ app.ts\nimport { User } from &#039;.\/types&#039;;\n\nconst u: User = { id: 1, name: &quot;Alice&quot; };\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\">6\ufe0f\u20e3 \u5b9e\u9645\u5f00\u53d1\u4e2d\u5e38\u89c1\u7528\u6cd5<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">6.1 \u5de5\u5177\u51fd\u6570\u6a21\u5757<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ utils.js\nexport const formatDate = date =&gt; date.toISOString();\nexport const randomNum = (min, max) =&gt; Math.floor(Math.random() * (max - min + 1) + min);\n\n<\/pre><\/div>\n\n\n<p>\u5bfc\u5165\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { formatDate, randomNum } from &#039;.\/utils.js&#039;;\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\">6.2 \u914d\u7f6e\u6a21\u5757<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ config.js\nexport default {\n  apiBase: &#039;https:\/\/api.example.com&#039;,\n  timeout: 5000\n};\n\n<\/pre><\/div>\n\n\n<p>\u5bfc\u5165\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport config from &#039;.\/config.js&#039;;\nconsole.log(config.apiBase);\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\">6.3 Vue \u7ec4\u4ef6\u6a21\u5757\u5316<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ components\/Button.vue\n&amp;lt;script&gt;\nexport default {\n  name: &#039;MyButton&#039;\n}\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<p>\u5728\u7236\u7ec4\u4ef6\u5bfc\u5165\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport MyButton from &#039;.\/components\/Button.vue&#039;;\n\nexport default {\n  components: { MyButton }\n}\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\">7\ufe0f\u20e3 Tree Shaking \u539f\u7406<\/h1>\n\n\n\n<p>ES6 \u6a21\u5757\u652f\u6301 <strong>\u9759\u6001\u5206\u6790<\/strong>\uff0c\u6253\u5305\u5de5\u5177\uff08\u5982 Webpack\/Rollup\/Vite\uff09\u53ef\u4ee5\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u53ea\u6253\u5305\u5b9e\u9645\u4f7f\u7528\u7684\u5bfc\u51fa<\/li>\n\n\n\n<li>\u5254\u9664\u672a\u4f7f\u7528\u7684\u4ee3\u7801<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ utils.js\nexport const used = () =&gt; {};\nexport const unused = () =&gt; {};\n\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { used } from &#039;.\/utils.js&#039;; \/\/ \u6253\u5305\u65f6 unused \u4f1a\u88ab\u5254\u9664\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\">8\ufe0f\u20e3 \u603b\u7ed3<\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u65b9\u9762<\/th><th>ES6 \u6a21\u5757\u7279\u70b9<\/th><\/tr><\/thead><tbody><tr><td>\u5bfc\u51fa\u65b9\u5f0f<\/td><td>\u547d\u540d\u5bfc\u51fa <code>export<\/code>\u3001\u9ed8\u8ba4\u5bfc\u51fa <code>export default<\/code><\/td><\/tr><tr><td>\u5bfc\u5165\u65b9\u5f0f<\/td><td><code>import { }<\/code>\u3001<code>import default<\/code>\u3001<code>import * as<\/code><\/td><\/tr><tr><td>\u9759\u6001\u5206\u6790<\/td><td>\u652f\u6301 Tree Shaking<\/td><\/tr><tr><td>\u52a8\u6001\u5bfc\u5165<\/td><td><code>import()<\/code> \u652f\u6301\u61d2\u52a0\u8f7d\u548c\u6761\u4ef6\u52a0\u8f7d<\/td><\/tr><tr><td>TS \u7ed3\u5408<\/td><td>\u53ef\u4e3a\u6a21\u5757\u6dfb\u52a0\u7c7b\u578b\u7ea6\u675f\uff0c\u63a5\u53e3\u3001\u7c7b\u578b\u3001\u7c7b\u90fd\u80fd\u5bfc\u51fa<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4efd JavaScript ES6 \u6a21\u5757\u5316\u5f00\u53d1\uff08import \/ e&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/javascript%e4%b8%ad%e7%9a%84%e6%a8%a1%e5%9d%97%e5%8c%96%e5%bc%80%e5%8f%91es6%ef%bc%9aimport%e4%b8%8eexport%e8%af%a6%e8%a7%a3\/\">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-492","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\/492","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=492"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/492\/revisions"}],"predecessor-version":[{"id":493,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/492\/revisions\/493"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}