1 line
27 KiB
JavaScript
1 line
27 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[6283],{3905:function(e,n,t){t.d(n,{Zo:function(){return u},kt:function(){return c}});var r=t(7294);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var i=r.createContext({}),m=function(e){var n=r.useContext(i),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},u=function(e){var n=m(e.components);return r.createElement(i.Provider,{value:n},e.children)},s={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},k=r.forwardRef((function(e,n){var t=e.components,a=e.mdxType,l=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),k=m(t),c=a,d=k["".concat(i,".").concat(c)]||k[c]||s[c]||l;return t?r.createElement(d,o(o({ref:n},u),{},{components:t})):r.createElement(d,o({ref:n},u))}));function c(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var l=t.length,o=new Array(l);o[0]=k;var p={};for(var i in n)hasOwnProperty.call(n,i)&&(p[i]=n[i]);p.originalType=e,p.mdxType="string"==typeof e?e:a,o[1]=p;for(var m=2;m<l;m++)o[m]=t[m];return r.createElement.apply(null,o)}return r.createElement.apply(null,t)}k.displayName="MDXCreateElement"},3240:function(e,n,t){t.r(n),t.d(n,{frontMatter:function(){return p},contentTitle:function(){return i},metadata:function(){return m},toc:function(){return u},default:function(){return k}});var r=t(7462),a=t(3366),l=(t(7294),t(3905)),o=["components"],p={sidebar_label:"\u57fa\u7840\uff1a\u524d\u7aef\u6a21\u5757\u5316\u89c4\u8303",sidebar_position:7},i="\u524d\u7aef\u6a21\u5757\u5316\u89c4\u8303",m={unversionedId:"book1/js-module-specs",id:"book1/js-module-specs",isDocsHomePage:!1,title:"\u524d\u7aef\u6a21\u5757\u5316\u89c4\u8303",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book1/js-module-specs.md",sourceDirName:"book1",slug:"/book1/js-module-specs",permalink:"/awesome-interview/book1/js-module-specs",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_label:"\u57fa\u7840\uff1a\u524d\u7aef\u6a21\u5757\u5316\u89c4\u8303",sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"\u57fa\u7840\uff1a\u95ed\u5305\u7684\u4f5c\u7528\u548c\u539f\u7406",permalink:"/awesome-interview/book1/js-closures"},next:{title:"\u6837\u5f0f\uff1aBFC \u7684\u5f62\u6210\u548c\u4f5c\u7528",permalink:"/awesome-interview/book1/css-bfc"}},u=[{value:"\u76f8\u5173\u95ee\u9898",id:"\u76f8\u5173\u95ee\u9898",children:[]},{value:"\u56de\u7b54\u5173\u952e\u70b9",id:"\u56de\u7b54\u5173\u952e\u70b9",children:[]},{value:"\u77e5\u8bc6\u70b9\u6df1\u5165",id:"\u77e5\u8bc6\u70b9\u6df1\u5165",children:[{value:"1. \u4e3a\u4ec0\u4e48\u9700\u8981\u6a21\u5757\u5316\u548c\u6a21\u5757\u5316\u89c4\u8303",id:"1-\u4e3a\u4ec0\u4e48\u9700\u8981\u6a21\u5757\u5316\u548c\u6a21\u5757\u5316\u89c4\u8303",children:[]},{value:"2. \u5404\u79cd\u6a21\u5757\u5316\u89c4\u8303\u7684\u7ec6\u8282",id:"2-\u5404\u79cd\u6a21\u5757\u5316\u89c4\u8303\u7684\u7ec6\u8282",children:[]}]},{value:"\u6269\u5c55\u9605\u8bfb",id:"\u6269\u5c55\u9605\u8bfb",children:[{value:"1. \u9759\u6001\u5206\u6790",id:"1-\u9759\u6001\u5206\u6790",children:[]},{value:"2. \u6a21\u5757\u5316\u4e0e\u5de5\u7a0b\u5316\uff1awebpack",id:"2-\u6a21\u5757\u5316\u4e0e\u5de5\u7a0b\u5316webpack",children:[]},{value:"3. \u6a21\u5757\u5316\u4e0e\u5de5\u7a0b\u5316\uff1aTree Shaking",id:"3-\u6a21\u5757\u5316\u4e0e\u5de5\u7a0b\u5316tree-shaking",children:[]}]},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[]}],s={toc:u};function k(e){var n=e.components,t=(0,a.Z)(e,o);return(0,l.kt)("wrapper",(0,r.Z)({},s,t,{components:n,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"\u524d\u7aef\u6a21\u5757\u5316\u89c4\u8303"},"\u524d\u7aef\u6a21\u5757\u5316\u89c4\u8303"),(0,l.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"JavaScript \u4e3b\u8981\u6709\u54ea\u51e0\u79cd\u6a21\u5757\u5316\u89c4\u8303"),(0,l.kt)("li",{parentName:"ul"},"AMD / CMD \u6709\u4ec0\u4e48\u5f02\u540c"),(0,l.kt)("li",{parentName:"ul"},"ESM \u662f\u4ec0\u4e48"),(0,l.kt)("li",{parentName:"ul"},"\u6a21\u5757\u5316\u89e3\u51b3\u4e86\u4ec0\u4e48\u95ee\u9898/\u75db\u70b9")),(0,l.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"CommonJS")," ",(0,l.kt)("inlineCode",{parentName:"p"},"AMD")," ",(0,l.kt)("inlineCode",{parentName:"p"},"CMD")," ",(0,l.kt)("inlineCode",{parentName:"p"},"UMD")," ",(0,l.kt)("inlineCode",{parentName:"p"},"ESM")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"CommonJS",(0,l.kt)("sup",null,"[1]"),": \u4e3b\u8981\u662f ",(0,l.kt)("strong",{parentName:"li"},"Node.js")," \u4f7f\u7528\uff0c\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"li"},"require")," ",(0,l.kt)("strong",{parentName:"li"},"\u540c\u6b65"),"\u52a0\u8f7d\u6a21\u5757\uff0c",(0,l.kt)("inlineCode",{parentName:"li"},"exports")," \u5bfc\u51fa\u5185\u5bb9\u3002"),(0,l.kt)("li",{parentName:"ul"},"AMD",(0,l.kt)("sup",null,"[2]"),": \u4e3b\u8981\u662f",(0,l.kt)("strong",{parentName:"li"},"\u6d4f\u89c8\u5668\u7aef"),"\u4f7f\u7528\uff0c\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"li"},"define")," \u5b9a\u4e49\u6a21\u5757\u548c\u4f9d\u8d56\uff0c",(0,l.kt)("inlineCode",{parentName:"li"},"require")," ",(0,l.kt)("strong",{parentName:"li"},"\u5f02\u6b65"),"\u52a0\u8f7d\u6a21\u5757\uff0c\u63a8\u5d07",(0,l.kt)("strong",{parentName:"li"},"\u4f9d\u8d56\u524d\u7f6e"),"\u3002"),(0,l.kt)("li",{parentName:"ul"},"CMD",(0,l.kt)("sup",null,"[3]"),": \u548c AMD \u6bd4\u8f83\u7c7b\u4f3c\uff0c\u4e3b\u8981\u662f",(0,l.kt)("strong",{parentName:"li"},"\u6d4f\u89c8\u5668\u7aef"),"\u4f7f\u7528\uff0c\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"li"},"require")," ",(0,l.kt)("strong",{parentName:"li"},"\u5f02\u6b65"),"\u52a0\u8f7d\u6a21\u5757\uff0c",(0,l.kt)("inlineCode",{parentName:"li"},"exports")," \u5bfc\u51fa\u5185\u5bb9\uff0c\u63a8\u5d07",(0,l.kt)("strong",{parentName:"li"},"\u4f9d\u8d56\u5c31\u8fd1"),"\u3002"),(0,l.kt)("li",{parentName:"ul"},"UMD",(0,l.kt)("sup",null,"[4]"),": \u901a\u7528\u6a21\u5757\u89c4\u8303\uff0c\u662f CommonJS\u3001AMD \u4e24\u4e2a\u89c4\u8303\u7684\u5927\u878d\u5408\uff0c\u662f",(0,l.kt)("strong",{parentName:"li"},"\u8de8\u5e73\u53f0"),"\u7684\u89e3\u51b3\u65b9\u6848\u3002"),(0,l.kt)("li",{parentName:"ul"},"ESM",(0,l.kt)("sup",null,"[5]"),": \u5b98\u65b9\u6a21\u5757\u5316\u89c4\u8303\uff0c",(0,l.kt)("strong",{parentName:"li"},"\u73b0\u4ee3\u6d4f\u89c8\u5668\u539f\u751f\u652f\u6301"),"\uff0c\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"li"},"import")," ",(0,l.kt)("strong",{parentName:"li"},"\u5f02\u6b65"),"\u52a0\u8f7d\u6a21\u5757\uff0c",(0,l.kt)("inlineCode",{parentName:"li"},"export")," \u5bfc\u51fa\u5185\u5bb9\u3002")),(0,l.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,l.kt)("h3",{id:"1-\u4e3a\u4ec0\u4e48\u9700\u8981\u6a21\u5757\u5316\u548c\u6a21\u5757\u5316\u89c4\u8303"},"1. \u4e3a\u4ec0\u4e48\u9700\u8981\u6a21\u5757\u5316\u548c\u6a21\u5757\u5316\u89c4\u8303"),(0,l.kt)("p",null,"\u6a21\u5757\u5316\u53ef\u4ee5\u89e3\u51b3\u4ee3\u7801\u4e4b\u95f4\u7684\u53d8\u91cf\u3001\u51fd\u6570\u3001\u5bf9\u8c61\u7b49\u547d\u540d\u7684",(0,l.kt)("strong",{parentName:"p"},"\u51b2\u7a81/\u6c61\u67d3"),"\u95ee\u9898\uff0c\u826f\u597d\u7684\u6a21\u5757\u5316\u8bbe\u8ba1\u53ef\u4ee5",(0,l.kt)("strong",{parentName:"p"},"\u964d\u4f4e\u4ee3\u7801\u4e4b\u95f4\u7684\u8026\u5408\u5173\u7cfb"),"\uff0c\u63d0\u9ad8\u4ee3\u7801\u7684\u53ef\u7ef4\u62a4\u6027\u3001\u53ef\u6269\u5c55\u6027\u4ee5\u53ca\u590d\u7528\u6027\u3002"),(0,l.kt)("p",null,"\u6a21\u5757\u5316\u89c4\u8303\u7684\u4f5c\u7528\u662f\u4e3a\u4e86\u89c4\u8303 JavaScript \u6a21\u5757\u7684\u5b9a\u4e49\u548c\u52a0\u8f7d\u673a\u5236\uff0c\u4ee5\u7edf\u4e00\u7684\u65b9\u5f0f\u5bfc\u51fa\u548c\u52a0\u8f7d\u6a21\u5757\uff0c\u964d\u4f4e\u5b66\u4e60\u4f7f\u7528\u6210\u672c\uff0c\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\u3002"),(0,l.kt)("h3",{id:"2-\u5404\u79cd\u6a21\u5757\u5316\u89c4\u8303\u7684\u7ec6\u8282"},"2. \u5404\u79cd\u6a21\u5757\u5316\u89c4\u8303\u7684\u7ec6\u8282"),(0,l.kt)("h4",{id:"21-commonjs"},"2.1 CommonJS"),(0,l.kt)("p",null,"CommonJS \u4e3b\u8981\u662f ",(0,l.kt)("strong",{parentName:"p"},"Node.js")," \u4f7f\u7528\uff0c\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"p"},"require")," ",(0,l.kt)("strong",{parentName:"p"},"\u540c\u6b65"),"\u52a0\u8f7d\u6a21\u5757\uff0c",(0,l.kt)("inlineCode",{parentName:"p"},"exports")," \u5bfc\u51fa\u5185\u5bb9\u3002\u5728 CommonJS \u89c4\u8303\u4e0b\uff0c\u6bcf\u4e00\u4e2a JS \u6587\u4ef6\u90fd\u662f\u72ec\u7acb\u7684\u6a21\u5757\uff0c\u6bcf\u4e2a\u6a21\u5757\u90fd\u6709\u72ec\u7acb\u7684\u4f5c\u7528\u57df\uff0c\u6a21\u5757\u91cc\u7684\u672c\u5730\u53d8\u91cf\u90fd\u662f\u79c1\u6709\u7684\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u793a\u4f8b")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},'// hzfe.js\nconst hzfeMember = 17;\nconst getHZFEMember = () => {\n return `HZFE Member: ${hzfeMember}`;\n};\nmodule.exports.getHZFEMember = getHZFEMember;\n\n// index.js\nconst hzfe = require("./hzfe.js");\nconsole.log(hzfe.getHZFEMember()); // HZFE Member: 17\n')),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u4f7f\u7528\u573a\u666f")),(0,l.kt)("p",null,"CommonJS \u4e3b\u8981\u5728\u670d\u52a1\u7aef\uff08\u5982\uff1aNode.js\uff09\u4f7f\u7528\uff0c\u4e5f\u53ef\u901a\u8fc7\u6253\u5305\u5de5\u5177\u6253\u5305\u4e4b\u540e\u5728\u6d4f\u89c8\u5668\u7aef\u4f7f\u7528\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u52a0\u8f7d\u65b9\u5f0f")),(0,l.kt)("p",null,"CommonJS \u901a\u8fc7\u540c\u6b65\u7684\u65b9\u5f0f\u52a0\u8f7d\u6a21\u5757\uff0c\u9996\u6b21\u52a0\u8f7d\u4f1a\u7f13\u5b58\u7ed3\u679c\uff0c\u540e\u7eed\u52a0\u8f7d\u5219\u662f\u76f4\u63a5\u8bfb\u53d6\u7f13\u5b58\u7ed3\u679c\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u4f18\u7f3a\u70b9")),(0,l.kt)("p",null,"\u4f18\u70b9"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u7b80\u5355\u6613\u7528"),(0,l.kt)("li",{parentName:"ul"},"\u53ef\u4ee5\u5728\u4efb\u610f\u4f4d\u7f6e ",(0,l.kt)("inlineCode",{parentName:"li"},"require")," \u6a21\u5757"),(0,l.kt)("li",{parentName:"ul"},"\u652f\u6301\u5faa\u73af\u4f9d\u8d56")),(0,l.kt)("p",null,"\u7f3a\u70b9"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u540c\u6b65\u7684\u52a0\u8f7d\u65b9\u5f0f\u4e0d\u9002\u7528\u4e8e\u6d4f\u89c8\u5668\u7aef"),(0,l.kt)("li",{parentName:"ul"},"\u6d4f\u89c8\u5668\u7aef\u4f7f\u7528\u9700\u8981\u6253\u5305"),(0,l.kt)("li",{parentName:"ul"},"\u96be\u4ee5\u652f\u6301\u6a21\u5757\u9759\u6001\u5206\u6790")),(0,l.kt)("h4",{id:"22-amd-asynchronous-module-definition"},"2.2 AMD (Asynchronous Module Definition)"),(0,l.kt)("p",null,"AMD\uff0c\u5373\u5f02\u6b65\u6a21\u5757\u5b9a\u4e49\u3002AMD \u5b9a\u4e49\u4e86\u4e00\u5957 JavaScript \u6a21\u5757\u4f9d\u8d56\u5f02\u6b65\u52a0\u8f7d\u6807\u51c6\uff0c\u7528\u6765\u89e3\u51b3\u6d4f\u89c8\u5668\u7aef\u6a21\u5757\u52a0\u8f7d\u7684\u95ee\u9898\u3002AMD \u4e3b\u8981\u662f",(0,l.kt)("strong",{parentName:"p"},"\u6d4f\u89c8\u5668\u7aef"),"\u4f7f\u7528\uff0c\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"p"},"define")," \u5b9a\u4e49\u6a21\u5757\u548c\u4f9d\u8d56\uff0c",(0,l.kt)("inlineCode",{parentName:"p"},"require")," ",(0,l.kt)("strong",{parentName:"p"},"\u5f02\u6b65"),"\u52a0\u8f7d\u6a21\u5757\uff0c\u63a8\u5d07",(0,l.kt)("strong",{parentName:"p"},"\u4f9d\u8d56\u524d\u7f6e"),"\u3002"),(0,l.kt)("p",null,"AMD \u6a21\u5757\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"p"},"define")," \u51fd\u6570\u5b9a\u4e49\u5728\u95ed\u5305\u4e2d\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-typescript"},"/**\n * define\n * @param id \u6a21\u5757\u540d\n * @param dependencies \u4f9d\u8d56\u5217\u8868\n * @param factory \u6a21\u5757\u7684\u5177\u4f53\u5185\u5bb9/\u5177\u4f53\u5b9e\u73b0\n */\ndefine(id?: string, dependencies?: string[], factory: Function | Object);\n")),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u793a\u4f8b")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},'// hzfe.js\ndefine("hzfe", [], function () {\n const hzfeMember = 17;\n const getHZFEMember = () => {\n return `HZFE Member: ${hzfeMember}`;\n };\n\n return {\n getHZFEMember,\n };\n});\n\n// index.js\nrequire(["hzfe"], function (hzfe) {\n // \u4f9d\u8d56\u524d\u7f6e\n console.log(hzfe.getHZFEMember()); // HZFE Member: 17\n});\n')),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u4f7f\u7528\u573a\u666f")),(0,l.kt)("p",null,"AMD \u4e3b\u8981\u5728",(0,l.kt)("strong",{parentName:"p"},"\u6d4f\u89c8\u5668\u7aef"),"\u4e2d\u4f7f\u7528\uff0c\u901a\u8fc7\u7b26\u5408 AMD \u6807\u51c6\u7684 JavaScript \u5e93\uff08\u5982\uff1aRequireJs\uff09\u52a0\u8f7d\u6a21\u5757\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u52a0\u8f7d\u65b9\u5f0f")),(0,l.kt)("p",null,"AMD \u901a\u8fc7\u5f02\u6b65\u7684\u65b9\u5f0f\u52a0\u8f7d\u6a21\u5757\uff0c\u6bcf\u52a0\u8f7d\u4e00\u4e2a\u6a21\u5757\u5b9e\u9645\u5c31\u662f\u52a0\u8f7d\u5bf9\u5e94\u7684 JS \u6587\u4ef6\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u4f18\u7f3a\u70b9")),(0,l.kt)("p",null,"\u4f18\u70b9"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u4f9d\u8d56\u5f02\u6b65\u52a0\u8f7d\uff0c\u66f4\u5feb\u7684\u542f\u52a8\u901f\u5ea6"),(0,l.kt)("li",{parentName:"ul"},"\u652f\u6301\u5faa\u73af\u4f9d\u8d56"),(0,l.kt)("li",{parentName:"ul"},"\u652f\u6301\u63d2\u4ef6")),(0,l.kt)("p",null,"\u7f3a\u70b9"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u8bed\u6cd5\u76f8\u5bf9\u590d\u6742"),(0,l.kt)("li",{parentName:"ul"},"\u4f9d\u8d56\u52a0\u8f7d\u5668"),(0,l.kt)("li",{parentName:"ul"},"\u96be\u4ee5\u652f\u6301\u6a21\u5757\u9759\u6001\u5206\u6790")),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u5177\u4f53\u5b9e\u73b0")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"https://requirejs.org/"},"RequireJs"))),(0,l.kt)("h4",{id:"23-cmd-common-module-definition"},"2.3 CMD (Common Module Definition)"),(0,l.kt)("p",null,"CMD\uff0c\u5373\u901a\u7528\u6a21\u5757\u5b9a\u4e49\u3002CMD \u5b9a\u4e49\u4e86\u4e00\u5957 JavaScript \u6a21\u5757\u4f9d\u8d56\u5f02\u6b65\u52a0\u8f7d\u6807\u51c6\uff0c\u7528\u6765\u89e3\u51b3\u6d4f\u89c8\u5668\u7aef\u6a21\u5757\u52a0\u8f7d\u7684\u95ee\u9898\u3002CMD \u4e3b\u8981\u662f",(0,l.kt)("strong",{parentName:"p"},"\u6d4f\u89c8\u5668\u7aef"),"\u4f7f\u7528\uff0c\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"p"},"define")," \u5b9a\u4e49\u6a21\u5757\u548c\u4f9d\u8d56\uff0c",(0,l.kt)("inlineCode",{parentName:"p"},"require")," ",(0,l.kt)("strong",{parentName:"p"},"\u5f02\u6b65"),"\u52a0\u8f7d\u6a21\u5757\uff0c\u63a8\u5d07",(0,l.kt)("strong",{parentName:"p"},"\u4f9d\u8d56\u5c31\u8fd1"),"\u3002"),(0,l.kt)("p",null,"CMD \u6a21\u5757\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"p"},"define")," \u51fd\u6570\u5b9a\u4e49\u5728\u95ed\u5305\u4e2d\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-typescript"},"/**\n * define\n * @param id \u6a21\u5757\u540d\n * @param dependencies \u4f9d\u8d56\u5217\u8868\n * @param factory \u6a21\u5757\u7684\u5177\u4f53\u5185\u5bb9/\u5177\u4f53\u5b9e\u73b0\n */\ndefine(id?: string, dependencies?: string[], factory: Function | Object);\n")),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u793a\u4f8b")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},'// hzfe.js\ndefine("hzfe", [], function () {\n const hzfeMember = 17;\n const getHZFEMember = () => {\n return `HZFE Member: ${hzfeMember}`;\n };\n\n exports.getHZFEMember = getHZFEMember;\n});\n\n// index.js\ndefine(function (require, exports) {\n const hzfe = require("hzfe"); // \u4f9d\u8d56\u5c31\u8fd1\n console.log(hzfe.getHZFEMember()); // HZFE Member: 17\n});\n')),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u4f7f\u7528\u573a\u666f")),(0,l.kt)("p",null,"CMD \u4e3b\u8981\u5728",(0,l.kt)("strong",{parentName:"p"},"\u6d4f\u89c8\u5668\u7aef"),"\u4e2d\u4f7f\u7528\uff0c\u901a\u8fc7\u7b26\u5408 CMD \u6807\u51c6\u7684 JavaScript \u5e93\uff08\u5982 sea.js\uff09\u52a0\u8f7d\u6a21\u5757\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u52a0\u8f7d\u65b9\u5f0f")),(0,l.kt)("p",null,"CMD \u901a\u8fc7\u5f02\u6b65\u7684\u65b9\u5f0f\u52a0\u8f7d\u6a21\u5757\uff0c\u6bcf\u52a0\u8f7d\u4e00\u4e2a\u6a21\u5757\u5b9e\u9645\u5c31\u662f\u52a0\u8f7d\u5bf9\u5e94\u7684 JS \u6587\u4ef6\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u4f18\u7f3a\u70b9")),(0,l.kt)("p",null,"\u4f18\u70b9"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u4f9d\u8d56\u5f02\u6b65\u52a0\u8f7d\uff0c\u66f4\u5feb\u7684\u542f\u52a8\u901f\u5ea6"),(0,l.kt)("li",{parentName:"ul"},"\u652f\u6301\u5faa\u73af\u4f9d\u8d56"),(0,l.kt)("li",{parentName:"ul"},"\u4f9d\u8d56\u5c31\u8fd1"),(0,l.kt)("li",{parentName:"ul"},"\u4e0e CommonJS \u4fdd\u6301\u5f88\u5927\u7684\u517c\u5bb9\u6027")),(0,l.kt)("p",null,"\u7f3a\u70b9"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u8bed\u6cd5\u76f8\u5bf9\u590d\u6742"),(0,l.kt)("li",{parentName:"ul"},"\u4f9d\u8d56\u52a0\u8f7d\u5668"),(0,l.kt)("li",{parentName:"ul"},"\u96be\u4ee5\u652f\u6301\u6a21\u5757\u9759\u6001\u5206\u6790")),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u5177\u4f53\u5b9e\u73b0")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"https://github.com/seajs/seajs"},"Sea.js"))),(0,l.kt)("h4",{id:"24-umd-universal-module-definition"},"2.4 UMD (Universal Module Definition)"),(0,l.kt)("p",null,"UMD\uff0c\u5373\u901a\u7528\u6a21\u5757\u5b9a\u4e49\u3002UMD \u4e3b\u8981\u4e3a\u4e86\u89e3\u51b3 CommonJS \u548c AMD \u89c4\u8303\u4e0b\u7684\u4ee3\u7801\u4e0d\u901a\u7528\u7684\u95ee\u9898\uff0c\u540c\u65f6\u8fd8\u652f\u6301\u5c06\u6a21\u5757\u6302\u8f7d\u5230\u5168\u5c40\uff0c\u662f",(0,l.kt)("strong",{parentName:"p"},"\u8de8\u5e73\u53f0"),"\u7684\u89e3\u51b3\u65b9\u6848\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u793a\u4f8b")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},'// hzfe.js\n(function (root, factory) {\n if (typeof define === "function" && define.amd) {\n // AMD\n define(["exports", "hzfe"], factory);\n } else if (\n typeof exports === "object" &&\n typeof exports.nodeName !== "string"\n ) {\n // CommonJS\n factory(exports, require("hzfe"));\n } else {\n // Browser globals\n factory((root.commonJsStrict = {}), root.hzfe);\n }\n})(typeof self !== "undefined" ? self : this, function (exports, b) {\n const hzfeMember = 17;\n const getHZFEMember = () => {\n return `HZFE Member: ${hzfeMember}`;\n };\n\n exports.getHZFEMember = getHZFEMember;\n});\n\n// index.js\nconst hzfe = require("./hzfe.js");\nconsole.log(hzfe.getHZFEMember()); // HZFE Member: 17\n')),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u4f7f\u7528\u573a\u666f")),(0,l.kt)("p",null,"UMD \u53ef\u540c\u65f6\u5728\u670d\u52a1\u5668\u7aef\u548c\u6d4f\u89c8\u5668\u7aef\u4f7f\u7528\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u52a0\u8f7d\u65b9\u5f0f")),(0,l.kt)("p",null,"UMD \u52a0\u8f7d\u6a21\u5757\u7684\u65b9\u5f0f\u53d6\u51b3\u4e8e\u6240\u5904\u7684\u73af\u5883\uff0cNode.js \u540c\u6b65\u52a0\u8f7d\uff0c\u6d4f\u89c8\u5668\u7aef\u5f02\u6b65\u52a0\u8f7d\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u4f18\u7f3a\u70b9")),(0,l.kt)("p",null,"\u4f18\u70b9"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u8de8\u5e73\u53f0\u517c\u5bb9")),(0,l.kt)("p",null,"\u7f3a\u70b9"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u4ee3\u7801\u91cf\u7a0d\u5927")),(0,l.kt)("h4",{id:"25-esm-ecmascript-module"},"2.5 ESM (ECMAScript Module)"),(0,l.kt)("p",null,"ESM\uff0c\u5373 ESModule\u3001ECMAScript Module\u3002\u5b98\u65b9\u6a21\u5757\u5316\u89c4\u8303\uff0c",(0,l.kt)("strong",{parentName:"p"},"\u73b0\u4ee3\u6d4f\u89c8\u5668\u539f\u751f\u652f\u6301"),"\uff0c\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"p"},"import")," \u52a0\u8f7d\u6a21\u5757\uff0c",(0,l.kt)("inlineCode",{parentName:"p"},"export")," \u5bfc\u51fa\u5185\u5bb9\u3002\n",(0,l.kt)("strong",{parentName:"p"},"\u793a\u4f8b")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},'// hzfe.js\nconst hzfeMember = 17;\nexport const getHZFEMember = () => {\n return `HZFE Member: ${hzfeMember}`;\n};\n\n// index.js\nimport * as hzfe from "./hzfe.js";\nconsole.log(hzfe.getHZFEMember()); // HZFE Member: 17\n')),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u4f7f\u7528\u573a\u666f")),(0,l.kt)("p",null,"ESM \u5728\u652f\u6301\u7684\u6d4f\u89c8\u5668\u73af\u5883\u4e0b\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\uff0c\u5728\u4e0d\u652f\u6301\u7684\u7aef\u9700\u8981\u7f16\u8bd1/\u6253\u5305\u540e\u4f7f\u7528\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u52a0\u8f7d\u65b9\u5f0f")),(0,l.kt)("p",null,"ESM \u52a0\u8f7d\u6a21\u5757\u7684\u65b9\u5f0f\u540c\u6837\u53d6\u51b3\u4e8e\u6240\u5904\u7684\u73af\u5883\uff0cNode.js \u540c\u6b65\u52a0\u8f7d\uff0c\u6d4f\u89c8\u5668\u7aef\u5f02\u6b65\u52a0\u8f7d\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u4f18\u7f3a\u70b9")),(0,l.kt)("p",null,"\u4f18\u70b9"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u652f\u6301\u540c\u6b65/\u5f02\u6b65\u52a0\u8f7d"),(0,l.kt)("li",{parentName:"ul"},"\u8bed\u6cd5\u7b80\u5355"),(0,l.kt)("li",{parentName:"ul"},"\u652f\u6301\u6a21\u5757\u9759\u6001\u5206\u6790"),(0,l.kt)("li",{parentName:"ul"},"\u652f\u6301\u5faa\u73af\u5f15\u7528")),(0,l.kt)("p",null,"\u7f3a\u70b9"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u517c\u5bb9\u6027\u4e0d\u4f73")),(0,l.kt)("h2",{id:"\u6269\u5c55\u9605\u8bfb"},"\u6269\u5c55\u9605\u8bfb"),(0,l.kt)("h3",{id:"1-\u9759\u6001\u5206\u6790"},"1. \u9759\u6001\u5206\u6790"),(0,l.kt)("blockquote",null,(0,l.kt)("p",{parentName:"blockquote"},"\u9759\u6001\u7a0b\u5e8f\u5206\u6790\uff08Static program analysis\uff09\u662f\u6307\u5728\u4e0d\u8fd0\u884c\u7a0b\u5e8f\u7684\u6761\u4ef6\u4e0b\uff0c\u8fdb\u884c\u7a0b\u5e8f\u5206\u6790\u7684\u65b9\u6cd5\u3002 ",(0,l.kt)("a",{parentName:"p",href:"https://zh.wikipedia.org/wiki/%E9%9D%9C%E6%85%8B%E7%A8%8B%E5%BA%8F%E5%88%86%E6%9E%90"},"\u9759\u6001\u7a0b\u5e8f\u5206\u6790 - Wiki"))),(0,l.kt)("p",null,"\u7b80\u800c\u8a00\u4e4b\uff0c\u524d\u6587\u91cc\u63d0\u5230\u7684\u9759\u6001\u5206\u6790\u5c31\u662f\u6307\u5728\u8fd0\u884c\u4ee3\u7801\u4e4b\u524d\u5c31\u53ef\u5224\u65ad\u51fa\u4ee3\u7801\u5185\u6709\u54ea\u4e9b\u4ee3\u7801\u4f7f\u7528\u5230\u4e86\uff0c\u54ea\u4e9b\u6ca1\u6709\u4f7f\u7528\u5230\u3002"),(0,l.kt)("h3",{id:"2-\u6a21\u5757\u5316\u4e0e\u5de5\u7a0b\u5316webpack"},"2. \u6a21\u5757\u5316\u4e0e\u5de5\u7a0b\u5316\uff1awebpack"),(0,l.kt)("p",null,"webpack \u540c\u65f6\u652f\u6301 CommonJS\u3001AMD \u548c ESM \u4e09\u79cd\u6a21\u5757\u5316\u89c4\u8303\u7684\u6253\u5305\u3002\u6839\u636e\u4e0d\u540c\u89c4\u8303 webpack \u4f1a\u5c06\u6a21\u5757\u5904\u7406\u6210\u4e0d\u540c\u7684\u4ea7\u7269\u3002"),(0,l.kt)("p",null,"CommonJS"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},"(function (module, exports) {\n const hzfeMember = 17;\n const getHZFEMember = () => {\n return `HZFE Member: ${hzfeMember}`;\n };\n\n module.exports = getHZFEMember;\n});\n")),(0,l.kt)("p",null,"AMD"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},"(function (module, exports, __webpack_require__) {\n var __WEBPACK_AMD_DEFINE_ARRAY__, // \u4f9d\u8d56\u5217\u8868\n __WEBPACK_AMD_DEFINE_RESULT__; // factory \u8fd4\u56de\u503c\n\n __WEBPACK_AMD_DEFINE_ARRAY__ = [];\n\n // \u6267\u884c factory\n __WEBPACK_AMD_DEFINE_RESULT__ = function () {\n const hzfeMember = 17;\n const getHZFEMember = () => {\n return `HZFE Member: ${hzfeMember}`;\n };\n\n return {\n getHZFEMember,\n };\n }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__);\n\n __WEBPACK_AMD_DEFINE_RESULT__ !== undefined &&\n (module.exports = __WEBPACK_AMD_DEFINE_RESULT__);\n});\n")),(0,l.kt)("p",null,"ESM"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},'(function (module, __webpack_exports__, __webpack_require__) {\n __webpack_require__.r(__webpack_exports__);\n __webpack_require__.d(__webpack_exports__, "getHZFEMember", function () {\n return getHZFEMember;\n });\n\n const hzfeMember = 17;\n const getHZFEMember = () => {\n return `HZFE Member: ${hzfeMember}`;\n };\n});\n')),(0,l.kt)("h3",{id:"3-\u6a21\u5757\u5316\u4e0e\u5de5\u7a0b\u5316tree-shaking"},"3. \u6a21\u5757\u5316\u4e0e\u5de5\u7a0b\u5316\uff1aTree Shaking"),(0,l.kt)("blockquote",null,(0,l.kt)("p",{parentName:"blockquote"},"Tree shaking \u662f\u4e00\u4e2a\u901a\u5e38\u7528\u4e8e\u63cf\u8ff0\u79fb\u9664 JavaScript \u4e0a\u4e0b\u6587\u4e2d\u7684\u672a\u5f15\u7528\u4ee3\u7801\uff08dead-code\uff09\u884c\u4e3a\u7684\u672f\u8bed\u3002\u5b83\u4f9d\u8d56\u4e8e ES2015 \u4e2d\u7684 import \u548c export \u8bed\u53e5\uff0c\u7528\u6765\u68c0\u6d4b\u4ee3\u7801\u6a21\u5757\u662f\u5426\u88ab\u5bfc\u51fa\u3001\u5bfc\u5165\uff0c\u4e14\u88ab JavaScript \u6587\u4ef6\u4f7f\u7528\u3002 ",(0,l.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/zh-CN/docs/Glossary/Tree_shaking"},"Tree Shaking - MDN"))),(0,l.kt)("p",null,"\u7b80\u5355\u6765\u8bf4\uff0cTree Shaking \u662f\u4e00\u79cd\u4f9d\u8d56 ESM \u6a21\u5757\u9759\u6001\u5206\u6790\u5b9e\u73b0\u7684\u529f\u80fd\uff0c\u5b83\u53ef\u4ee5\u5728\u7f16\u8bd1\u65f6\u5b89\u5168\u7684\u79fb\u9664\u4ee3\u7801\u4e2d\u672a\u4f7f\u7528\u7684\u90e8\u5206\uff08webpack 5 \u5bf9 CommonJS \u4e5f\u8fdb\u884c\u4e86\u652f\u6301\uff0c\u5728\u6b64\u4e0d\u8be6\u7ec6\u5c55\u5f00\uff09\u3002"),(0,l.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://nodejs.org/api/modules.html#modules_modules_commonjs_modules"},"Modules: CommonJS modules")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://en.wikipedia.org/wiki/Asynchronous_module_definition"},"Asynchronous module definition")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://github.com/seajs/seajs/issues/242"},"Common Module Definition")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://github.com/umdjs/umd/"},"Universal Module Definition")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://nodejs.org/api/modules.html#modules_modules_commonjs_modules"},"Modules: ECMAScript modules")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://tc39.es/ecma262/#sec-modules"},"Module Semantics"))))}k.isMDXComponent=!0}}]); |