@modern-js/module-tools-docs 2.0.2 → 2.2.0

package/doc_build/static/js/1607.70af642a.js

@@ -0,0 +1,2 @@
+/*! For license information please see 1607.70af642a.js.LICENSE.txt */
+(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([[1607],{29133:function(n,e,t){"use strict";function o(){return o=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o])}return n},o.apply(this,arguments)}var i;t.d(e,{RQ:function(){return I},Zn:function(){return T},Zq:function(){return j},aU:function(){return i},cP:function(){return p},fp:function(){return h},kG:function(){return a},lX:function(){return r},pC:function(){return E}}),function(n){n.Pop="POP",n.Push="PUSH",n.Replace="REPLACE"}(i||(i={}));const s="popstate";function r(n){return void 0===n&&(n={}),m((function(n,e){let{pathname:t,search:o,hash:i}=n.location;return l("",{pathname:t,search:o,hash:i},e.state&&e.state.usr||null,e.state&&e.state.key||"default")}),(function(n,e){return"string"==typeof e?e:u(e)}),null,n)}function a(n,e){if(!1===n||null==n)throw new Error(e)}function d(n){return{usr:n.state,key:n.key}}function l(n,e,t,i){return void 0===t&&(t=null),o({pathname:"string"==typeof n?n:n.pathname,search:"",hash:""},"string"==typeof e?p(e):e,{state:t,key:e&&e.key||i||Math.random().toString(36).substr(2,8)})}function u(n){let{pathname:e="/",search:t="",hash:o=""}=n;return t&&"?"!==t&&(e+="?"===t.charAt(0)?t:"?"+t),o&&"#"!==o&&(e+="#"===o.charAt(0)?o:"#"+o),e}function p(n){let e={};if(n){let t=n.indexOf("#");t>=0&&(e.hash=n.substr(t),n=n.substr(0,t));let o=n.indexOf("?");o>=0&&(e.search=n.substr(o),n=n.substr(0,o)),n&&(e.pathname=n)}return e}function c(n){let e="undefined"!=typeof window&&void 0!==window.location&&"null"!==window.location.origin?window.location.origin:window.location.href,t="string"==typeof n?n:u(n);return a(e,"No window.location.(origin|href) available to create URL for href: "+t),new URL(t,e)}function m(n,e,t,o){void 0===o&&(o={});let{window:r=document.defaultView,v5Compat:a=!1}=o,p=r.history,m=i.Pop,f=null;function h(){m=i.Pop,f&&f({action:m,location:g.location})}let g={get action(){return m},get location(){return n(r,p)},listen(n){if(f)throw new Error("A history only accepts one active listener");return r.addEventListener(s,h),f=n,()=>{r.removeEventListener(s,h),f=null}},createHref(n){return e(r,n)},encodeLocation(n){let e=c("string"==typeof n?n:u(n));return{pathname:e.pathname,search:e.search,hash:e.hash}},push:function(n,e){m=i.Push;let o=l(g.location,n,e);t&&t(o,n);let s=d(o),u=g.createHref(o);try{p.pushState(s,"",u)}catch(c){r.location.assign(u)}a&&f&&f({action:m,location:g.location})},replace:function(n,e){m=i.Replace;let o=l(g.location,n,e);t&&t(o,n);let s=d(o),r=g.createHref(o);p.replaceState(s,"",r),a&&f&&f({action:m,location:g.location})},go(n){return p.go(n)}};return g}var f;function h(n,e,t){void 0===t&&(t="/");let o=T(("string"==typeof e?p(e):e).pathname||"/",t);if(null==o)return null;let i=g(n);!function(n){n.sort(((n,e)=>n.score!==e.score?e.score-n.score:function(n,e){return n.length===e.length&&n.slice(0,-1).every(((n,t)=>n===e[t]))?n[n.length-1]-e[e.length-1]:0}(n.routesMeta.map((n=>n.childrenIndex)),e.routesMeta.map((n=>n.childrenIndex)))))}(i);let s=null;for(let r=0;null==s&&r<i.length;++r)s=v(i[r],C(o));return s}function g(n,e,t,o){void 0===e&&(e=[]),void 0===t&&(t=[]),void 0===o&&(o="");let i=(n,i,s)=>{let r={relativePath:void 0===s?n.path||"":s,caseSensitive:!0===n.caseSensitive,childrenIndex:i,route:n};r.relativePath.startsWith("/")&&(a(r.relativePath.startsWith(o),'Absolute route path "'+r.relativePath+'" nested under path "'+o+'" is not valid. An absolute child route path must start with the combined path of all its parent routes.'),r.relativePath=r.relativePath.slice(o.length));let d=I([o,r.relativePath]),l=t.concat(r);n.children&&n.children.length>0&&(a(!0!==n.index,'Index routes must not have child routes. Please remove all child routes from route path "'+d+'".'),g(n.children,e,l,d)),(null!=n.path||n.index)&&e.push({path:d,score:w(d,n.index),routesMeta:l})};return n.forEach(((n,e)=>{var t;if(""!==n.path&&null!=(t=n.path)&&t.includes("?"))for(let o of b(n.path))i(n,e,o);else i(n,e)})),e}function b(n){let e=n.split("/");if(0===e.length)return[];let[t,...o]=e,i=t.endsWith("?"),s=t.replace(/\?$/,"");if(0===o.length)return i?[s,""]:[s];let r=b(o.join("/")),a=[];return a.push(...r.map((n=>""===n?s:[s,n].join("/")))),i&&a.push(...r),a.map((e=>n.startsWith("/")&&""===e?"/":e))}!function(n){n.data="data",n.deferred="deferred",n.redirect="redirect",n.error="error"}(f||(f={}));const y=/^:\w+$/,x=n=>"*"===n;function w(n,e){let t=n.split("/"),o=t.length;return t.some(x)&&(o+=-2),e&&(o+=2),t.filter((n=>!x(n))).reduce(((n,e)=>n+(y.test(e)?3:""===e?1:10)),o)}function v(n,e){let{routesMeta:t}=n,o={},i="/",s=[];for(let r=0;r<t.length;++r){let n=t[r],a=r===t.length-1,d="/"===i?e:e.slice(i.length)||"/",l=S({path:n.relativePath,caseSensitive:n.caseSensitive,end:a},d);if(!l)return null;Object.assign(o,l.params);let u=n.route;s.push({params:o,pathname:I([i,l.pathname]),pathnameBase:D(I([i,l.pathnameBase])),route:u}),"/"!==l.pathnameBase&&(i=I([i,l.pathnameBase]))}return s}function S(n,e){"string"==typeof n&&(n={path:n,caseSensitive:!1,end:!0});let[t,o]=function(n,e,t){void 0===e&&(e=!1);void 0===t&&(t=!0);k("*"===n||!n.endsWith("*")||n.endsWith("/*"),'Route path "'+n+'" will be treated as if it were "'+n.replace(/\*$/,"/*")+'" because the `*` character must always follow a `/` in the pattern. To get rid of this warning, please change the route path to "'+n.replace(/\*$/,"/*")+'".');let o=[],i="^"+n.replace(/\/*\*?$/,"").replace(/^\/*/,"/").replace(/[\\.*+^$?{}|()[\]]/g,"\\$&").replace(/\/:(\w+)/g,((n,e)=>(o.push(e),"/([^\\/]+)")));n.endsWith("*")?(o.push("*"),i+="*"===n||"/*"===n?"(.*)$":"(?:\\/(.+)|\\/*)$"):t?i+="\\/*$":""!==n&&"/"!==n&&(i+="(?:(?=\\/|$))");return[new RegExp(i,e?void 0:"i"),o]}(n.path,n.caseSensitive,n.end),i=e.match(t);if(!i)return null;let s=i[0],r=s.replace(/(.)\/+$/,"$1"),a=i.slice(1);return{params:o.reduce(((n,e,t)=>{if("*"===e){let n=a[t]||"";r=s.slice(0,s.length-n.length).replace(/(.)\/+$/,"$1")}return n[e]=function(n,e){try{return decodeURIComponent(n)}catch(t){return k(!1,'The value for the URL param "'+e+'" will not be decoded because the string "'+n+'" is a malformed URL segment. This is probably due to a bad percent encoding ('+t+")."),n}}(a[t]||"",e),n}),{}),pathname:s,pathnameBase:r,pattern:n}}function C(n){try{return decodeURI(n)}catch(e){return k(!1,'The URL path "'+n+'" could not be decoded because it is is a malformed URL segment. This is probably due to a bad percent encoding ('+e+")."),n}}function T(n,e){if("/"===e)return n;if(!n.toLowerCase().startsWith(e.toLowerCase()))return null;let t=e.endsWith("/")?e.length-1:e.length,o=n.charAt(t);return o&&"/"!==o?null:n.slice(t)||"/"}function k(n,e){if(!n){"undefined"!=typeof console&&console.warn(e);try{throw new Error(e)}catch(t){}}}function P(n,e,t,o){return"Cannot include a '"+n+"' character in a manually specified `to."+e+"` field ["+JSON.stringify(o)+"].  Please separate it out to the `to."+t+'` field. Alternatively you may provide the full path as a string in <Link to="..."> and the router will parse it for you.'}function j(n){return n.filter(((n,e)=>0===e||n.route.path&&n.route.path.length>0))}function E(n,e,t,i){let s;void 0===i&&(i=!1),"string"==typeof n?s=p(n):(s=o({},n),a(!s.pathname||!s.pathname.includes("?"),P("?","pathname","search",s)),a(!s.pathname||!s.pathname.includes("#"),P("#","pathname","hash",s)),a(!s.search||!s.search.includes("#"),P("#","search","hash",s)));let r,d=""===n||""===s.pathname,l=d?"/":s.pathname;if(i||null==l)r=t;else{let n=e.length-1;if(l.startsWith("..")){let e=l.split("/");for(;".."===e[0];)e.shift(),n-=1;s.pathname=e.join("/")}r=n>=0?e[n]:"/"}let u=function(n,e){void 0===e&&(e="/");let{pathname:t,search:o="",hash:i=""}="string"==typeof n?p(n):n,s=t?t.startsWith("/")?t:function(n,e){let t=e.replace(/\/+$/,"").split("/");return n.split("/").forEach((n=>{".."===n?t.length>1&&t.pop():"."!==n&&t.push(n)})),t.length>1?t.join("/"):"/"}(t,e):e;return{pathname:s,search:R(o),hash:O(i)}}(s,r),c=l&&"/"!==l&&l.endsWith("/"),m=(d||"."===l)&&t.endsWith("/");return u.pathname.endsWith("/")||!c&&!m||(u.pathname+="/"),u}const I=n=>n.join("/").replace(/\/\/+/g,"/"),D=n=>n.replace(/\/+$/,"").replace(/^\/*/,"/"),R=n=>n&&"?"!==n?n.startsWith("?")?n:"?"+n:"",O=n=>n&&"#"!==n?n.startsWith("#")?n:"#"+n:"";class N extends Error{}const M=["post","put","patch","delete"],A=(new Set(M),["get",...M]);new Set(A),new Set([301,302,303,307,308]),new Set([307,308]),"undefined"!=typeof window&&void 0!==window.document&&window.document.createElement},35274:function(n,e,t){"use strict";t.d(e,{Qp:function(){return g},tP:function(){return b}});var o=!1;if("undefined"!=typeof window){var i={get passive(){o=!0}};window.addEventListener("testPassive",null,i),window.removeEventListener("testPassive",null,i)}var s="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&window.navigator.maxTouchPoints>1),r=[],a=!1,d=-1,l=void 0,u=void 0,p=void 0,c=function(n){return r.some((function(e){return!(!e.options.allowTouchMove||!e.options.allowTouchMove(n))}))},m=function(n){var e=n||window.event;return!!c(e.target)||(e.touches.length>1||(e.preventDefault&&e.preventDefault(),!1))},f=function(){void 0!==p&&(document.body.style.paddingRight=p,p=void 0),void 0!==l&&(document.body.style.overflow=l,l=void 0)},h=function(){if(void 0!==u){var n=-parseInt(document.body.style.top,10),e=-parseInt(document.body.style.left,10);document.body.style.position=u.position,document.body.style.top=u.top,document.body.style.left=u.left,window.scrollTo(e,n),u=void 0}},g=function(n,e){if(n){if(!r.some((function(e){return e.targetElement===n}))){var t={targetElement:n,options:e||{}};r=[].concat(function(n){if(Array.isArray(n)){for(var e=0,t=Array(n.length);e<n.length;e++)t[e]=n[e];return t}return Array.from(n)}(r),[t]),s?window.requestAnimationFrame((function(){if(void 0===u){u={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};var n=window,e=n.scrollY,t=n.scrollX,o=n.innerHeight;document.body.style.position="fixed",document.body.style.top=-e,document.body.style.left=-t,setTimeout((function(){return window.requestAnimationFrame((function(){var n=o-window.innerHeight;n&&e>=o&&(document.body.style.top=-(e+n))}))}),300)}})):function(n){if(void 0===p){var e=!!n&&!0===n.reserveScrollBarGap,t=window.innerWidth-document.documentElement.clientWidth;if(e&&t>0){var o=parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"),10);p=document.body.style.paddingRight,document.body.style.paddingRight=o+t+"px"}}void 0===l&&(l=document.body.style.overflow,document.body.style.overflow="hidden")}(e),s&&(n.ontouchstart=function(n){1===n.targetTouches.length&&(d=n.targetTouches[0].clientY)},n.ontouchmove=function(e){1===e.targetTouches.length&&function(n,e){var t=n.targetTouches[0].clientY-d;!c(n.target)&&(e&&0===e.scrollTop&&t>0||function(n){return!!n&&n.scrollHeight-n.scrollTop<=n.clientHeight}(e)&&t<0?m(n):n.stopPropagation())}(e,n)},a||(document.addEventListener("touchmove",m,o?{passive:!1}:void 0),a=!0))}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")},b=function(){s&&(r.forEach((function(n){n.targetElement.ontouchstart=null,n.targetElement.ontouchmove=null})),a&&(document.removeEventListener("touchmove",m,o?{passive:!1}:void 0),a=!1),d=-1),s?h():f(),r=[]}},86724:function(n,e,t){"use strict";var o=t(80480),i={"text/plain":"Text","text/html":"Url",default:"Text"};n.exports=function(n,e){var t,s,r,a,d,l,u=!1;e||(e={}),t=e.debug||!1;try{if(r=o(),a=document.createRange(),d=document.getSelection(),(l=document.createElement("span")).textContent=n,l.ariaHidden="true",l.style.all="unset",l.style.position="fixed",l.style.top=0,l.style.clip="rect(0, 0, 0, 0)",l.style.whiteSpace="pre",l.style.webkitUserSelect="text",l.style.MozUserSelect="text",l.style.msUserSelect="text",l.style.userSelect="text",l.addEventListener("copy",(function(o){if(o.stopPropagation(),e.format)if(o.preventDefault(),void 0===o.clipboardData){t&&console.warn("unable to use e.clipboardData"),t&&console.warn("trying IE specific stuff"),window.clipboardData.clearData();var s=i[e.format]||i.default;window.clipboardData.setData(s,n)}else o.clipboardData.clearData(),o.clipboardData.setData(e.format,n);e.onCopy&&(o.preventDefault(),e.onCopy(o.clipboardData))})),document.body.appendChild(l),a.selectNodeContents(l),d.addRange(a),!document.execCommand("copy"))throw new Error("copy command was unsuccessful");u=!0}catch(p){t&&console.error("unable to copy using execCommand: ",p),t&&console.warn("trying IE specific stuff");try{window.clipboardData.setData(e.format||"text",n),e.onCopy&&e.onCopy(window.clipboardData),u=!0}catch(p){t&&console.error("unable to copy using clipboardData: ",p),t&&console.error("falling back to prompt"),s=function(n){var e=(/mac os x/i.test(navigator.userAgent)?"\u2318":"Ctrl")+"+C";return n.replace(/#{\s*key\s*}/g,e)}("message"in e?e.message:"Copy to clipboard: #{key}, Enter"),window.prompt(s,n)}}finally{d&&("function"==typeof d.removeRange?d.removeRange(a):d.removeAllRanges()),l&&document.body.removeChild(l),r()}return u}},21700:function(n){"use strict";n.exports=function(n,e,t,o,i,s,r,a){if(!n){var d;if(void 0===e)d=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[t,o,i,s,r,a],u=0;(d=new Error(e.replace(/%s/g,(function(){return l[u++]})))).name="Invariant Violation"}throw d.framesToPop=1,d}}},33906:function(){},66567:function(n,e,t){var o,i;o=function(){var n,e,t={version:"0.2.0"},o=t.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function i(n,e,t){return n<e?e:n>t?t:n}function s(n){return 100*(-1+n)}function r(n,e,t){var i;return(i="translate3d"===o.positionUsing?{transform:"translate3d("+s(n)+"%,0,0)"}:"translate"===o.positionUsing?{transform:"translate("+s(n)+"%,0)"}:{"margin-left":s(n)+"%"}).transition="all "+e+"ms "+t,i}t.configure=function(n){var e,t;for(e in n)void 0!==(t=n[e])&&n.hasOwnProperty(e)&&(o[e]=t);return this},t.status=null,t.set=function(n){var e=t.isStarted();n=i(n,o.minimum,1),t.status=1===n?null:n;var s=t.render(!e),l=s.querySelector(o.barSelector),u=o.speed,p=o.easing;return s.offsetWidth,a((function(e){""===o.positionUsing&&(o.positionUsing=t.getPositioningCSS()),d(l,r(n,u,p)),1===n?(d(s,{transition:"none",opacity:1}),s.offsetWidth,setTimeout((function(){d(s,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){t.remove(),e()}),u)}),u)):setTimeout(e,u)})),this},t.isStarted=function(){return"number"==typeof t.status},t.start=function(){t.status||t.set(0);var n=function(){setTimeout((function(){t.status&&(t.trickle(),n())}),o.trickleSpeed)};return o.trickle&&n(),this},t.done=function(n){return n||t.status?t.inc(.3+.5*Math.random()).set(1):this},t.inc=function(n){var e=t.status;return e?("number"!=typeof n&&(n=(1-e)*i(Math.random()*e,.1,.95)),e=i(e+n,0,.994),t.set(e)):t.start()},t.trickle=function(){return t.inc(Math.random()*o.trickleRate)},n=0,e=0,t.promise=function(o){return o&&"resolved"!==o.state()?(0===e&&t.start(),n++,e++,o.always((function(){0==--e?(n=0,t.done()):t.set((n-e)/n)})),this):this},t.render=function(n){if(t.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var e=document.createElement("div");e.id="nprogress",e.innerHTML=o.template;var i,r=e.querySelector(o.barSelector),a=n?"-100":s(t.status||0),l=document.querySelector(o.parent);return d(r,{transition:"all 0 linear",transform:"translate3d("+a+"%,0,0)"}),o.showSpinner||(i=e.querySelector(o.spinnerSelector))&&m(i),l!=document.body&&u(l,"nprogress-custom-parent"),l.appendChild(e),e},t.remove=function(){p(document.documentElement,"nprogress-busy"),p(document.querySelector(o.parent),"nprogress-custom-parent");var n=document.getElementById("nprogress");n&&m(n)},t.isRendered=function(){return!!document.getElementById("nprogress")},t.getPositioningCSS=function(){var n=document.body.style,e="WebkitTransform"in n?"Webkit":"MozTransform"in n?"Moz":"msTransform"in n?"ms":"OTransform"in n?"O":"";return e+"Perspective"in n?"translate3d":e+"Transform"in n?"translate":"margin"};var a=function(){var n=[];function e(){var t=n.shift();t&&t(e)}return function(t){n.push(t),1==n.length&&e()}}(),d=function(){var n=["Webkit","O","Moz","ms"],e={};function t(n){return n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(n,e){return e.toUpperCase()}))}function o(e){var t=document.body.style;if(e in t)return e;for(var o,i=n.length,s=e.charAt(0).toUpperCase()+e.slice(1);i--;)if((o=n[i]+s)in t)return o;return e}function i(n){return n=t(n),e[n]||(e[n]=o(n))}function s(n,e,t){e=i(e),n.style[e]=t}return function(n,e){var t,o,i=arguments;if(2==i.length)for(t in e)void 0!==(o=e[t])&&e.hasOwnProperty(t)&&s(n,t,o);else s(n,i[1],i[2])}}();function l(n,e){return("string"==typeof n?n:c(n)).indexOf(" "+e+" ")>=0}function u(n,e){var t=c(n),o=t+e;l(t,e)||(n.className=o.substring(1))}function p(n,e){var t,o=c(n);l(n,e)&&(t=o.replace(" "+e+" "," "),n.className=t.substring(1,t.length-1))}function c(n){return(" "+(n.className||"")+" ").replace(/\s+/gi," ")}function m(n){n&&n.parentNode&&n.parentNode.removeChild(n)}return t},void 0===(i="function"==typeof o?o.call(e,t,e,n):o)||(n.exports=i)},31772:function(n,e,t){"use strict";var o=t(25148);function i(){}function s(){}s.resetWarningCache=i,n.exports=function(){function n(n,e,t,i,s,r){if(r!==o){var a=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function e(){return n}n.isRequired=n;var t={array:n,bigint:n,bool:n,func:n,number:n,object:n,string:n,symbol:n,any:n,arrayOf:e,element:n,elementType:n,instanceOf:e,node:n,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:s,resetWarningCache:i};return t.PropTypes=t,t}},7862:function(n,e,t){n.exports=t(31772)()},25148:function(n){"use strict";n.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},22197:function(n,e){"use strict";function t(n,e){var t=n.length;n.push(e);n:for(;0<t;){var o=t-1>>>1,i=n[o];if(!(0<s(i,e)))break n;n[o]=e,n[t]=i,t=o}}function o(n){return 0===n.length?null:n[0]}function i(n){if(0===n.length)return null;var e=n[0],t=n.pop();if(t!==e){n[0]=t;n:for(var o=0,i=n.length,r=i>>>1;o<r;){var a=2*(o+1)-1,d=n[a],l=a+1,u=n[l];if(0>s(d,t))l<i&&0>s(u,d)?(n[o]=u,n[l]=t,o=l):(n[o]=d,n[a]=t,o=a);else{if(!(l<i&&0>s(u,t)))break n;n[o]=u,n[l]=t,o=l}}}return e}function s(n,e){var t=n.sortIndex-e.sortIndex;return 0!==t?t:n.id-e.id}if("object"==typeof performance&&"function"==typeof performance.now){var r=performance;e.unstable_now=function(){return r.now()}}else{var a=Date,d=a.now();e.unstable_now=function(){return a.now()-d}}var l=[],u=[],p=1,c=null,m=3,f=!1,h=!1,g=!1,b="function"==typeof setTimeout?setTimeout:null,y="function"==typeof clearTimeout?clearTimeout:null,x="undefined"!=typeof setImmediate?setImmediate:null;function w(n){for(var e=o(u);null!==e;){if(null===e.callback)i(u);else{if(!(e.startTime<=n))break;i(u),e.sortIndex=e.expirationTime,t(l,e)}e=o(u)}}function v(n){if(g=!1,w(n),!h)if(null!==o(l))h=!0,N(S);else{var e=o(u);null!==e&&M(v,e.startTime-n)}}function S(n,t){h=!1,g&&(g=!1,y(P),P=-1),f=!0;var s=m;try{for(w(t),c=o(l);null!==c&&(!(c.expirationTime>t)||n&&!I());){var r=c.callback;if("function"==typeof r){c.callback=null,m=c.priorityLevel;var a=r(c.expirationTime<=t);t=e.unstable_now(),"function"==typeof a?c.callback=a:c===o(l)&&i(l),w(t)}else i(l);c=o(l)}if(null!==c)var d=!0;else{var p=o(u);null!==p&&M(v,p.startTime-t),d=!1}return d}finally{c=null,m=s,f=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var C,T=!1,k=null,P=-1,j=5,E=-1;function I(){return!(e.unstable_now()-E<j)}function D(){if(null!==k){var n=e.unstable_now();E=n;var t=!0;try{t=k(!0,n)}finally{t?C():(T=!1,k=null)}}else T=!1}if("function"==typeof x)C=function(){x(D)};else if("undefined"!=typeof MessageChannel){var R=new MessageChannel,O=R.port2;R.port1.onmessage=D,C=function(){O.postMessage(null)}}else C=function(){b(D,0)};function N(n){k=n,T||(T=!0,C())}function M(n,t){P=b((function(){n(e.unstable_now())}),t)}e.unstable_IdlePriority=5,e.unstable_ImmediatePriority=1,e.unstable_LowPriority=4,e.unstable_NormalPriority=3,e.unstable_Profiling=null,e.unstable_UserBlockingPriority=2,e.unstable_cancelCallback=function(n){n.callback=null},e.unstable_continueExecution=function(){h||f||(h=!0,N(S))},e.unstable_forceFrameRate=function(n){0>n||125<n?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):j=0<n?Math.floor(1e3/n):5},e.unstable_getCurrentPriorityLevel=function(){return m},e.unstable_getFirstCallbackNode=function(){return o(l)},e.unstable_next=function(n){switch(m){case 1:case 2:case 3:var e=3;break;default:e=m}var t=m;m=e;try{return n()}finally{m=t}},e.unstable_pauseExecution=function(){},e.unstable_requestPaint=function(){},e.unstable_runWithPriority=function(n,e){switch(n){case 1:case 2:case 3:case 4:case 5:break;default:n=3}var t=m;m=n;try{return e()}finally{m=t}},e.unstable_scheduleCallback=function(n,i,s){var r=e.unstable_now();switch("object"==typeof s&&null!==s?s="number"==typeof(s=s.delay)&&0<s?r+s:r:s=r,n){case 1:var a=-1;break;case 2:a=250;break;case 5:a=1073741823;break;case 4:a=1e4;break;default:a=5e3}return n={id:p++,callback:i,priorityLevel:n,startTime:s,expirationTime:a=s+a,sortIndex:-1},s>r?(n.sortIndex=s,t(u,n),null===o(l)&&n===o(u)&&(g?(y(P),P=-1):g=!0,M(v,s-r))):(n.sortIndex=a,t(l,n),h||f||(h=!0,N(S))),n},e.unstable_shouldYield=I,e.unstable_wrapCallback=function(n){var e=m;return function(){var t=m;m=e;try{return n.apply(this,arguments)}finally{m=t}}}},35655:function(n,e,t){"use strict";n.exports=t(22197)},31236:function(n){n.exports=function(n,e,t,o){var i=t?t.call(o,n,e):void 0;if(void 0!==i)return!!i;if(n===e)return!0;if("object"!=typeof n||!n||"object"!=typeof e||!e)return!1;var s=Object.keys(n),r=Object.keys(e);if(s.length!==r.length)return!1;for(var a=Object.prototype.hasOwnProperty.bind(e),d=0;d<s.length;d++){var l=s[d];if(!a(l))return!1;var u=n[l],p=e[l];if(!1===(i=t?t.call(o,u,p,l):void 0)||void 0===i&&u!==p)return!1}return!0}},80480:function(n){n.exports=function(){var n=document.getSelection();if(!n.rangeCount)return function(){};for(var e=document.activeElement,t=[],o=0;o<n.rangeCount;o++)t.push(n.getRangeAt(o));switch(e.tagName.toUpperCase()){case"INPUT":case"TEXTAREA":e.blur();break;default:e=null}return n.removeAllRanges(),function(){"Caret"===n.type&&n.removeAllRanges(),n.rangeCount||t.forEach((function(e){n.addRange(e)})),e&&e.focus()}}},68548:function(n,e){"use strict";e.Z={title:"Module Tools",description:"",icon:"https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png",themeConfig:{footer:{message:"Copyright \xa9 2023 ByteDance."},socialLinks:[{icon:"github",mode:"link",content:"https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools"}],locales:[{lang:"zh",label:"\u7b80\u4f53\u4e2d\u6587",nav:[{text:"\u6307\u5357",link:"/guide/intro/welcome",activeMatch:"^/guide/"},{text:"API",link:"/api/",activeMatch:"^/api/"},{text:"\u63d2\u4ef6",link:"/plugins/guide/getting-started",activeMatch:"^/plugins/"},{text:"v2.2.0",items:[{text:"\u66f4\u65b0\u65e5\u5fd7",link:"https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md"},{text:"\u8d21\u732e\u6307\u5357",link:"https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md"}]}],title:"Module Tools",outlineTitle:"\u76ee\u5f55",prevPageText:"\u4e0a\u4e00\u9875",nextPageText:"\u4e0b\u4e00\u9875",description:"\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848",sidebar:{"/api/":[{text:"\u6982\u89c8",link:"/module-tools/api/"},{text:"\u914d\u7f6e\u9879",collapsed:!1,collapsible:!0,items:[{text:"BuildConfig",link:"/module-tools/api/config/build-config"},{text:"BuildPreset",link:"/module-tools/api/config/build-preset"},{text:"DesignSystem",link:"/module-tools/api/config/design-system"},{text:"Plugins",link:"/module-tools/api/config/plugins"},{text:"Testing",link:"/module-tools/api/config/testing"}]},{text:"Plugin API",collapsed:!1,collapsible:!0,items:[{text:"Plugin Hooks",link:"/module-tools/api/plugin-api/plugin-hooks"}]}],"/guide/":[{text:"\u4ecb\u7ecd",collapsed:!1,collapsible:!0,items:[{text:"\u6b22\u8fce\u4f7f\u7528",link:"/module-tools/guide/intro/welcome"},{text:"\u4e3a\u4ec0\u4e48\u9700\u8981\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848",link:"/module-tools/guide/intro/why-module-engineering-solution"},{text:"\u5feb\u901f\u5f00\u59cb",link:"/module-tools/guide/intro/getting-started"}]},{text:"\u57fa\u7840\u4f7f\u7528",collapsed:!1,collapsible:!0,items:[{text:"\u5f00\u59cb\u4e4b\u524d",link:"/module-tools/guide/basic/before-getting-started"},{text:"\u547d\u4ee4\u9884\u89c8",link:"/module-tools/guide/basic/command-preview"},{text:"\u4fee\u6539\u8f93\u51fa\u4ea7\u7269",link:"/module-tools/guide/basic/modify-output-product"},{text:"\u4f7f\u7528\u5fae\u751f\u6210\u5668",link:"/module-tools/guide/basic/use-micro-generator"},{text:"\u4f7f\u7528 Storybook",link:"/module-tools/guide/basic/using-storybook"},{text:"\u6d4b\u8bd5\u9879\u76ee",link:"/module-tools/guide/basic/test-your-project"},{text:"\u7248\u672c\u7ba1\u7406\u4e0e\u53d1\u5e03",link:"/module-tools/guide/basic/publish-your-project"}]},{text:"\u8fdb\u9636\u6307\u5357",collapsed:!1,collapsible:!0,items:[{text:"\u6df1\u5165\u7406\u89e3\u6784\u5efa",link:"/module-tools/guide/advance/in-depth-about-build"},{text:"\u6df1\u5165\u7406\u89e3 dev \u547d\u4ee4",link:"/module-tools/guide/advance/in-depth-about-dev-command"},{text:"\u4f7f\u7528 Copy \u5de5\u5177",link:"/module-tools/guide/advance/copy"},{text:"\u5982\u4f55\u5904\u7406\u7b2c\u4e09\u65b9\u4f9d\u8d56",link:"/module-tools/guide/advance/external-dependency"},{text:"\u6784\u5efa umd \u4ea7\u7269",link:"/module-tools/guide/advance/build-umd"},{text:"\u4e3b\u9898\u914d\u7f6e",link:"/module-tools/guide/advance/theme-config"},{text:"\u5904\u7406\u9759\u6001\u8d44\u6e90\u6587\u4ef6",link:"/module-tools/guide/advance/asset"}]},{text:"\u6700\u4f73\u5b9e\u8df5",collapsed:!1,collapsible:!0,items:[{text:"\u5f00\u53d1\u7ec4\u4ef6",link:"/module-tools/guide/best-practices/components"}]}],"/plugins/":[{text:"\u6307\u5357",collapsed:!1,collapsible:!0,items:[{text:"\u5feb\u901f\u5f00\u59cb",link:"/module-tools/plugins/guide/getting-started"},{text:"\u63d2\u4ef6\u5bf9\u8c61",link:"/module-tools/plugins/guide/plugin-object"},{text:"Setup \u51fd\u6570",link:"/module-tools/plugins/guide/setup-function"}]},{text:"\u63d2\u4ef6\u5217\u8868",collapsed:!1,collapsible:!0,items:[{text:"\u603b\u89c8",link:"/module-tools/plugins/official-list/overview"}]}]}},{lang:"en",label:"English",nav:[{text:"Guide",link:"/en/guide/intro/welcome",activeMatch:"^/guide/"},{text:"API",link:"/en/api/",activeMatch:"^/api/"},{text:"Plugins",link:"/en/plugins/guide/getting-started",activeMatch:"^/plugins/"},{text:"v2.2.0",items:[{text:"Changelog",link:"https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md"},{text:"Contributing",link:"https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md"}]}],title:"Module Tools",description:"Module Engineering Solutions",sidebar:{"/en/api/":[{text:"Config",collapsed:!1,collapsible:!0,items:[{text:"BuildConfig",link:"/module-tools/en/api/config/build-config"},{text:"BuildPreset",link:"/module-tools/en/api/config/build-preset"},{text:"DesignSystem",link:"/module-tools/en/api/config/design-system"},{text:"Plugins",link:"/module-tools/en/api/config/plugins"},{text:"Testing",link:"/module-tools/en/api/config/testing"}]},{text:"Plugin API",collapsed:!1,collapsible:!0,items:[{text:"Plugin Hooks",link:"/module-tools/en/api/plugin-api/plugin-hooks"}]},{text:"Overview",link:"/module-tools/en/api/"}],"/en/guide/":[{text:"Introduction",collapsed:!1,collapsible:!0,items:[{text:"Welcome to Module Tools",link:"/module-tools/en/guide/intro/welcome"},{text:"Why module project solution",link:"/module-tools/en/guide/intro/why-module-engineering-solution"},{text:"Quick start",link:"/module-tools/en/guide/intro/getting-started"}]},{text:"Basic Guide",collapsed:!1,collapsible:!0,items:[{text:"Before you start",link:"/module-tools/en/guide/basic/before-getting-started"},{text:"Command Preview",link:"/module-tools/en/guide/basic/command-preview"},{text:"modify-output-product",link:"/module-tools/en/guide/basic/modify-output-product"},{text:"Using the Microgenerator",link:"/module-tools/en/guide/basic/use-micro-generator"},{text:"Using Storybook",link:"/module-tools/en/guide/basic/using-storybook"},{text:"Testing Projects",link:"/module-tools/en/guide/basic/test-your-project"},{text:"Versioning and Publishing",link:"/module-tools/en/guide/basic/publish-your-project"}]},{text:"Advanced Guide",collapsed:!1,collapsible:!0,items:[{text:"In-depth understanding of build",link:"/module-tools/en/guide/advance/in-depth-about-build"},{text:"\u6df1\u5165\u7406\u89e3 dev \u547d\u4ee4",link:"/module-tools/en/guide/advance/in-depth-about-dev-command"},{text:"Use the Copy Tools",link:"/module-tools/en/guide/advance/copy"},{text:"How to handle third-party dependencies",link:"/module-tools/en/guide/advance/external-dependency"},{text:"Build umd products",link:"/module-tools/en/guide/advance/build-umd"},{text:"Handle static resource files",link:"/module-tools/en/guide/advance/asset"},{text:"Theme Configuration",link:"/module-tools/en/guide/advance/theme-config"}]},{text:"Best practices",collapsed:!1,collapsible:!0,items:[{text:"Developing Components",link:"/module-tools/en/guide/best-practices/components"}]}],"/en/plugins/":[{text:"Guide",collapsed:!1,collapsible:!0,items:[{text:"Quick Start",link:"/module-tools/en/plugins/guide/getting-started"},{text:"Plugin Object",link:"/module-tools/en/plugins/guide/plugin-object"},{text:"Setup function",link:"/module-tools/en/plugins/guide/setup-function"}]},{text:"Plugins List",collapsed:!1,collapsible:!0,items:[{text:"Overview",link:"/module-tools/en/plugins/official-list/overview"}]}]}}]},base:"/module-tools/",root:"/Users/bytedance/modern.js/website/module-tools/docs",lang:"zh",logo:"",pages:[{id:0,title:"BuildConfig",routePath:"/module-tools/en/api/config/build-config",toc:[{id:"alias-2",text:"alias",depth:2},{id:"asset-2",text:"asset",depth:2},{id:"path-2",text:"path",depth:3},{id:"limit-2",text:"limit",depth:3},{id:"publicpath-2",text:"publicPath",depth:3},{id:"svgr-2",text:"svgr",depth:3},{id:"include-2",text:"include",depth:4},{id:"exclude-2",text:"exclude",depth:4},{id:"autoexternal-2",text:"autoExternal",depth:2},{id:"dependencies-2",text:"dependencies",depth:3},{id:"peerdependencies-4",text:"peerDependencies",depth:3},{id:"buildtype-2",text:"buildType",depth:2},{id:"copy-2",text:"copy",depth:2},{id:"define-2",text:"define",depth:2},{id:"dts-2",text:"dts",depth:2},{id:"tsconfigpath-2",text:"tsconfigPath",depth:3},{id:"distpath-2",text:"distPath",depth:3},{id:"only-2",text:"only",depth:3},{id:"externals-2",text:"externals",depth:2},{id:"format-2",text:"format",depth:2},{id:"input-2",text:"input",depth:2},{id:"jsx-2",text:"jsx",depth:2},{id:"metafile-2",text:"metafile",depth:2},{id:"minify-2",text:"minify",depth:2},{id:"outdir-2",text:"outDir",depth:2},{id:"platform-2",text:"platform",depth:2},{id:"sourcedir-4",text:"sourceDir",depth:2},{id:"sourcemap-2",text:"sourceMap",depth:2},{id:"splitting-2",text:"splitting",depth:2},{id:"style-2",text:"style",depth:2},{id:"less-4",text:"less",depth:3},{id:"lessoptions-2",text:"lessOptions",depth:4},{id:"additionaldata-4",text:"additionalData",depth:4},{id:"implementation-4",text:"implementation",depth:4},{id:"sass-2",text:"sass",depth:3},{id:"sassoptions-2",text:"sassOptions",depth:4},{id:"additionaldata-5",text:"additionalData",depth:4},{id:"implementation-5",text:"implementation",depth:4},{id:"postcss-2",text:"postcss",depth:3},{id:"inject-2",text:"inject",depth:3},{id:"automodules-2",text:"autoModules",depth:3},{id:"modules-2",text:"modules",depth:3},{id:"tailwindcss-4",text:"tailwindcss",depth:3},{id:"target-2",text:"target",depth:2},{id:"umdglobals-2",text:"umdGlobals",depth:2},{id:"umdmodulename-2",text:"umdModuleName",depth:2}],content:"BUILDCONFIG\n\nThis section describes all the configuration of Module Tools for building\n\n\nALIAS\n\n * type: Record<string, string> | Function\n * default: {'@': 'src',}\n\nFor TypeScript projects, you only need to configure compilerOptions.paths in\ntsconfig.json, Module Tools will automatically recognize the alias in\ntsconfig.json, so there is no need to configure the alias field additionally.\n\nexport default {\n  buildConfig: {\n    alias: {\n      '@common': '. /src/common',\n    },\n  },\n};\n\n\nAfter the above configuration is done, if @common/Foo.tsx is referenced in the\ncode, it will map to the <root>/src/common/Foo.tsx path.\n\nWhen the value of alias is defined as a function, you can accept the pre-defined\nalias object and modify it.\n\nexport default {\n  buildConfig: {\n    alias: alias => {\n      alias['@common'] = '. /src/common';\n    },\n  },\n};\n\n\nIt is also possible to return a new object as the final result in the function,\nwhich will override the pre-defined alias object.\n\nexport default {\n  buildConfig: {\n    alias: alias => {\n      return {\n        '@common': '. /src/common',\n      };\n    },\n  },\n};\n\n\n\nASSET\n\n\nPATH\n\nStatic resource output path, will be based on outDir\n\n * type: string\n * default: assets\n\n\nLIMIT\n\nThreshold for automatically inlining static resources when building, resources\nless than 10 KB will be automatically inlined into the bundle product\n\n * type: number\n * default: 10 * 1024\n\n\nPUBLICPATH\n\nThe CDN prefix given to unlinked resources when packaging\n\n * type: string\n * default: undefined\n\nexport default {\n  buildConfig: {\n    asset: {\n      publicPath: 'https://xxx/',\n    },\n  },\n};\n\n\nAt this point, all static resources will be prefixed with https://xxx/\n\n\nSVGR\n\nPackaged to handle svg as a React component, options reference svgr, plus\nsupport for two configuration items include and exclude to match the svg file to\nbe handled\n\n * type: boolean | Object\n * default: false\n\nINCLUDE\n\nSet the matching svg file\n\n * type: string | RegExp | (string | RegExp)[]\n * default: /\\.svg$/\n\nEXCLUDE\n\nSet unmatched svg files\n\n * type: string | RegExp | (string | RegExp)[]\n * default: undefined\n\n\nAUTOEXTERNAL\n\nAutomatically externalize project dependencies and peerDependencies and not\npackage them into the final bundle\n\n * type: boolean | Object\n * default: true\n\n\nDEPENDENCIES\n\nWhether or not the dep dependencies of the external project are needed\n\n * type: boolean\n * default: true\n\n\nPEERDEPENDENCIES\n\nWhether to require peerDep dependencies for external projects\n\n * type: boolean\n * default: true\n\n\nBUILDTYPE\n\nThe build type, bundle will package your code, bundleless will only do the code\nconversion\n\n * type: 'bundle' | 'bundleless'\n * default: bundle\n\n\nCOPY\n\nCopies the specified file or directory into the build output directory\n\n * type: Array\n * default: []\n\nexport default {\n  buildConfig: {\n    copy: [{ from: '. /src/assets', to: '' }],\n  },\n};\n\n\nReference for array settings: copy-webpack-plugin patterns\n\n\nDEFINE\n\nDefine global variables that will be injected into the code\n\n * type: Record<string, string>\n * default: {}\n\nSince the define function is implemented by global text replacement, you need to\nensure that the global variable values are strings. A safer approach is to\nconvert the value of each global variable to a string, using JSON.stringify, as\nfollows.\n\nexport default {\n  buildConfig: {\n    define: {\n      VERSION: JSON.stringify('1.0'),\n    },\n  },\n};\n\n\nTo prevent excessive global replacement substitution, it is recommended that the\nfollowing two principles be followed when using\n\n * Use upper case for global constants\n * Customize the prefix and suffix of global constants to ensure uniqueness\n\n\nDTS\n\nThe dts file generates the relevant configuration, by default it generates\n\n * type: false | Object\n * default: {}\n\n\nTSCONFIGPATH\n\nPath to the tsconfig file\n\n * type: string\n * default: . /tsconfig.json\n\n\nDISTPATH\n\nThe output path of the dts file, based on outDir\n\n * type: string\n * default: . /types\n\n\nONLY\n\nGenerate only dts files, not js files\n\n * type: boolean\n * default: false\n\n\nEXTERNALS\n\nConfigure external dependencies that will not be packaged into the final bundle\n\n * type: (string | RegExp)[]\n * default: []\n\n\nFORMAT\n\nThe format of the js product output, where iife and umd can only take effect\nwhen buildType is bundle\n\n * type: 'esm' | 'cjs' | 'iife' | 'umd'\n * default: cjs\n\n\nINPUT\n\nSpecify the entry file for the build, in the form of an array that can specify\nthe directory\n\n * type: string[] | Record<string, string>\n * default: ['src/index.ts'] in bundle mode, ['src'] in bundleless mode\n\nexport default {\n  buildConfig: {\n    input: ['src/index.ts', 'src/index2.ts'],\n  },\n};\n\n\n\nJSX\n\nSpecify the compilation method of jsx, default support React17, automatically\ninject jsx runtime code\n\n * type: automatic | classic\n * default: automatic\n\n\nMETAFILE\n\nesbuild to produce some metadata about the build in JSON format, which can be\nvisualized by tools such as bundle-buddy\n\n * type: boolean\n * default: false\n\n\nMINIFY\n\nUse esbuild or terser to compress code, also pass terserOptions\n\n * type: 'terser' | 'esbuild' | false | Object\n * default: false\n\nexport default {\n  buildConfig: {\n    minify: {\n      compress: {\n        drop_console: true,\n      },\n    },\n  },\n};\n\n\n\nOUTDIR\n\nSpecifies the output directory of the build\n\n * type: string\n * default: dist\n\n\nPLATFORM\n\nGenerates code for the node environment by default, you can also specify browser\nwhich will generate code for the browser environment\n\n * type: 'browser' | 'node'\n * default: node\n\n\nSOURCEDIR\n\nSpecify the source directory of the build, default is src, which is used to\ngenerate the corresponding product directory based on the source directory\nstructure when building bundleless.\n\n * type: string\n * default: src\n\n\nSOURCEMAP\n\nWhether to generate sourceMap or not\n\n * type: boolean | 'inline' | 'external'\n * default: false\n\n\nSPLITTING\n\nWhether to enable code splitting\n\n * type: boolean\n * default: false\n\n\nSTYLE\n\nConfigure style-related configuration\n\n\nLESS\n\nless-related configuration\n\nLESSOPTIONS\n\nRefer to less for detailed configuration\n\n * type: Object\n * default: { javascriptEnabled: true }\n\nADDITIONALDATA\n\nAdd Less code to the beginning of the entry file.\n\n * type: string\n * default: undefined\n\nexport default {\n  buildConfig: {\n    style: {\n      less: {\n        additionalData: `@base-color: #c6538c;`,\n      },\n    },\n  },\n};\n\n\nIMPLEMENTATION\n\nConfigure the implementation library used by Less, if not specified, the\nbuilt-in version used is 4.1.3\n\n * type: string | Object\n * default: undefined\n\nSpecify the implementation library for Less when the Object type is specified\n\nexport default {\n  buildConfig: {\n    style: {\n      less: {\n        implementation: require('less'),\n      },\n    },\n  },\n};\n\n\nFor the string type, specify the path to the implementation library for Less\n\nexport default {\n  buildConfig: {\n    style: {\n      less: {\n        implementation: require.resolve('less'),\n      },\n    },\n  },\n};\n\n\n\nSASS\n\nsass-related configuration\n\nSASSOPTIONS\n\nRefer to node-sass for detailed configuration\n\n * type: Object\n * default: {}\n\nADDITIONALDATA\n\nAdd Sass code to the beginning of the entry file.\n\n * type: string | Function\n * default: undefined\n\nexport default {\n  buildConfig: {\n    style: {\n      sass: {\n        additionalData: `$base-color: #c6538c;\n          $border-dark: rgba($base-color, 0.88);`,\n      },\n    },\n  },\n};\n\n\nIMPLEMENTATION\n\nConfigure the implementation library used by Sass, the built-in version used is\n1.5.4 if not specified\n\n * type: string | Object\n * default: undefined\n\nSpecify the implementation library for Sass when the Object type is specified\n\nexport default {\n  buildConfig: {\n    style: {\n      sass: {\n        implementation: require('sass'),\n      },\n    },\n  },\n};\n\n\nFor the string type, specify the path to the Sass implementation library\n\nexport default {\n  buildConfig: {\n    style: {\n      sass: {\n        implementation: require.resolve('sass'),\n      },\n    },\n  },\n};\n\n\n\nPOSTCSS\n\n * plugins\n * processOptions\n\nSee postcss for detailed configuration\n\n\nINJECT\n\nConfigure whether to insert style into js in packaged mode\n\n * type: boolean\n * default: false\n\n\nAUTOMODULES\n\nEnable CSS Modules automatically based on the filename.\n\n * type: boolean | RegExp\n * default: true\n\ntrue : Enables CSS Modules for style files ending with .module.css .module.less\n.module.scss .module.sass filenames\n\nfalse : Disable CSS Modules.\n\nRegExp : Enables CSS Modules for all files that match the regular condition.\n\n\nMODULES\n\nCSS Modules configuration\n\n * type: Object\n * default: {}\n\nA common configuration is localsConvention, which changes the class name\ngeneration rules for css modules\n\nexport default {\n  buildConfig: {\n    style: {\n      modules: {\n        localsConvention: 'camelCaseOnly',\n      },\n    },\n  },\n};\n\n\nFor the following styles\n\n.box-title {\n  color: red;\n}\n\n\nYou can use styles.boxTitle to access\n\nFor detailed configuration see postcss-modules\n\n\nTAILWINDCSS\n\ntailwindcss related configuration\n\n * type: Object | Function\n * default: see configuration details below\n\nconst tailwind = {\n  content: [\n    './config/html/**/*.html',\n    './config/html/**/*.ejs',\n    './config/html/**/*.hbs',\n    './src/**/*.js',\n    './src/**/*.jsx',\n    './src/**/*.ts',\n    './src/**/*.tsx',\n    './storybook/**/*',\n  ],\n};\n\n\nWhen the value is of type Object, it is merged with the default configuration\nvia Object.assign.\n\nWhen the value is of type Function, the object returned by the function is\nmerged with the default configuration via Object.assign.\n\nThe theme property is not allowed, otherwise the build will fail, using\ndesignSystem as the Tailwind CSS Theme configuration.\n\nThe rest of the usage is the same as Tailwind CSS: Quick Portal.\n\n\nTARGET\n\nSpecify the target environment for the build\n\n * type: 'es5' | 'es6' | 'es2015' | 'es2016' | 'es2017' | 'es2018' | 'es2019' |\n   'es2020' | 'es2021' | 'es2022' | 'esnext'\n * default: 'es6'\n\n\nUMDGLOBALS\n\nSpecify global variables for external import of umd products\n\n * type: Record<string, string>\n * default: {}\n\nexport default {\n  buildConfig: {\n    umdGlobals: {\n      react: 'React',\n      'react-dom': 'ReactDOM',\n    },\n  },\n};\n\n\nAt this point, react and react-dom will be seen as global variables imported\nexternally and will not be packed into the umd product, but will be accessible\nby way of global.React and global.ReactDOM\n\n\nUMDMODULENAME\n\nSpecifies the module name of the umd product\n\n * type: string | Function\n * default: name => name\n\nexport default {\n  buildConfig: {\n    format: 'umd',\n    umdModuleName: 'myLib',\n  },\n};\n\n\nAt this point the umd product will go to mount on global.myLib\n\n * The module name of the umd product must not conflict with the global variable\n   name.\n * Module names should not contain special characters like -, @, /, etc.\n\nAlso the function form can take one parameter, which is the output path of the\ncurrent package file\n\nexport default {\n  buildConfig: {\n    format: 'umd',\n    umdModuleName: path => {\n      if (path.includes('index')) {\n        return 'myLib';\n      } else {\n        return 'myLib2';\n      }\n    },\n  },\n};\n",frontmatter:{sidebar_position:1}},{id:1,title:"BuildPreset",routePath:"/module-tools/en/api/config/build-preset",toc:[{id:"string-2",text:"string",depth:2},{id:"npm-library-2",text:"``npm-library'`",depth:3},{id:"npm-library-with-umd-2",text:"npm-library-with-umd'",depth:3},{id:"npm-component-2",text:"'npm-component'",depth:3},{id:"npm-component-with-umd-2",text:"'npm-component-with-umd'",depth:3},{id:"about-the-ecmascript-versions-supported-by-the-presets-and-es5-esnext-1",text:"About the ECMAScript versions supported by the presets and {es5.... .esnext}",depth:3},{id:"function-2",text:"Function",depth:2}],content:"BUILDPRESET\n\nA build preset string or preset function. Provides out-of-the-box build\nconfiguration\n\n * type: string | Function\n * default: undefined\n\n\nSTRING\n\nThe string form allows you to use the built-in presets directly\n\n\n\nexport default defineConfig({\n  buildPreset: 'npm-library',\n});\n\n\n\n``NPM-LIBRARY'`\n\nLibrary generic schema used under class NPM package manager, contains esm and\ncjs Bundle products, and includes a type file.\n\nAbout the class NPM Package Manager\n\n * npm\n * yarn\n * pnpm\n\n{\n  \"main\": \". /dist/lib/index.js\",\n  \"module\": \". /dist/es/index.js\",\n  \"types\": \". /dist/types/index.d.ts\"\n}\n\n\nThe build configuration corresponding to the preset string.\n\nexport const buildConfig = [\n  {\n    format: 'cjs',\n    target: 'es6',\n    buildType: 'bundle',\n    outDir: '. /lib',\n  },\n  {\n    format: 'esm',\n    target: 'es6',\n    buildType: 'bundle',\n    outDir: '. /es',\n  },\n  {\n    buildType: 'bundle',\n    outDir: '. /types',\n    dts: {\n      only: true,\n    },\n  },\n];\n\n\n\nNPM-LIBRARY-WITH-UMD'\n\nUsed under class NPM package manager, and Library supports a similar pattern to\nunpkg. Additional umd products are provided on top of the pre-defined\nnpm-library.\n\n{\n    \"main\": \". /dist/lib/index.js\",\n    \"module\": \". /dist/es/index.js\",\n    \"types\": \". /dist/types/index.d.ts\",\n    \"unpkg\": \". /dist/umd/index.js\",\n};\n\n\nThe build configuration corresponding to the preset string.\n\nexport const buildConfig = [\n  {\n    format: 'cjs',\n    target: 'es6',\n    buildType: 'bundle',\n    outDir: '. /lib',\n  },\n  {\n    format: 'esm',\n    target: 'es6',\n    buildType: 'bundle',\n    outDir: '. /es',\n  },\n  {\n    format: 'umd',\n    target: 'es6',\n    buildType: 'bundle',\n    outDir: '. /umd',\n  },\n  {\n    buildType: 'bundle',\n    outDir: '. /types',\n    dts: {\n      only: true,\n    },\n  },\n];\n\n\n\n'NPM-COMPONENT'\n\nA generic pattern for components (libraries) used under the class NPM package\nmanager. Contains both esm and cjs Bundleless products (for easy Tree shaking\noptimization), as well as including a copy of the type file.\n\nFor style files included in the source code, the products provide the compiled\nproduct of the style and the source file of the style.\n\n{\n    \"main\": \". /dist/lib/index.js\", // bundleless type\n    \"module\": \". /dist/es/index.js\", // bundleless type\n    \"types\": \". /dist/types/index.d.ts\",\n};\n\n\nThe pre-defined strings correspond to the build configuration.\n\nexport const buildConfig = [\n  {\n    format: 'cjs',\n    target: 'es6',\n    buildType: 'bundleless',\n    outDir: '. /lib',\n  },\n  {\n    format: 'esm',\n    target: 'es6',\n    buildType: 'bundleless',\n    outDir: '. /es',\n  },\n  {\n    buildType: 'bundleless',\n    outDir: '. /types',\n    dts: {\n      only: true,\n    },\n  },\n];\n\n\n\n'NPM-COMPONENT-WITH-UMD'\n\nComponent (library) used under class NPM package manager, with support for class\nunpkg schema. Additional umd products are provided on top of the pre-defined\nnpm-component.\n\n{\n    \"main\": \". /dist/lib/index.js\", // bundleless type\n    \"module\": \". /dist/es/index.js\", // bundleless type\n    \"types\": \". /dist/types/index.d.ts\",\n    \"unpkg\": \". /dist/umd/index.js\",\n};\n\n\nexport const buildConfig = [\n  {\n    format: 'cjs',\n    target: 'es6',\n    buildType: 'bundleless',\n    outDir: '. /lib',\n  },\n  {\n    format: 'esm',\n    target: 'es6',\n    buildType: 'bundleless',\n    outDir: '. /es',\n  },\n  {\n    format: 'umd',\n    target: 'es6',\n    buildType: 'bundle',\n    outDir: '. /umd',\n  },\n  {\n    buildType: 'bundleless',\n    outDir: '. /types',\n    dts: {\n      only: true,\n    },\n  },\n];\n\n\n\nABOUT THE ECMASCRIPT VERSIONS SUPPORTED BY THE PRESETS AND {ES5.... .ESNEXT}\n\nWhen you want to use a buildPreset preset that supports other ECMAScript\nversions, you can directly add the supported versions to the 'npm-library',\n'npm-library-with-umd', 'npm-component', 'npm-component-with-umd' presets.\n\nFor example, if you want the 'npm-library' preset to support 'es2017', you can\nconfigure it as follows.\n\n\n\nexport default defineConfig({\n  buildPreset: 'npm-library-es2017',\n});\n\n\n\nFUNCTION\n\nThe way the function is configured, you can get the preset value from the preset\nparameter and then modify the build configuration inside to customize your build\nconfiguration. The following is an example of how a function can be configured\nto compress a build product.\n\n\n\nexport default defineConfig({\n  buildPreset({ preset }) {\n    const { NPM_LIBRARY } = preset;\n    return NPM_LIBRARY.map(config => {\n      config.minify = {\n        compress: {\n          drop_console: true,\n        },\n      };\n      return config;\n    });\n  },\n});\n",frontmatter:{sidebar_position:2}},{id:2,title:"DesignSystem",routePath:"/module-tools/en/api/config/design-system",toc:[{id:"screens-2",text:"Screens",depth:2},{id:"max-width-breakpoints-1",text:"Max-width breakpoints",depth:3},{id:"multiple-range-breakpoints-1",text:"Multiple range breakpoints",depth:3},{id:"custom-media-queries-1",text:"Custom media queries",depth:3},{id:"print-styles-1",text:"Print styles",depth:3},{id:"dark-mode-2",text:"Dark Mode",depth:3},{id:"colors-2",text:"Colors",depth:2},{id:"spacing-2",text:"Spacing",depth:2},{id:"core-plugins-1",text:"Core plugins",depth:2},{id:"customizing-the-default-configuration-1",text:"Customizing the default configuration",depth:2},{id:"override-the-default-configuration-1",text:"Override the default configuration",depth:3},{id:"extending-the-default-configuration-1",text:"Extending the default configuration",depth:3},{id:"referencing-other-values-1",text:"Referencing other values",depth:3},{id:"disabling-the-entire-core-plugin-1",text:"Disabling the entire core plugin",depth:3},{id:"adding-your-own-key-1",text:"Adding your own key",depth:3},{id:"configuration-references-1",text:"Configuration references",depth:2}],content:"DESIGNSYSTEM\n\nThis chapter describes the configuration related to designSystem\n\nThe Tailwind CSS feature needs to be enabled first via pnpm run new.\n\n * type: Object\n * default: see configuration details below.\n\nconst designSystem = {\n  screens: {\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n  },\n  colors: {\n    transparent: 'transparent',\n    current: 'currentColor',\n\n    black: '#000',\n    white: '#fff',\n\n    gray: {\n      100: '#f7fafc',\n      200: '#edf2f7',\n      300: '#e2e8f0',\n      400: '#cbd5e0',\n      500: '#a0aec0',\n      600: '#718096',\n      700: '#4a5568',\n      800: '#2d3748',\n      900: '#1a202c',\n    },\n    red: {\n      100: '#fff5f5',\n      200: '#fed7d7',\n      300: '#feb2b2',\n      400: '#fc8181',\n      500: '#f56565',\n      600: '#e53e3e',\n      700: '#c53030',\n      800: '#9b2c2c',\n      900: '#742a2a',\n    },\n    orange: {\n      100: '#fffaf0',\n      200: '#feebc8',\n      300: '#fbd38d',\n      400: '#f6ad55',\n      500: '#ed8936',\n      600: '#dd6b20',\n      700: '#c05621',\n      800: '#9c4221',\n      900: '#7b341e',\n    },\n    yellow: {\n      100: '#fffff0',\n      200: '#fefcbf',\n      300: '#faf089',\n      400: '#f6e05e',\n      500: '#ecc94b',\n      600: '#d69e2e',\n      700: '#b7791f',\n      800: '#975a16',\n      900: '#744210',\n    },\n    green: {\n      100: '#f0fff4',\n      200: '#c6f6d5',\n      300: '#9ae6b4',\n      400: '#68d391',\n      500: '#48bb78',\n      600: '#38a169',\n      700: '#2f855a',\n      800: '#276749',\n      900: '#22543d',\n    },\n    teal: {\n      100: '#e6fffa',\n      200: '#b2f5ea',\n      300: '#81e6d9',\n      400: '#4fd1c5',\n      500: '#38b2ac',\n      600: '#319795',\n      700: '#2c7a7b',\n      800: '#285e61',\n      900: '#234e52',\n    },\n    blue: {\n      100: '#ebf8ff',\n      200: '#bee3f8',\n      300: '#90cdf4',\n      400: '#63b3ed',\n      500: '#4299e1',\n      600: '#3182ce',\n      700: '#2b6cb0',\n      800: '#2c5282',\n      900: '#2a4365',\n    },\n    indigo: {\n      100: '#ebf4ff',\n      200: '#c3dafe',\n      300: '#a3bffa',\n      400: '#7f9cf5',\n      500: '#667eea',\n      600: '#5a67d8',\n      700: '#4c51bf',\n      800: '#434190',\n      900: '#3c366b',\n    },\n    purple: {\n      100: '#faf5ff',\n      200: '#e9d8fd',\n      300: '#d6bcfa',\n      400: '#b794f4',\n      500: '#9f7aea',\n      600: '#805ad5',\n      700: '#6b46c1',\n      800: '#553c9a',\n      900: '#44337a',\n    },\n    pink: {\n      100: '#fff5f7',\n      200: '#fed7e2',\n      300: '#fbb6ce',\n      400: '#f687b3',\n      500: '#ed64a6',\n      600: '#d53f8c',\n      700: '#b83280',\n      800: '#97266d',\n      900: '#702459',\n    },\n  },\n  spacing: {\n    px: '1px',\n    0: '0',\n    1: '0.25rem',\n    2: '0.5rem',\n    3: '0.75rem',\n    4: '1rem',\n    5: '1.25rem',\n    6: '1.5rem',\n    8: '2rem',\n    10: '2.5rem',\n    12: '3rem',\n    16: '4rem',\n    20: '5rem',\n    24: '6rem',\n    32: '8rem',\n    40: '10rem',\n    48: '12rem',\n    56: '14rem',\n    64: '16rem',\n  },\n  backgroundColor: theme => theme('colors'),\n  backgroundOpacity: theme => theme('opacity'),\n  backgroundPosition: {\n    bottom: 'bottom',\n    center: 'center',\n    left: 'left',\n    'left-bottom': 'left bottom',\n    'left-top': 'left top',\n    right: 'right',\n    'right-bottom': 'right bottom',\n    'right-top': 'right top',\n    top: 'top',\n  },\n  backgroundSize: {\n    auto: 'auto',\n    cover: 'cover',\n    contain: 'contain',\n  },\n  borderColor: theme => ({\n    ...theme('colors'),\n    default: theme('colors.gray.300', 'currentColor'),\n  }),\n  borderOpacity: theme => theme('opacity'),\n  borderRadius: {\n    none: '0',\n    sm: '0.125rem',\n    default: '0.25rem',\n    md: '0.375rem',\n    lg: '0.5rem',\n    full: '9999px',\n  },\n  borderWidth: {\n    default: '1px',\n    0: '0',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  boxShadow: {\n    xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n    default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',\n    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',\n    inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',\n    outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',\n    none: 'none',\n  },\n  container: {},\n  cursor: {\n    auto: 'auto',\n    default: 'default',\n    pointer: 'pointer',\n    wait: 'wait',\n    text: 'text',\n    move: 'move',\n    'not-allowed': 'not-allowed',\n  },\n  divideColor: theme => theme('borderColor'),\n  divideOpacity: theme => theme('borderOpacity'),\n  divideWidth: theme => theme('borderWidth'),\n  fill: {\n    current: 'currentColor',\n  },\n  flex: {\n    1: '1 1 0%',\n    auto: '1 1 auto',\n    initial: '0 1 auto',\n    none: 'none',\n  },\n  flexGrow: {\n    0: '0',\n    default: '1',\n  },\n  flexShrink: {\n    0: '0',\n    default: '1',\n  },\n  fontFamily: {\n    sans: [\n      'system-ui',\n      '-apple-system',\n      'BlinkMacSystemFont',\n      '\"Segoe UI\"',\n      'Roboto',\n      '\"Helvetica Neue\"',\n      'Arial',\n      '\"Noto Sans\"',\n      'sans-serif',\n      '\"Apple Color Emoji\"',\n      '\"Segoe UI Emoji\"',\n      '\"Segoe UI Symbol\"',\n      '\"Noto Color Emoji\"',\n    ],\n    serif: ['Georgia', 'Cambria', '\"Times New Roman\"', 'Times', 'serif'],\n    mono: [\n      'Menlo',\n      'Monaco',\n      'Consolas',\n      '\"Liberation Mono\"',\n      '\"Courier New\"',\n      'monospace',\n    ],\n  },\n  fontSize: {\n    xs: '0.75rem',\n    sm: '0.875rem',\n    base: '1rem',\n    lg: '1.125rem',\n    xl: '1.25rem',\n    '2xl': '1.5rem',\n    '3xl': '1.875rem',\n    '4xl': '2.25rem',\n    '5xl': '3rem',\n    '6xl': '4rem',\n  },\n  fontWeight: {\n    hairline: '100',\n    thin: '200',\n    light: '300',\n    normal: '400',\n    medium: '500',\n    semibold: '600',\n    bold: '700',\n    extrabold: '800',\n    black: '900',\n  },\n  height: theme => ({\n    auto: 'auto',\n    ...theme('spacing'),\n    full: '100%',\n    screen: '100vh',\n  }),\n  inset: {\n    0: '0',\n    auto: 'auto',\n  },\n  letterSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.1em',\n  },\n  lineHeight: {\n    none: '1',\n    tight: '1.25',\n    snug: '1.375',\n    normal: '1.5',\n    relaxed: '1.625',\n    loose: '2',\n    3: '.75rem',\n    4: '1rem',\n    5: '1.25rem',\n    6: '1.5rem',\n    7: '1.75rem',\n    8: '2rem',\n    9: '2.25rem',\n    10: '2.5rem',\n  },\n  listStyleType: {\n    none: 'none',\n    disc: 'disc',\n    decimal: 'decimal',\n  },\n  margin: (theme, { negative }) => ({\n    auto: 'auto',\n    ...theme('spacing'),\n    ...negative(theme('spacing')),\n  }),\n  maxHeight: {\n    full: '100%',\n    screen: '100vh',\n  },\n  maxWidth: (theme, { breakpoints }) => ({\n    none: 'none',\n    xs: '20rem',\n    sm: '24rem',\n    md: '28rem',\n    lg: '32rem',\n    xl: '36rem',\n    '2xl': '42rem',\n    '3xl': '48rem',\n    '4xl': '56rem',\n    '5xl': '64rem',\n    '6xl': '72rem',\n    full: '100%',\n    ...breakpoints(theme('screens')),\n  }),\n  minHeight: {\n    0: '0',\n    full: '100%',\n    screen: '100vh',\n  },\n  minWidth: {\n    0: '0',\n    full: '100%',\n  },\n  objectPosition: {\n    bottom: 'bottom',\n    center: 'center',\n    left: 'left',\n    'left-bottom': 'left bottom',\n    'left-top': 'left top',\n    right: 'right',\n    'right-bottom': 'right bottom',\n    'right-top': 'right top',\n    top: 'top',\n  },\n  opacity: {\n    0: '0',\n    25: '0.25',\n    50: '0.5',\n    75: '0.75',\n    100: '1',\n  },\n  order: {\n    first: '-9999',\n    last: '9999',\n    none: '0',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n  },\n  padding: theme => theme('spacing'),\n  placeholderColor: theme => theme('colors'),\n  placeholderOpacity: theme => theme('opacity'),\n  space: (theme, { negative }) => ({\n    ...theme('spacing'),\n    ...negative(theme('spacing')),\n  }),\n  stroke: {\n    current: 'currentColor',\n  },\n  strokeWidth: {\n    0: '0',\n    1: '1',\n    2: '2',\n  },\n  textColor: theme => theme('colors'),\n  textOpacity: theme => theme('opacity'),\n  width: theme => ({\n    auto: 'auto',\n    ...theme('spacing'),\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    '1/12': '8.333333%',\n    '2/12': '16.666667%',\n    '3/12': '25%',\n    '4/12': '33.333333%',\n    '5/12': '41.666667%',\n    '6/12': '50%',\n    '7/12': '58.333333%',\n    '8/12': '66.666667%',\n    '9/12': '75%',\n    '10/12': '83.333333%',\n    '11/12': '91.666667%',\n    full: '100%',\n    screen: '100vw',\n  }),\n  zIndex: {\n    auto: 'auto',\n    0: '0',\n    10: '10',\n    20: '20',\n    30: '30',\n    40: '40',\n    50: '50',\n  },\n  gap: theme => theme('spacing'),\n  gridTemplateColumns: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n    7: 'repeat(7, minmax(0, 1fr))',\n    8: 'repeat(8, minmax(0, 1fr))',\n    9: 'repeat(9, minmax(0, 1fr))',\n    10: 'repeat(10, minmax(0, 1fr))',\n    11: 'repeat(11, minmax(0, 1fr))',\n    12: 'repeat(12, minmax(0, 1fr))',\n  },\n  gridColumn: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n    'span-7': 'span 7 / span 7',\n    'span-8': 'span 8 / span 8',\n    'span-9': 'span 9 / span 9',\n    'span-10': 'span 10 / span 10',\n    'span-11': 'span 11 / span 11',\n    'span-12': 'span 12 / span 12',\n  },\n  gridColumnStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridColumnEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridTemplateRows: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n  },\n  gridRow: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n  },\n  gridRowStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  gridRowEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  transformOrigin: {\n    center: 'center',\n    top: 'top',\n    'top-right': 'top right',\n    right: 'right',\n    'bottom-right': 'bottom right',\n    bottom: 'bottom',\n    'bottom-left': 'bottom left',\n    left: 'left',\n    'top-left': 'top left',\n  },\n  scale: {\n    0: '0',\n    50: '.5',\n    75: '.75',\n    90: '.9',\n    95: '.95',\n    100: '1',\n    105: '1.05',\n    110: '1.1',\n    125: '1.25',\n    150: '1.5',\n  },\n  rotate: {\n    '-180': '-180deg',\n    '-90': '-90deg',\n    '-45': '-45deg',\n    0: '0',\n    45: '45deg',\n    90: '90deg',\n    180: '180deg',\n  },\n  translate: (theme, { negative }) => ({\n    ...theme('spacing'),\n    ...negative(theme('spacing')),\n    '-full': '-100%',\n    '-1/2': '-50%',\n    '1/2': '50%',\n    full: '100%',\n  }),\n  skew: {\n    '-12': '-12deg',\n    '-6': '-6deg',\n    '-3': '-3deg',\n    0: '0',\n    3: '3deg',\n    6: '6deg',\n    12: '12deg',\n  },\n  transitionProperty: {\n    none: 'none',\n    all: 'all',\n    default:\n      'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',\n    colors: 'background-color, border-color, color, fill, stroke',\n    opacity: 'opacity',\n    shadow: 'box-shadow',\n    transform: 'transform',\n  },\n  transitionTimingFunction: {\n    linear: 'linear',\n    in: 'cubic-bezier(0.4, 0, 1, 1)',\n    out: 'cubic-bezier(0, 0, 0.2, 1)',\n    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',\n  },\n  transitionDuration: {\n    75: '75ms',\n    100: '100ms',\n    150: '150ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n  transitionDelay: {\n    75: '75ms',\n    100: '100ms',\n    150: '150ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n};\n\n\nMore about TailwindCSS configuration\n\nThe designSystem is used to define the project's color palette, typographic\nscales (Typographic Scales or Type Scale), font list, breakpoints, border\nrounding values, etc. Since Modern.js borrows the design approach from Tailwind\nTheme and integrates with Tailwind CSS internally, designSystem is used in the\nsame way as Tailwind CSS Theme\n\nThe designSystem object contains the screens, colors and spacing properties, as\nwell as each customizable core plugin.\n\n\nSCREENS\n\nThe responsive breakpoints in your project can be customized using screens: the\n\nconst designSystem = {\n  screens: {\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n  },\n};\n\n\nwhere the property name in the screens object is the screen name (used as a\nprefix for the adaptive utility variants generated by Tailwind CSS, e.g.\nmd:text-center) and the value is the min-width at which the breakpoint should\nstart.\n\nDefault breakpoints are inspired by common device resolutions: the\n\nconst designSystem = {\n  screens: {\n    sm: '640px',\n    // => @media (min-width: 640px) { ... }\n\n    md: '768px',\n    // => @media (min-width: 768px) { ... }\n\n    lg: '1024px',\n    // => @media (min-width: 1024px) { ... }\n\n    xl: '1280px',\n    // => @media (min-width: 1280px) { ... }\n  },\n};\n\n\nYou can use any name you like as a breakpoint property in your project: the\n\nconst designSystem = {\n  screens: {\n    tablet: '640px',\n    // => @media (min-width: 640px) { ... }\n\n    laptop: '1024px',\n    // => @media (min-width: 1024px) { ... }\n\n    desktop: '1280px',\n    // => @media (min-width: 1280px) { ... }\n  },\n};\n\n\nThese screen names are reflected in utilities, so text-center now looks like\nthis\n\n.text-center {\n  text-align: center;\n}\n\n@media (min-width: 640px) {\n  .tablet\\:text-center {\n    text-align: center;\n  }\n}\n\n@media (min-width: 1024px) {\n  .laptop\\:text-center {\n    text-align: center;\n  }\n}\n\n@media (min-width: 1280px) {\n  .desktop\\:text-center {\n    text-align: center;\n  }\n}\n\n\n\nMAX-WIDTH BREAKPOINTS\n\nTo use the max-width breakpoint instead of min-width, you can specify the screen\nas an object with the max attribute.\n\nconst designSystem = {\n  screens: {\n    xl: { max: '1279px' }\n    // => @media (max-width: 1279px) { ... }\n\n    lg: { max: '1023px' },\n    // => @media (max-width: 1023px) { ... }\n\n    md: { max: '767px' },\n    // => @media (max-width: 767px) { ... }\n\n    sm: { max: '639px' },\n    // => @media (max-width: 639px) { ... }\n  },\n};\n\n\nIf necessary, to create breakpoints with min-width and max-width definitions,\ne.g.\n\nconst designSystem = {\n  screens: {\n    sm: { min: '640px', max: '767px' }\n    md: { min: '768px', max: '1023px' }\n    lg: { min: '1024px', max: '1279px' }, lg: { min: '1024px', max: '1279px' },\n    xl: { min: '1280px' }\n  },\n};\n\n\n\nMULTIPLE RANGE BREAKPOINTS\n\nSometimes it can be useful to apply a single breakpoint definition to multiple\nscopes.\n\nFor example, suppose you have a sidebar and want the breakpoint to be based on\nthe width of the content area rather than the entire viewport. You can simulate\nthis situation by using a smaller breakpoint style when the sidebar is visible\nand the content area is narrowed: the\n\nconst designSystem = {\n  screens: {\n    sm: '500px',\n    md: [\n      // Sidebar appears at 768px, so revert to `sm:` styles between 768px\n      // and 868px, after which the main content area is wide enough again to\n      // apply the `md:` styles.\n      { min: '668px', max: '767px' }\n      { min: '868px' }, { min: '868px' },\n    ],\n    lg: '1100px',\n    xl: '1400px',\n  },\n};\n\n\n\nCUSTOM MEDIA QUERIES\n\nIf a fully customizable media query is required for a breakpoint, an object with\nthe raw attribute can be used.\n\nconst designSystem = {\n  extend: {\n    screens: {\n      portrait: { raw: '(orientation: portrait)' },\n      // => @media (orientation: portrait) { ... }\n    },\n  },\n};\n\n\n\nPRINT STYLES\n\nThe raw option may be particularly useful if you need to apply different styles\nto printing.\n\nAll that needs to be done is to add a print under designSystem.extend.screens.\n\n``js const designSystem = { extend: { screens: { print: { raw: 'print' }, // =>\n@media print { ... } }, }, };\n\n\nThen, a class such as ``print:text-black`` can be used to specify a style that is applied only when someone tries to print a page: ``\n\n```html\n<div class=\"text-gray-700 print:text-black\">\n  <! -- ... --\x3e\n</div>\n\n\n\nDARK MODE\n\nraw \u9009\u9879\u53ef\u4ee5\u7528\u4e8e\u5b9e\u73b0 \u201c\u6697\u6a21\u5f0f\u201d \u5c4f\u5e55\uff1a\n\nconst designSystem = {\n  extend: {\n    screens: {\n      dark: { raw: '(prefers-color-scheme: dark)' },\n      // => @media (prefers-color-scheme: dark) { ... }\n    },\n  },\n};\n\n\n\u7136\u540e\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 dark: \u524d\u7f00\u5728\u6697\u6a21\u5f0f\u4e0b\u4e3a\u5143\u7d20\u8bbe\u7f6e\u4e0d\u540c\u7684\u6837\u5f0f\uff1a\n\n<div class=\"text-gray-700 dark:text-gray-200\">\n  <! -- ... --\x3e\n</div>\n\n\n\u8bf7\u6ce8\u610f\uff0c\u7531\u4e8e\u8fd9\u4e9b screen variants \u662f\u5728 Tailwind CSS \u4e2d\u5b9e\u73b0\u7684\uff0c\u56e0\u6b64\u65e0\u6cd5\u4f7f\u7528\u8fd9\u79cd\u65b9\u6cd5\u5c06\u65ad\u70b9\u4e0e\u6697\u6a21\u5f0f\u7ed3\u5408\u4f7f\u7528 \uff0c\u4f8b\u5982\nmd:dark:text-gray-300 \u5c06\u4e0d\u8d77\u4f5c\u7528\u3002\n\n\nCOLORS\n\ncolors \u5c5e\u6027\u53ef\u8ba9\u60a8\u81ea\u5b9a\u4e49\u9879\u76ee\u7684\u5168\u5c40\u8c03\u8272\u677f\u3002\n\nconst designSystem = {\n  colors: {\n    transparent: 'transparent',\n    black: '#000',\n    white: '#fff',\n    gray: {\n      100: '#f7fafc',\n      // ...\n      900: '#1a202c',\n    },\n\n    // ...\n  },\n};\n\n\nBy default, these colors are inherited by the backgroundColor, textColor and\nborderColor core plugins.\n\nTo learn more, you can check out: Customizing Colors.\n\n\nSPACING\n\nThe global spacing and scaling of items can be customized using the space\nattribute: the\n\nconst designSystem = {\n  spacing: {\n    px: '1px',\n    0: '0',\n    1: '0.25rem',\n    2: '0.5rem',\n    3: '0.75rem',\n    4: '1rem',\n    5: '1.25rem',\n    6: '1.5rem',\n    8: '2rem',\n    10: '2.5rem',\n    12: '3rem',\n    16: '4rem',\n    20: '5rem',\n    24: '6rem',\n    32: '8rem',\n    40: '10rem',\n    48: '12rem',\n    56: '14rem',\n    64: '16rem',\n  },\n};\n\n\nBy default, these values are inherited by the padding, margin, negativeMargin,\nwidth and height core plugins.\n\nTo learn more, see Customizing Spacing.\n\n\nCORE PLUGINS\n\nThe rest of the theme section is used to configure the values available for each\ncore plugin.\n\nFor example, the borderRadius property allows you to customize the ``utilities`\nthat will generate the rounded corners.\n\n``js const designSystem = { borderRadius: { none: '0', sm: '.125rem', default:\n'.25rem', lg: '.5rem', full: '9999px', }, };\n\n\n** The attribute name determines the suffix of the generated class, and the value determines the value of the actual CSS declaration. **\nThe example ``borderRadius`` configuration above will generate the following CSS classes.\n\n```css\n.rounded-none { border-radius: 0 }\n.rounded-sm { border-radius: .125rem }\n.rounded { border-radius: .25rem }\n.rounded-lg { border-radius: .5rem }\n.rounded-full { border-radius: 9999px }\n\n\nYou will notice that the rounded class is created without the suffix in the\ntheme configuration using the default attribute. This is a common convention in\nTailwind CSS supported by many (though not all) of the core plugins.\n\nTo learn more about customizing a specific core plugin, please visit the\ndocumentation for that plugin.\n\n\nCUSTOMIZING THE DEFAULT CONFIGURATION\n\nOut of the box, your project will automatically inherit values from the default\ntheme configuration. If you want to customize the default theme, there are\nseveral different options depending on the goal.\n\n\nOVERRIDE THE DEFAULT CONFIGURATION\n\nTo override the options in the default configuration, add the properties to be\noverridden to designSystem at\n\n\n\nconst designSystem = {\n  // Replaces all of the default `opacity` values\n  opacity: {\n    0: '0',\n    20: '0.2',\n    40: '0.4',\n    60: '0.6',\n    80: '0.8',\n    100: '1',\n  },\n};\n\nexport default defineConfig({\n  designSystem,\n});\n\n\nThis will completely replace the default property configuration, so in the above\nexample, the default opacity utilities will not be generated.\n\nAny properties you do not provide will be inherited from the default theme, so\nin the example above, the default theme configuration for color, spacing, border\nrounding, background position, etc. will be retained.\n\n\nEXTENDING THE DEFAULT CONFIGURATION\n\nIf you want to keep the default values of the theme options but add new values,\nadd the extensions under the designSystem.extend property.\n\nFor example, if you want to add an additional breakpoint but keep the existing\none, you can extend the screens property with.\n\n\n\nconst designSystem = {\n  extend: {\n    // Adds a new breakpoint in addition to the default breakpoints\n    screens: {\n      '2xl': '1440px',\n    },\n  },\n};\n\nexport default defineConfig({\n  designSystem,\n});\n\n\nYou can certainly override some parts of the default theme and extend other\nparts of the default theme in the same configuration: the\n\n\n\nconst designSystem = {\n  opacity: {\n    0: '0',\n    20: '0.2',\n    40: '0.4',\n    60: '0.6',\n    80: '0.8',\n    100: '1',\n  },\n  extend: {\n    screens: {\n      '2xl': '1440px',\n    },\n  },\n};\n\nexport default defineConfig({\n  designSystem,\n});\n\n\n\nREFERENCING OTHER VALUES\n\nIf you need to reference another value in the configuration, you can do so by\nproviding a closure function instead of a static value. The function will\nreceive the theme() function as an argument, and you can use this function to\nfind other values in the configuration using a dot representation.\n\nFor example, you can generate fill utilities for each color in the palette by\nreferring to theme('colors') on the fill configuration.\n\n\n\nconst designSystem = {\n  colors: {\n    // ...\n  },\n  fill: theme => theme('colors'),\n};\n\nexport default defineConfig({\n  designSystem,\n});\n\n\nThe theme() function tries to find the value you are looking for from an already\nfully merged configuration object, so it can reference your own custom settings\nas well as the default theme value. It also works recursively, so as long as\nthere is a static value at the end of the chain, it can resolve the value you\nare looking for.\n\nReference to the default configuration\n\nIf for any reason you want to reference a value in the default configuration,\nyou can import it from tailwindcss/defaultTheme. A useful example would be to\nadd one of the fonts provided by the default configuration to.\n\n\n\nconst defaultTheme = require('tailwindcss/defaultTheme');\n\nconst designSystem = {\n  extend: {\n    fontFamily: {\n      sans: ['Lato', ... .defaultTheme.fontFamily.sans],\n    },\n  },\n};\n\nexport default defineConfig({\n  designSystem,\n});\n\n\n\nDISABLING THE ENTIRE CORE PLUGIN\n\nIf you don't want to generate any classes for a core plugin, it's better to set\nthe plugin to false in the corePlugins configuration, rather than providing an\nempty object for the property in the configuration: ``\n\n// Don't assign an empty object in your theme configuration\n\nconst designSystem = {\n  opacity: {},\n};\n\n// Do disable the plugin in your corePlugins configuration\nconst designSyttem = {\n  corePlugins: {\n    opacity: { false,\n  },\n};\n\n\nThe end result is the same, but since many core plugins don't expose any\nconfiguration, it's best to keep it consistent by only disabling them with\ncorePlugins anyway.\n\n\nADDING YOUR OWN KEY\n\nIn many cases it may be useful to add your own properties to the configuration\nobject.\n\nOne example is to add new properties for multiplexing between multiple core\nplugins. For example, you can extract a positions object that both the\nbackgroundPosition and objectPosition plugins can refer to.\n\nconst designSystem = {\n  positions: {\n    bottom: 'bottom',\n    center: 'center',\n    left: 'left',\n    'left-bottom': 'left bottom',\n    'left-top': 'left top',\n    right: 'right',\n    'right-bottom': 'right bottom',\n    'right-top': 'right top',\n    top: 'top',\n  },\n  backgroundPosition: theme => theme('positions'),\n  objectPosition: theme => theme('positions'),\n};\n\n\nAnother example is to add a new property to a custom plugin for referencing. For\nexample, if you write a gradient plugin for your project, you can add a gradient\nproperty to the theme object referenced by that plugin.\n\n\n\nconst designSystem = {\n  gradients: theme => ({\n    'blue-green': [theme('colors.blue.500'), theme('colors.green.500')],\n    'purple-blue': [theme('colors.purple.500'), theme('colors.blue.500')],\n    // ...\n  }),\n};\n\nexport default defineConfig({\n  designSystem,\n  buildConfig: {\n    style: {\n      postcss: {\n        plugins: [require('. /plugins/gradients')],\n      },\n    },\n  },\n});\n\n\n\nCONFIGURATION REFERENCES\n\nAll properties in the configuration object, except screens, colors and spacing,\nare mapped to the core plugins of Tailwind CSS. Since many plugins are\nresponsible for CSS properties that accept only static sets of values (e.g.,\ne.g., float), please note that not every plugin has a corresponding property in\nthe theme object.\n\nAll of these properties can also be used under the designSystem.extend property\nto extend the default theme.\n\nFor more information about what all the properties do, check out this link.",frontmatter:{sidebar_position:3}},{id:3,title:"Plugins",routePath:"/module-tools/en/api/config/plugins",toc:[],content:"PLUGINS\n\nThis chapter describes the configuration of the registered module-tools plugin.\n\n * type: Array<ModuleToolsPlugin>\n\n\nexport default defineConfig({\n  plugins: [examplePlugin()],\n});\n\n\nFor more information on how to write plugins, check out the [Plugin Writing\nGuide].",frontmatter:{sidebar_position:4}},{id:4,title:"Testing",routePath:"/module-tools/en/api/config/testing",toc:[{id:"jest-2",text:"jest",depth:2},{id:"transformer-2",text:"transformer",depth:2}],content:"TESTING\n\nThis chapter describes the test-related configuration\n\nYou need to enable the unit testing feature with pnpm run new first.\n\n\nJEST\n\n * Type: Object | Function\n * Default value: {}\n\nThe configuration corresponding to Jest, when of type Object, can be configured\nwith all the underlying configurations supported by Jest .\n\n\n\nexport default defineConfig({\n  testing: {\n    jest: {\n      testTimeout: 10000,\n    },\n  },\n});\n\n\nWhen the value is of type Function, the default configuration is passed as the\nfirst parameter and a new Jest configuration object needs to be returned.\n\n\n\nexport default defineConfig({\n  testing: {\n    jest: options => {\n      return {\n        ... . options,\n        testTimeout: 10000\n      }\n    }\n  }\n});\n\n\n\nTRANSFORMER\n\n * type: 'babel-jest' | 'ts-jest'\n * Default value: 'babel-jest'\n\nConfigure the compilation tool for the source code when executing tests:\nbabel-jest or ts-jest. The default is babel-jest.\n\nbabel-jest can also compile TS files without type errors, so use ts-jest if you\nneed to check the TS type when running tests.",frontmatter:{sidebar_position:5}},{id:5,title:"Overview",routePath:"/module-tools/en/api/",toc:[],content:"OVERVIEW",frontmatter:{overview:!0,sidebar_label:"Overview"}},{id:6,title:"Plugin Hooks",routePath:"/module-tools/en/api/plugin-api/plugin-hooks",toc:[{id:"build-hooks-1",text:"build hooks",depth:2},{id:"beforebuild-2",text:"beforeBuild",depth:3},{id:"beforebuildtask-2",text:"beforeBuildTask",depth:3},{id:"afterbuildtask-2",text:"afterBuildTask",depth:3},{id:"afterbuild-2",text:"afterBuild",depth:3},{id:"buildplatform-hooks-1",text:"buildPlatform hooks",depth:2},{id:"registerbuildplatform-2",text:"registerBuildPlatform",depth:3},{id:"beforebuildplatform-2",text:"beforeBuildPlatform",depth:3},{id:"buildplatform-2",text:"buildPlatform",depth:3},{id:"afterbuildplatform-2",text:"afterBuildPlatform",depth:3},{id:"dev-hooks-1",text:"Dev Hooks",depth:2},{id:"registerdev-2",text:"registerDev.",depth:3},{id:"beforedev-2",text:"beforeDev",depth:3},{id:"beforeafterdevmenu-2",text:"(before|after)DevMenu",depth:3},{id:"beforedevtask-2",text:"beforeDevTask",depth:3},{id:"afterdev-2",text:"afterDev",depth:3}],content:"PLUGIN HOOKS\n\nThis chapter describes the lifecycle hooks supported by module-tools.\n\nCurrently there are two main types of lifecycle hooks.\n\n * Build hooks: triggered only when the build command is executed to build the\n   source code product.\n * buildPlatform hook: triggered only when the build --platform command is\n   executed to generate other build products.\n * dev hooks: hooks that are triggered when running the dev command.\n\n\nBUILD HOOKS\n\nThe following Hooks are triggered in order when the build command is executed.\n\n * beforeBuild\n * beforeBuildTask\n * afterBuildTask\n * afterBuild\n\n\nBEFOREBUILD\n\nTriggered before the execution of the overall build process.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      beforeBuild(options: Options): Return {\n        return options.config;\n      }\n    }\n  },\n});\n\n\nParameters and return value types.\n\ntype Options = { options: { config: BuildConfig; cliOptions: BuildCommandOptions } }\n\nexport interface BuildCommandOptions {\n  config: string;\n  clear?: boolean;\n  dts?: boolean;\n  platform?: boolean | string[];\n  tsconfig: string;\n  watch?: boolean;\n}\n\ntype Return = BuildConfig;\n\n\n> BuildConfig type reference API configuration\n\n\nBEFOREBUILDTASK\n\nBased on the build configuration, Module Tools will split the overall build into\nmultiple sub-build tasks. The Hook will be triggered before each build subtask.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      beforeBuildTask(config: BaseBuildConfig): BaseBuildConfig {\n        return config;\n      }\n    }\n  },\n});\n\n\nParameters and return value types.\n\nBaseBuildConfig type reference API configuration\n\n\nAFTERBUILDTASK\n\nTriggered after the end of each build subtask.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      afterBuildTask(options: BuildTaskResult): void {\n        // ...\n      }\n    }\n  },\n});\n\n\nParameters and return value types.\n\nexport interface BuildTaskResult {\n  status: 'success' | 'fail';\n  message?: string;\n  config: BaseBuildConfig;\n}\n\n\n\nAFTERBUILD\n\nTriggered after the end of the overall build process.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      afterBuild(options: BuildResult): void {\n        // ...\n      }\n    }\n  },\n});\n\n\nParameters and return value types.\n\nexport interface BuildResult {\n  status: 'success' | 'fail';\n  message?: string;\n  config: BuildConfig;\n  commandOptions: BuildCommandOptions;\n  totalDuration: number;\n}\n\n\n\nBUILDPLATFORM HOOKS\n\nmodule-tools also provides the build --platform command to perform specific\nbuild tasks.\n\nFor example, after installing the Storybook plugin, you can run build --platform\nor build --platform storybook to perform Storybook build tasks. This is because\nthe Storybook plugin is based on the buildPlatform Hooks.\n\nHooks are triggered in the following order after executing build --platform.\n\n * registerBuildPlatform\n * beforeBuildPlatform\n * buildPlatform\n * afterBuildPlatform\n\n\nREGISTERBUILDPLATFORM\n\nGets information about the tasks that need to be run when executing the build\n--platform command.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      registerBuildPlatform(): RegisterBuildPlatformResult {\n        // ...\n        return {\n          platform: 'stroybook',\n          build() {\n            // run storybook logic\n          },\n        }, };\n      },\n    };\n  },\n});\n\n\nTypes of parameters entered and returned.\n\nexport interface RegisterBuildPlatformResult {\n  platform: string | string[];\n  build: (\n    currentPlatform: string, // the currently running platform build task\n    context: { isTsProject: boolean },\n  ) => void | Promise<void>;\n}\n\n\n\nBEFOREBUILDPLATFORM\n\nTriggers all registered build tasks when the build --platform command is\nexecuted. beforeBuildPlatform will be triggered before the execution of the\noverall build task.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      beforeBuildPlatform(platforms: RegisterBuildPlatformResult[]): void {\n        console.info(`have ${platforms.length} platform tasks`);\n      },\n    };\n  },\n});\n\n\nTypes of parameters entered and returned.\n\nexport interface RegisterBuildPlatformResult {\n  platform: string | string[];\n  build: (\n    currentPlatform: string, // the currently running platform build task\n    context: { isTsProject: boolean },\n  ) => void | Promise<void>;\n}\n\n\n\nBUILDPLATFORM\n\nWhen the build --platform command is executed, all registered build tasks will\nbe triggered. buildPlatform will be triggered before each build task is\nexecuted.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      buildPlatform({ platform }: Options): void {\n        console.info(`current task is ${platform}`);\n      },\n    };\n  },\n});\n\n\nTypes of parameters entered and returned.\n\nexport interface Options {\n  platform: string;\n}\n\n\n\nAFTERBUILDPLATFORM\n\nWhen the build --platform command is executed, all registered build tasks will\nbe triggered. afterBuildPlatform will be triggered after the overall platform\nbuild task is finished.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      afterBuildPlatform(result: BuildPlatformResult): void {\n        if (result.status === 'success') {\n          console.info(`all platform build task success`);\n        } else {\n          console.error(result.message);\n        }\n      },\n    };\n  },\n});\n\n\nTypes of parameters entered and returned.\n\nexport interface BuildPlatformResult {\n  status: 'success' | 'fail';\n  message: string | Error | null;\n}\n\n\n\nDEV HOOKS\n\nThe following Hooks are triggered in order when the dev command is executed.\n\n * registerDev: triggered when getting dev function information.\n * beforeDev: Triggered before starting the dev process as a whole.\n * beforeDevMenu: triggered before the dev list/menu appears.\n * afterDevMenu: triggered after dev list/menu option is selected.\n * beforeDevTask: Triggered before executing the dev task.\n * afterDev: Triggered at the end of the overall dev process.\n\n\nREGISTERDEV.\n\nRegister dev tool related data. Mainly contains.\n\n * the name of the dev tool\n * The name of the item displayed in the menu list and the corresponding value.\n * The definition of the dev subcommand.\n * Whether to execute the source code build before running the dev task\n * The function to execute the dev task.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      registerDev() {\n        return {\n          // Dev tool name\n          name: 'storybook',\n          // Menu content\n          menuItem: {\n            name: 'Storybook',\n            value: 'storybook',\n          },\n          // Defined dev subcommands\n          subCommands: ['storybook', 'story'],\n          async action() {\n            // dev logic\n          },\n        };\n      },\n    };\n  },\n});\n\n\nTypes of parameters entered and returned.\n\nexport interface DevToolData {\n  name: string;\n  subCommands?: string[];\n  menuItem?: {\n    name: string;\n    value: string;\n  };\n  // Whether to disable the source build before the dev command is executed\n  disableRunBuild?: boolean;\n  action: (\n    options: { port?: string },\n    context: { isTsProject?: boolean },\n  ) => void | Promise<void>;\n}\n\n\nWhen dev a project, it may be possible to set disableRunBuild: true to disable\nbuild tasks for source execution (in listening mode) if you only need to dev\ncode functionality.\n\nThe currently supported Storybook dev supports using source code products as dev\nobjects, so disableRunBuild: false in the Storybook plugin.\n\n\nBEFOREDEV\n\nTriggered before the dev task is executed after all dev tool metadata has been\ncollected.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      beforeDev(metas: DevToolData[]) {\n        console.info(`have ${metas.length} dev tools`);\n      },\n    };\n  },\n});\n\n\nTypes of parameters entered and returned.\n\nexport interface DevToolData {\n  name: string;\n  subCommands?: string[];\n  menuItem?: {\n    name: string;\n    value: string;\n  };\n  // Whether to disable the source build before the dev command is executed\n  disableRunBuild?: boolean;\n  action: (\n    options: { port?: string },\n    context: { isTsProject?: boolean },\n  ) => void | Promise<void>;\n}\n\n\n\n(BEFORE|AFTER)DEVMENU\n\nbeforeDevMenu is triggered before the dev list/menu appears. Receives inquirer\nquestion as argument. Default value is.\n\nconst question = [\n  {\n    name: 'choiceDevTool',\n    message: 'Select dev tool',\n    type: 'list',\n    // Registered dev messages\n    choices,\n  },\n];\n\n\nafterDevMenu Triggered after selecting dev list/menu options.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      beforeDevMenu(questions) {\n        questions[0].message += '!' ;\n        return questions; // required\n      },\n      afterDevMenu(options: Options) {\n        console.info(`choise ${options.result.choiceDevTool} dev tools`);\n      }\n    };\n  },\n});\n\n\nTypes of parameters entered and returned.\n\nexport type { QuestionCollection } from 'inquirer';\n\nexport interface Options {\n  result: PromptResult;\n  devTools: DevToolData[];\n}\n\nexport type PromptResult = { choiceDevTool: string }\nexport interface DevToolData {\n  name: string;\n  subCommands?: string[];\n  menuItem?: {\n    name: string;\n    value: string;\n  };\n  // Whether to disable the source build before the dev command is executed\n  disableRunBuild?: boolean;\n  action: (\n    options: { port?: string },\n    context: { isTsProject?: boolean },\n  ) => void | Promise<void>;\n}\n\n\n\nBEFOREDEVTASK\n\nTriggered before the dev task is executed.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      beforeDevTask(currentDevData: DevToolData) {\n        console.info(`${currentDevData.name} running`);\n      },\n    };\n  },\n});\n\n\nTypes of parameters entered and returned.\n\nexport interface DevToolData {\n  name: string;\n  subCommands?: string[];\n  menuItem?: {\n    name: string;\n    value: string;\n  };\n  // Whether to disable the source build before the dev command is executed\n  disableRunBuild?: boolean;\n  action: (\n    options: { port?: string },\n    context: { isTsProject?: boolean },\n  ) => void | Promise<void>;\n}\n\n\n\nAFTERDEV\n\nTriggered when the dev task process is interrupted.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      afterDev() {\n        console.info(`exit!`);\n      },\n    };\n  },\n});\n",frontmatter:{}},{id:7,title:"Handle static resource files",routePath:"/module-tools/en/guide/advance/asset",toc:[{id:"default-behavior-1",text:"Default behavior",depth:2},{id:"setting-cdn-prefix-1",text:"Setting CDN Prefix",depth:2}],content:"HANDLE STATIC RESOURCE FILES\n\nThe module project will handle static resources used in the code. If\nconfiguration is required, then the buildConfig.asset API can be used.\n\n\nDEFAULT BEHAVIOR\n\nBy default, module projects are processed for the following static resources:\n\n * '.svg'\u3001'.png'\u3001'.jpg'\u3001'.jpeg'\u3001'.gif'\u3001'.webp'\n * '.ttf'\u3001'.otf'\u3001'.woff'\u3001'.woff2'\u3001'.eot'\n * '.mp3'\u3001'.mp4'\u3001'.webm'\u3001'.ogg'\u3001'.wav'\u3001'.flac'\u3001'.aac'\u3001'.mov'\n\nFor the handling of static files, the module project currently supports the\nfollowing functions.\n\n * Set the static resource path to . /assets.\n * For files over 10kb they are inlined into the code.\n\nLet us look at the following example:\n\n<CH.Spotlight>\n\n\n//...\n\n\n--------------------------------------------------------------------------------\n\nProject source code.\n\n\n//...\n\n\n--------------------------------------------------------------------------------\n\nIf the size of bg.png is less than 10 kb, then the product directory structure\nand product content are.\n\n<CH.Code>\n\n./dist\n\u2514\u2500\u2500 asset.js\n\n\n--------------------------------------------------------------------------------\n\nvar bg_default = 'data:image/png;base64,';\nconsole.info(bg_default);\n\n\n</CH.Code>\n\nIf the size of bg.png is larger than 10 kb, then the product directory structure\nand product content are.\n\n<CH.Code>\n\n./dist\n\u251c\u2500\u2500 asset.js\n\u2514\u2500\u2500 assets\n    \u2514\u2500\u2500 bg.13e2aba2.png\n\n\n--------------------------------------------------------------------------------\n\nvar bg_default = 'assets/bg.13e2aba2.png';\nconsole.info(bg_default);\n\n\n</CH.Code>\n\n</CH.Spotlight>\n\nWhen wanting to modify the default behavior, the following API can be used:\n\n * asset.path: modify the output path of the static resource file.\n * asset.limit: modify the threshold value for inline static resource files.\n\n\nSETTING CDN PREFIX\n\nIf the project is running in a browser environment, we may need to host static\nresources to a CDN and then use them in the production environment.\n\nThen we need to add the CDN base path in front of the path to the static\nresource file in the default generated build product. Again, see an example:\n\n<CH.Spotlight>\n\n\n//...\n\n\n--------------------------------------------------------------------------------\n\nProject source code.\n\n\n\n--------------------------------------------------------------------------------\n\nmodern.config config file\u3002\n\nexport default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    asset: {\n      publicPath: 'https://cdn/',\n    },\n  },\n});\n\n\n--------------------------------------------------------------------------------\n\nIf the size of bg.png is larger than 10 kb, then the product content will be.\n\n(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory();\n  else if (typeof define === 'function' && define.amd) define([], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory();\n})(this, function () {\n  'use strict';\n  var bg_default = 'http://cdn/assets/bg.13e2aba2.png';\n  // src/asset.tsx\n  console.info(bg_default);\n});\n\n\n</CH.Spotlight>",frontmatter:{sidebar_position:6}},{id:8,title:"Build umd products",routePath:"/module-tools/en/guide/advance/build-umd",toc:[{id:"third-party-dependency-handling-for-umd-products-1",text:"Third-party dependency handling for umd products",depth:2},{id:"changing-the-name-of-a-global-variable-in-a-project-1",text:"Changing the name of a global variable in a project",depth:2}],content:"BUILD UMD PRODUCTS\n\nThe full name of umd is Universal Module Definition, and JS files in this format\ncan run in multiple runtime environments: the\n\n * Browser environment: module loading based on AMD specification\n * Node.js environment: module loading based on CommonJS\n * Other cases: mount the module on a global object.\n\nWe can therefore specify the build product of the project as an umd product in\nthe following way:\n\nexport default defineConfig({\n  buildConfig: {\n    format: 'umd',\n  },\n});\n\n\n\nTHIRD-PARTY DEPENDENCY HANDLING FOR UMD PRODUCTS\n\nIn the [How to handle third-party dependencies] chapter, we know that we can\ncontrol whether or not the project packages third-party dependencies via the\nautoExternals and externals APIs. So when building umd products, we can also use\nit like this:\n\n<CH.Spotlight>\n\n{\n  \"dependencies\": {\n    \"react\": \"^17\"\n    //...other dependencies\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\nIf the project depends on react.\n\n{\n  \"dependencies\": {\n    \"react\": \"^17\"\n    //...other dependencies\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\nmodern.config.ts.\n\nexport default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    autoExternal: false,\n    externals: ['react'],\n  },\n});\n\n\n--------------------------------------------------------------------------------\n\nWhen a react dependency is used in the source code.\n\n\nconsole.info(React);\n\n\n--------------------------------------------------------------------------------\n\nThe react code is not packaged into the product at this point.\n\n(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory(exports, require('react'));\n  else if (typeof define === 'function' && define.amd)\n    define(['exports', 'react'], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory((global.index = {}), global.react);\n})(this, function (exports, _react) {\n  'use strict';\n  Object.defineProperty(exports, '__esModule', {\n    value: true,\n  });\n  _react = /*#__PURE__*/ _interopRequireDefault(_react);\n  function _interopRequireDefault(obj) {\n    return obj && obj.__esModule\n      ? obj\n      : {\n          default: obj,\n        };\n  }\n  console.info(_react.default);\n});\n\n\n</CH.Spotlight>\n\nWe know from the above example that when using the autoExternal and externals\nAPIs.\n\n * In a Node.js environment, you can get the react dependency with\n   require('react').\n * In a browser environment, you can get the react dependency via global.react.\n\nHowever, in the browser environment, when getting third-party dependencies,\nglobal variable names are not necessarily identical to the dependency names, so\nyou have to use the buildConfig.umdGlobals API.\n\nAgain using the previous example, when the react dependency exists in the\nbrowser environment as a windows.React or global.React global variable, then:\n\n<CH.Spotlight>\n\n{\n  \"devDependencies\": {\n    \"react\": \"^17\"\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\nIf the project depends on react.\n\n{\n  \"devDependencies\": {\n    \"react\": \"^17\"\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\nmodern.config.ts config file\u3002\n\nexport default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    umdGlobals: {\n      react: 'React',\n    },\n  },\n});\n\n\n--------------------------------------------------------------------------------\n\nWhen a react dependency is used in the source code.\n\n\nconsole.info(React);\n\n\n--------------------------------------------------------------------------------\n\nAt this point we will see the product code like this.\n\n(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory();\n  else if (typeof define === 'function' && define.amd) define([], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory();\n})(this, function () {\n  // ...\n  // libuild:globals:react\n  var require_react = __commonJS({\n    'libuild:globals:react'(exports, module1) {\n      module1.exports = Function('return this')()['React'];\n    },\n  });\n  // src/index.ts\n  var import_react = __toESM(require_react());\n  console.info(import_react.default);\n});\n\n\n</CH.Spotlight>\n\nThe project can then run in the browser and use the React variables that exist\non the global object.\n\n\nCHANGING THE NAME OF A GLOBAL VARIABLE IN A PROJECT\n\nWhen we package the following code into an umd product and run it in the\nbrowser, we can use the module via window.index.\n\nexport default () => {\n  console.info('hello world');\n};\n\n\n** By default, the name of the source file is used as the name of the module's\nglobal variable in the browser. **For the above example, the product would read\nas follows:\n\n(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory(exports);\n  else if (typeof define === 'function' && define.amd)\n    define(['exports'], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory((global.index = {}));\n})(this, function (exports) {\n  //...\n});\n\n\nIf you need to modify it, you need to use the buildConfig.umdModuleName API.\n\nWhen this API is used:\n\nexport default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    umdModuleName: 'myLib',\n  },\n});\n\n\nThe construction products at this point are:\n\n(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory(exports);\n  else if (typeof define === 'function' && define.amd)\n    define(['exports'], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory((global.myLib = {}));\n})(this, function (exports) {\n  //...\n});\n",frontmatter:{sidebar_position:5}},{id:9,title:"Use the Copy Tools",routePath:"/module-tools/en/guide/advance/copy",toc:[{id:"understanding-the-copy-api-1",text:"Understanding the Copy API",depth:2},{id:"api-description-1",text:"API Description",depth:2},{id:"\u4e0d\u540c\u573a\u666f\u4f7f\u7528\u793a\u4f8b-2",text:"\u4e0d\u540c\u573a\u666f\u4f7f\u7528\u793a\u4f8b",depth:2},{id:"\u5c06\u6587\u4ef6\u590d\u5236\u6587\u4ef6-2",text:"\u5c06\u6587\u4ef6\u590d\u5236\u6587\u4ef6",depth:3},{id:"\u5c06\u6587\u4ef6\u590d\u5236\u5230\u76ee\u5f55-2",text:"\u5c06\u6587\u4ef6\u590d\u5236\u5230\u76ee\u5f55",depth:3},{id:"\u4ece\u76ee\u5f55\u590d\u5236\u5230\u76ee\u5f55-2",text:"\u4ece\u76ee\u5f55\u590d\u5236\u5230\u76ee\u5f55",depth:3},{id:"\u4ece\u76ee\u5f55\u5230\u6587\u4ef6-2",text:"\u4ece\u76ee\u5f55\u5230\u6587\u4ef6",depth:3},{id:"\u4f7f\u7528-glob-2",text:"\u4f7f\u7528 Glob",depth:3}],content:"USE THE COPY TOOLS\n\nThe Module Project provides the Copy utility for copying already existing\nindividual files or entire directories into the product directory. Next we learn\nhow to use it.\n\n\nUNDERSTANDING THE COPY API\n\nWe can use the Copy tool via the buildConfig.copy API, which contains the\nfollowing two main configurations.\n\n * patterns\n * options\n\nIt is recommended to spend some time getting to know them before you start\nlearning.\n\n\nAPI DESCRIPTION\n\ncopy.patterns \u7528\u4e8e\u5bfb\u627e\u590d\u5236\u7684\u6587\u4ef6\u4ee5\u53ca\u914d\u7f6e\u8f93\u51fa\u7684\u8def\u5f84\u3002\n\n\u5176\u4e2d patterns.from \u7528\u4e8e\u6307\u5b9a\u8981\u590d\u5236\u7684\u6587\u4ef6\u6216\u8005\u76ee\u5f55\u3002\u5b83\u63a5\u6536 Glob \u5f62\u5f0f\u5b57\u7b26\u4e32\u6216\u5177\u4f53\u8def\u5f84\u3002Glob \u5f62\u5f0f\u5b57\u7b26\u4e32\u662f\u6307 fast-glob\npattern-syntax\u3002\u56e0\u6b64\u6211\u4eec\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u4e24\u79cd\u65b9\u5f0f\u4f7f\u7528\u5b83\uff1a\n\nexport default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [\n        { from: './index.html', to: '' },\n        { from: './*.html', to: '' },\n      ],\n    },\n  },\n});\n\n\npatterns.context \u4e00\u822c\u548c patterns.from \u914d\u5408\u4f7f\u7528\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u5b83\u7684\u503c\u4e0e buildConfig.sourceDir\n\u76f8\u540c\uff0c\u56e0\u6b64\u6211\u4eec\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u65b9\u5f0f\u6307\u5b9a src/data.json \u6587\u4ef6\u4e3a\u8981\u590d\u5236\u7684\u6587\u4ef6\uff1a\n\n> \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cbuildConfig.sourceDir \u4e3a src\n\nexport default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [\n        { from: './data.json' to: ''},\n      ],\n    },\n  },\n});\n\n\n\u5f53\u6307\u5b9a\u7684\u6587\u4ef6\u4e0d\u5728\u6e90\u7801\u76ee\u5f55\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u4fee\u6539 context \u914d\u7f6e\u3002\u4f8b\u5982\u6307\u5b9a\u9879\u76ee\u76ee\u5f55\u4e0b\u7684 temp/index.html \u4e3a\u8981\u590d\u5236\u7684\u6587\u4ef6\uff1a\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [\n        {\n          from: './index.html',\n          context: path.join(__dirname, './temp')\n          to: '',\n        }\n      ],\n    },\n  },\n});\n\n\npatterns.to \u7528\u4e8e\u6307\u5b9a\u590d\u5236\u6587\u4ef6\u7684\u8f93\u51fa\u8def\u5f84\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u5b83\u7684\u503c\u4e3a buildConfig.outDir\u5bf9\u5e94\u7684\u503c\u3002\u56e0\u6b64\u6211\u4eec\u6309\u7167\u5982\u4e0b\u65b9\u5f0f\u5c06\nsrc/index.html \u590d\u5236\u5230 dist \u76ee\u5f55\u4e0b\uff1a\n\nexport default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [{ from: './index.html' }],\n    },\n  },\n});\n\n\n\u5f53\u6211\u4eec\u914d\u7f6e\u4e86 patterns.to \u7684\u65f6\u5019\uff1a\n\n * \u5982\u679c\u662f\u76f8\u5bf9\u8def\u5f84\uff0c\u5219\u8be5\u8def\u5f84\u4f1a\u76f8\u5bf9\u4e8e buildConfig.outDir \u8ba1\u7b97\u51fa\u590d\u5236\u6587\u4ef6\u8f93\u51fa\u7684\u7edd\u5bf9\u8def\u5f84\u3002\n * \u5982\u679c\u662f\u7edd\u5bf9\u8def\u5f84\uff0c\u5219\u4f1a\u76f4\u63a5\u4f7f\u7528\u8be5\u503c\u3002\n\n\u6700\u540e patterns.globOptions \u7528\u4e8e\u914d\u7f6e\u5bfb\u627e\u590d\u5236\u6587\u4ef6 globby \u5bf9\u8c61\uff0c\u5176\u914d\u7f6e\u53ef\u53c2\u8003\uff1a\n\n * globby.options\n\n\n\u4e0d\u540c\u573a\u666f\u4f7f\u7528\u793a\u4f8b\n\n\n\u5c06\u6587\u4ef6\u590d\u5236\u6587\u4ef6\n\nexport default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy file to file\n           */\n          {\n            from: './temp-1/a.png',\n            context: __dirname,\n            to: './temp-1/b.png',\n          },\n        ],\n      },\n    },\n  ],\n});\n\n\n\n\u5c06\u6587\u4ef6\u590d\u5236\u5230\u76ee\u5f55\n\nexport default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy file to dir\n           */\n          {\n            from: './temp-2/a.png',\n            context: __dirname,\n            to: './temp-2',\n          },\n        ],\n      },\n    },\n  ],\n});\n\n\n\n\u4ece\u76ee\u5f55\u590d\u5236\u5230\u76ee\u5f55\n\nexport default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy dir to dir\n           */\n          {\n            from: './temp-3/',\n            to: './temp-3',\n            context: __dirname,\n          },\n        ],\n        options: {\n          enableCopySync: true,\n        },\n      },\n    },\n  ],\n});\n\n\n\n\u4ece\u76ee\u5f55\u5230\u6587\u4ef6\n\nexport default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy dir to file\n           */\n          {\n            from: './temp-4/',\n            context: __dirname,\n            to: './temp-4/_index.html',\n          },\n        ],\n        options: {\n          enableCopySync: true,\n        },\n      },\n    },\n  ],\n});\n\n\n\n\u4f7f\u7528 GLOB\n\nexport default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy glob to dir\n           */\n          {\n            from: './*.html',\n            to: './temp-5',\n          },\n        ],\n        options: {\n          enableCopySync: true,\n        },\n      },\n    },\n    {\n      copy: {\n        patterns: [\n          /**\n           * copy glob to file\n           */\n          {\n            from: './*.html',\n            to: './temp-6/index.html',\n          },\n        ],\n        options: {\n          enableCopySync: true,\n        },\n      },\n    },\n  ],\n});\n",frontmatter:{sidebar_position:3}},{id:10,title:"How to handle third-party dependencies",routePath:"/module-tools/en/guide/advance/external-dependency",toc:[{id:"default-handling-of-third-party-dependencies-1",text:"Default handling of third-party dependencies",depth:2},{id:"packaging-third-party-dependencies-1",text:"Packaging third-party dependencies",depth:2},{id:"turn-off-default-behavior-1",text:"Turn off default behavior",depth:3},{id:"exclude-specified-third-party-dependencies-1",text:"Exclude specified third-party dependencies",depth:3}],content:'HOW TO HANDLE THIRD-PARTY DEPENDENCIES\n\nGenerally, third-party dependencies required by a project can be installed via\nthe install command in the package manager. After the third-party dependencies\nare successfully installed, they will generally appear under dependencies and\ndevDependencies in the project package.json.\n\n{\n  "dependencies": {},\n  "devDependencies": {}\n}\n\n\nDependencies under "dependencies" are generally related to project code and\nbuilds, and if these third-party dependencies are declared under\n"devDependencies", then there will be missing dependencies in production\nenvironments.\n\nIn addition to "dependencies", "peerDependencies" can also declare dependencies\nthat are needed in the production environment, but it puts more emphasis on the\nexistence of these dependencies declared by "peerDependencies" in the project\'s\nruntime environment, similar to the plugin mechanism.\n\n\nDEFAULT HANDLING OF THIRD-PARTY DEPENDENCIES\n\nBy default, third-party dependencies under "dependencies" and "peerDependencies"\nare not packaged in the module project**, so:\n\n<CH.Spotlight>\n\n{\n  "dependencies": {\n    "react": "^17"\n  },\n  // or\n  "peerDependencies": {\n    "react": "^17"\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\nIf the project has a dependency on react.\n\n{\n  "dependencies": {\n    "react": "^17"\n  },\n  // or\n  "peerDependencies": {\n    "react": "^17"\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\nWhen a react dependency is used in the source code.\n\n\nconsole.info(React);\n\n\n--------------------------------------------------------------------------------\n\nThe react code is not packaged into the product at this point.\n\n\nconsole.info(React);\n\n\n</CH.Spotlight>\n\n\nPACKAGING THIRD-PARTY DEPENDENCIES\n\nHowever there are cases where you want to package these third-party dependencies\ninto the product. The benefits of packaging third-party dependencies into the\nproduct are: Reducing the time spent downloading third-party dependencies.\n\nThis way of handling third-party dependencies is generally more common in\ndeveloping command-line tools, which can improve the loading speed of\ncommand-line tools and give users a better experience.\n\nSo how do you enable the packaging of third-party dependencies in your module\nproject?\n\nThe following APIs are provided in the build configuration to handle third-party\ndependencies:\n\n * buildConfig.autoExternal\n * buildConfig.externals\n\n\nTURN OFF DEFAULT BEHAVIOR\n\nWhen we want to turn off the default handling behavior for third-party\ndependencies, we can do so by:\n\nexport default defineConfig({\n  buildConfig: {\n    autoExternal: false,\n  },\n});\n\n\nThis way the dependencies under "dependencies" and "peerDependencies" will be\npackaged. If you want to turn off the processing of only one of these\ndependencies, you can use the buildConfig.autoExternal in the form of an object.\n\nexport default defineConfig({\n  buildConfig: {\n    autoExternal: {\n      dependencies: false,\n      peerDependencies: false,\n    },\n  },\n});\n\n\n\nEXCLUDE SPECIFIED THIRD-PARTY DEPENDENCIES\n\nAnd in addition to the buildConfig.autoExternal API, buildConfig.externals can\nalso control which third-party dependencies are to be handled. We can combine\nthese two APIs to handle the project\'s dependencies in a more granular way.\n\nFor example, when we need to leave only certain dependencies unpacked, we can\nconfigure it as follows.\n\n> In this case, it is likely that some dependencies are not suitable for\n> packaging. If this is the case, then you can handle it as follows.\n\nepxort default defineConfig({\n  buildConfig: {\n    autoExternal: false,\n    externals: [\'pkg-1\', /pkg-2/],\n  }\n});\n',frontmatter:{sidebar_position:4}},{id:11,title:"In-depth understanding of build",routePath:"/module-tools/en/guide/advance/in-depth-about-build",toc:[{id:"in-depth-understanding-of-buildconfig-1",text:"In-depth understanding of buildConfig",depth:2},{id:"bundle-and-bundleless-1",text:"Bundle and Bundleless",depth:3},{id:"relationship-between-input-and-sourcedir-1",text:"Relationship between input and sourceDir",depth:3},{id:"object-type-of-input-1",text:"Object type of input",depth:4},{id:"sourcedir-5",text:"sourceDir",depth:4},{id:"declaration-type-files-1",text:"Declaration Type Files",depth:3},{id:"turn-off-type-generation-1",text:"Turn off type generation",depth:4},{id:"build-type-files-1",text:"Build type files",depth:4},{id:"alias-conversion-1",text:"Alias Conversion",depth:4},{id:"some-examples-of-the-use-of-dts-1",text:"Some examples of the use of dts",depth:4},{id:"buildconfigdefine-usage-for-different-scenarios-1",text:"buildConfig.define Usage for different scenarios",depth:3},{id:"environment-variable-replacement-1",text:"Environment variable replacement",depth:4},{id:"global-variable-replacement-1",text:"Global variable replacement",depth:4},{id:"build-process-1",text:"Build process",depth:2},{id:"build-errors-1",text:"Build errors",depth:2}],content:"IN-DEPTH UNDERSTANDING OF BUILD\n\nIn the [Basic Usage] section, we already knew that you can modify the output\nproduct of a project through the buildConfig configuration. buildConfig not only\ndescribes some of the features of the product, but also provides some\nfunctionality for building the product.\n\nIf you are not sure what buildConfig is, it is recommended to take some time to\nunderstand it by following this link.\n\n * [modify-output-product]\n\nIn this chapter we'll dive into the use of certain build configurations and\nunderstand what happens when the modern build command is executed.\n\n\nIN-DEPTH UNDERSTANDING OF BUILDCONFIG\n\n\nBUNDLE AND BUNDLELESS\n\nSo first let's understand Bundle and Bundleless.\n\nA Bundle is a package of build products, which may be a single file or multiple\nfiles based on a certain code splitting strategy.\n\nBundleless, on the other hand, means that each source file is compiled and built\nseparately, but not packaged together. Each product file can be found with its\ncorresponding source code file. The process of Bundleless build can also be\nunderstood as the process of code conversion of source files only.\n\nIn buildConfig you can specify whether the current build task is Bundle or\nBundleless by using buildConfig.buildType.\n\n\nRELATIONSHIP BETWEEN INPUT AND SOURCEDIR\n\nbuildConfig.input is used to specify the file path or directory path where the\nsource code is read, and its default value differs between Bundle and Bundleless\nbuilds.\n\n * When buildType: 'bundle', input defaults to ['src/index.ts']\n * When buildType: 'bundleless', input defaults to ['src']\n   \n   > In fact, at buildType: 'bundle', the build tool detects the existence of a\n   > file matching the name rule src/index.(j|t)sx? and uses it as an entry\n   > file.\n\nIt is recommended that you do not specify multiple source file directories\nduring a Bundleless build, as unintended results may occur. Bundleless builds\nwith multiple source directories are currently in an unstable stage.\n\nWe know from the defaults: Bundle builds can generally specify a file path as\nthe entry point to the build, while Bundleless builds are more expected to use\ndirectory paths to find source files.\n\nOBJECT TYPE OF INPUT\n\nIn addition to setting input to an array, you can also set it to an object\nduring the Bundle build process. By using the object form, we can modify the\nname of the file that the build product outputs. So for the following example, .\n/src/index.ts corresponds to the path of the build product file as .\n/dist/main.js.\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    input: {\n      main: ['./src/index.ts'],\n    },\n    outDir: './dist',\n  },\n});\n\n\nThe Bundleless build process also supports such use, but it is not recommended.\n\nSOURCEDIR\n\nsourceDir is used to specify the source code directory, which is related to\nboth.\n\n * type file generation\n * outbase for specifying the build process\n\nIn general:\n\n * During the Bundleless build process, the values of sourceDir and input should\n   be the same, and their default values are both src.\n * It is rarely necessary to use sourceDir during the Bundle build process.\n\n\nDECLARATION TYPE FILES\n\nThe buildConfig.dts configuration is mainly used for type file generation.\n\nTURN OFF TYPE GENERATION\n\nType generation is turned on by default, if you need to turn it off, you can\nconfigure it as follows:\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    dts: false,\n  },\n});\n\n\nThe build speed is generally improved by closing the type file.\n\nBUILD TYPE FILES\n\nWith buildType: 'bundleless', type files are generated using the project's tsc\ncommand to complete production.\n\nThe module engineering solution also supports packaging of type files, although\ncare needs to be taken when using this feature.\n\n * Some third-party dependencies have incorrect syntax that can cause the\n   packaging process to fail. So in this case, you need to exclude such\n   third-party packages manually with buildConfig.externals.\n * It is not possible to handle the case where the type file of a third-party\n   dependency points to a .ts file. For example, the package.json of a\n   third-party dependency contains something like this: {\"types\": \".\n   /src/index.ts\"}.\n\nALIAS CONVERSION\n\nDuring the Bundleless build process, if an alias appears in the source code,\ne.g.\n\n\n\nNormally, product type files generated with tsc will also contain these aliases.\nHowever, Module Tools will convert the aliases in the type file generated by tsc\nto:\n\n * Alias conversion is possible for code of the form ``.\n * Aliasing is possible for code of the form export { utils } from\n   '@common/utils'.\n\nHowever, there are some cases that cannot be handled at this time.\n\n * Output types of the form Promise<import('@common/utils')> cannot be converted\n   at this time.\n\nSOME EXAMPLES OF THE USE OF DTS\n\nGeneral usage:\n\n\n\nexport default defineConfig({\n  // The output path of the packaged type file at this point is `./dist/types`\n  buildConfig: {\n    buildType: 'bundle',\n    dts: {\n      tsconfigPath: './other-tsconfig.json',\n      distPath: './types',\n    },\n    outDir: './dist',\n  },\n});\n\n\nFor the use of dts.only:\n\n\n\nexport default defineConfig({\n  // At this moment the type file is not packaged and the output path is `./dist/types`\n  buildConfig: [\n    {\n      buildType: 'bundle',\n      dts: false,\n      outDir: './dist',\n    },\n    {\n      buildType: 'bundleless',\n      dts: {\n        only: true,\n      },\n      outDir: './dist/types',\n    },\n  ],\n});\n\n\n\nBUILDCONFIG.DEFINE USAGE FOR DIFFERENT SCENARIOS\n\nbuildConfig.define functions somewhat similar to webpack.DefinePlugin. A few\nusage scenarios are described here.\n\nENVIRONMENT VARIABLE REPLACEMENT\n\n\nexport default defineConfig({\n  buildConfig: {\n    define: {\n      'process.env.VERSION': JSON.stringify(process.env.VERSION || '0.0.0'),\n    },\n  },\n});\n\n\nWith the above configuration, we can put the following code.\n\n// pre-compiler code\nconsole.log(process.env.VERSION);\n\n\nWhen executing VERSION=1.0.0 modern build, the conversion is:\n\n// compiled code\nconsole.log('1.0.0');\n\n\nGLOBAL VARIABLE REPLACEMENT\n\n\nexport default defineConfig({\n  buildConfig: {\n    define: {\n      VERSION: JSON.stringify(require('. /package.json').version || '0.0.0'),\n    },\n  },\n});\n\n\nWith the above configuration, we can put the following code.\n\n// pre-compile code\nconsole.log(VERSION);\n\n\nConvert to:\n\n// post-compile code\nconsole.log('1.0.0');\n\n\nNote, however: If the project is a TypeScript project, then you may need to add\nthe following to the .d.ts file in the project source directory.\n\n> If the .d.ts file does not exist, then you can create it manually.\n\ndeclare const YOUR_ADD_GLOBAL_VAR;\n\n\n\nBUILD PROCESS\n\nWhen the modern build command is executed, the\n\n * Clear the products directory according to buildConfig.outDir.\n * Compile js/ts source code to generate the JS build product for\n   Bundle/Bundleless.\n * Generate Bundle/Bundleless type files using tsc.\n * Handle Copy tasks.\n\n\nBUILD ERRORS\n\nWhen a build error occurs, based on the information learned above, it is easy to\nunderstand what error appears in the terminal.\n\nErrors reported for js or ts builds:\n\nerror  ModuleBuildError:\n\n\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n\u2502 bundle failed:        \u2502\n\u2502  - format is \"cjs\"    \u2502\n\u2502  - target is \"esnext\" \u2502\n\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n\nDetailed Information:\n\n\nErrors reported for the type file generation process:\n\nerror   ModuleBuildError:\n\nbundle DTS failed:\n\n\nFor js/ts build errors, we can tell from the error message.\n\n * By 'bundle failed:' to determine if the error is reported for a Bundle build\n   or a Bundleless build?\n * What is the format of the build process?\n * What is the target of the build process?\n * The specific error message.",frontmatter:{sidebar_position:1}},{id:12,title:"\u6df1\u5165\u7406\u89e3 dev \u547d\u4ee4",routePath:"/module-tools/en/guide/advance/in-depth-about-dev-command",toc:[{id:"\u6df1\u5165\u7406\u89e3-buildconfig-3",text:"\u6df1\u5165\u7406\u89e3 buildConfig",depth:2},{id:"bundle-\u548c-bundleless-3",text:"bundle \u548c bundleless",depth:3},{id:"input-\u4e0e-sourcedir-\u7684\u5173\u7cfb-3",text:"input \u4e0e sourceDir \u7684\u5173\u7cfb",depth:3},{id:"\u6784\u5efa\u8fc7\u7a0b-3",text:"\u6784\u5efa\u8fc7\u7a0b",depth:2}],content:"\u6df1\u5165\u7406\u89e3 DEV \u547d\u4ee4\n\n\u5728\u3010\u57fa\u7840\u4f7f\u7528\u3011\u7684\u90e8\u5206\uff0c\u6211\u4eec\u5df2\u7ecf\u77e5\u9053\u53ef\u4ee5\u901a\u8fc7 buildConfig \u914d\u7f6e\u5bf9\u9879\u76ee\u7684\u8f93\u51fa\u4ea7\u7269\u8fdb\u884c\u4fee\u6539\u3002buildConfig\n\u4e0d\u4ec5\u63cf\u8ff0\u4e86\u4ea7\u7269\u7684\u4e00\u4e9b\u7279\u6027\uff0c\u540c\u65f6\u8fd8\u4e3a\u6784\u5efa\u4ea7\u7269\u63d0\u4f9b\u4e86\u4e00\u4e9b\u529f\u80fd\u3002\n\n\u5982\u679c\u4f60\u8fd8\u4e0d\u6e05\u695a buildConfig \u662f\u4ec0\u4e48\uff0c\u5efa\u8bae\u82b1\u4e00\u4e9b\u65f6\u95f4\u901a\u8fc7\u4e0b\u9762\u7684\u94fe\u63a5\u4e86\u89e3\u4e00\u4e0b\uff1a\n\n * \u3010\u4fee\u6539\u8f93\u51fa\u4ea7\u7269\u3011\n\n\u800c\u5728\u672c\u7ae0\u91cc\u6211\u4eec\u5c06\u8981\u6df1\u5165\u7406\u89e3\u67d0\u4e9b\u6784\u5efa\u914d\u7f6e\u7684\u4f7f\u7528\u4ee5\u53ca\u4e86\u89e3\u6267\u884c modern build \u547d\u4ee4\u7684\u65f6\u5019\u53d1\u751f\u4e86\u4ec0\u4e48\u3002\n\n\n\u6df1\u5165\u7406\u89e3 BUILDCONFIG\n\n\u90a3\u4e48\u9996\u5148\u6211\u4eec\u6765\u7406\u89e3 bundle \u548c bundleless \u7684\u6784\u5efa\u6a21\u5f0f\u3002\n\n\nBUNDLE \u548c BUNDLELESS\n\n\nINPUT \u4e0e SOURCEDIR \u7684\u5173\u7cfb\n\n\n\u6784\u5efa\u8fc7\u7a0b",frontmatter:{sidebar_position:2}},{id:13,title:"Theme Configuration",routePath:"/module-tools/en/guide/advance/theme-config",toc:[{id:"motivation-and-rationale-1",text:"Motivation and rationale",depth:2},{id:"usage-examples-1",text:"Usage examples",depth:2},{id:"tailwindcss-5",text:"tailwindcss",depth:3},{id:"html-class-2",text:"HTML Class",depth:4},{id:"apply-directives-1",text:"@apply Directives",depth:4}],content:"THEME CONFIGURATION\n\nThe module project provides the ability to configure themes through the\ndesignSystem API.\n\n\nMOTIVATION AND RATIONALE\n\nTheme configuration is somewhat similar to the custom theme functionality in the\ncomponent library and is mainly used in style development. We can use the\ndesignToken generated by the designSystem configuration in different style\ndevelopment environments.\n\nThe so-called designToken corresponds to different things in different style\ndevelopment environments.\n\n * tailwindcss: use designSystem as the theme configuration for tailwindcss. So\n   you can use.\n   * The name of the HTML class supported by tailwindcss.\n   * @apply custom directive under css/less/sass to use a string with the same\n     name as the HTML class name supported by tailwindcss.\n * css/less/scss: Generate global style variables via designSystem.\n\nThe data structure of the designSystem API is borrowed from the theme API in the\ntailwindcss configuration object, so a default set of designToken exists. For\nthe default values, see the designSystem API.\n\nThe css/less/sass global variables are not supported yet.\n\n\nUSAGE EXAMPLES\n\n\nTAILWINDCSS\n\nWhen using tailwindcss, its theme configuration can be set via designSystem.\n\nFor example, the following configuration extends the original color\nconfiguration:\n\nexport default {\n  designSystem: {\n    extend: {\n      colors: {\n        primary: '#1677ff',\n      },\n    },\n  },\n};\n\n\nWe can have two ways of using tailwindcss in our code.\n\nHTML CLASS\n\nimport 'tailwindcss/utilities.css';\n\nexport default () => {\n  return <div className=\"bg-primary\"></div>;\n};\n\n\n@APPLY DIRECTIVES\n\nAbout @apply\u3002\n\n<CH.Code>\n\nimport './index.css';\n\nexport default () => {\n  return <div className=\"btn-primary\"></div>;\n};\n\n\n.btn-primary {\n  @apply bg-primary;\n}\n\n\n</CH.Code>",frontmatter:{sidebar_position:7}},{id:14,title:"Before you start",routePath:"/module-tools/en/guide/basic/before-getting-started",toc:[{id:"environment-preparation-1",text:"Environment preparation",depth:2},{id:"getting-started-with-npm-1",text:"Getting Started with npm",depth:2},{id:"npm-package-type-project-1",text:"npm package type project",depth:2},{id:"using-third-party-npm-packages-1",text:"Using third-party npm packages",depth:2},{id:"other-npm-bits-and-pieces-to-know-1",text:"Other npm bits and pieces to know",depth:2},{id:"program-entry-for-npm-packages-1",text:"Program entry for npm packages",depth:3},{id:"scripts-2",text:'"scripts"',depth:3},{id:"npm-install-2",text:"npm install",depth:4},{id:"npm-publish-2",text:"npm publish",depth:4},{id:"peerdependencies-5",text:"peerDependencies",depth:3},{id:"npm-package-manager-1",text:"npm package manager",depth:2},{id:"module-tools-configuration-file-1",text:"Module Tools configuration file",depth:2}],content:'BEFORE YOU START\n\n\nENVIRONMENT PREPARATION\n\nIn order to use the Modern.js module engineering solution, you first need NodeJS\nengine, we recommend the latest LTS version, and make sure the Node version is\n>=14.18.0. because non-stable NodeJS releases frequently have bugs. You might\nconsider installing via nvm-windows and nvm (Mac/linux), so you can easily\nswitch to different NodeJS versions that might be required for different\nprojects that you work on.\n\n\nGETTING STARTED WITH NPM\n\nOnce NodeJS is installed, not only can you access the node executable from the\ncommand line, but you can also execute the npm command.\n\nNpm is the standard package manager for NodeJS. It started out as a tool for\ndownloading and managing NodeJS package dependencies, but it has since evolved\ninto a tool for front-end JavaScript.\n\nIf you already know something about usage of npm and npm packages, then you can\ndirectly see npm package manager section.\n\n\nNPM PACKAGE TYPE PROJECT\n\nSo what is an npm package type project? When we execute the npm init command in\nan empty project directory, it creates a JSON file with the file name\npackage.json under the current directory. During the creation process, we will\nneed to fill in information including but not limited to the name, version\nnumber, description, etc. of the npm package, which will be found in the\nresulting package.json file as follows\n\n{\n  "name": "npm-demo",\n  "version": "1.0.0",\n  "description": "",\n  "main": "index.js",\n  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1"\n  },\n  "author": "",\n  "license": "ISC"\n}\n\n\nAt this point the project containing the initialized package.json file is an npm\npackage type project, and you can execute the npm publish command to publish the\nproject to the npm Registry.\n\nThe npm Registry is a npm package store where developers can not only publish\ntheir own npm packages to the npm Registry, but also use npm packages published\nby other developers through the npm Registry.\n\nA quality npm package will be used by more people because it not only saves a\nlot of code implementation work, but is also less likely to cause problems with\nthe project.\n\n\nUSING THIRD-PARTY NPM PACKAGES\n\nWhen adding a third-party npm package to an initial project, we can call this\nprocess "installing dependencies for the project" or "adding dependencies to the\nproject". Before adding dependencies, we need to know one thing in particular --\nthe types of packages npm depends on.\n\n * "dependencies": a type of package that your application will need in a\n   production environment.\n * "devDependencies": another type of package that is only needed for local\n   development and testing.\n   \n   > packages can be understood as third-party npm packages.\n\nYou can install the packages you need in a production environment by running npm\ninstall npm-package-name or npm add npm-package-name, or you can manually write\nthe packages you need to install and the corresponding semantic version in\n"dependencies" in the package.json file, and run the npm install command to.\n\n{\n  "name": "your-npm-project",\n  "dependencies": {\n    "npm-package-name": "0.1.0"\n  }\n}\n\n\nSimilarly, you can install only packages needed for local development and\ntesting by running npm install npm-package-name --save-dev or npm add\nnpm-package-name --save-dev, or you can manually write the packages to be\ninstalled and the corresponding semantic version in "devDependencies" in the\npackage.json file, and run the npm install command as follows\n\n{\n  "name": "your-npm-project",\n  "devDependencies": {\n    "npm-package-name": "0.1.0"\n  }\n}\n\n\nWhen installing or using third-party npm packages be sure to determine what they\nare for and whether they should be placed in "dependencies" or "devDependencies"\nby distinguishing between their types.\n\nIn general, packages that need to be used in source code are dependencies\ndependencies. Unless you are exporting dependent code locally via packaging, in\nwhich case it can be treated as a devDependencies dependency.\n\n\nOTHER NPM BITS AND PIECES TO KNOW\n\n\nPROGRAM ENTRY FOR NPM PACKAGES\n\nThere is a "main" attribute in package.json that corresponds to a module ID or,\nmore intuitively, a NodeJS file path, which is the main entry point for your\napplication.\n\nFor example, if your package is named foo and the user installs it, and then\nexecutes the require("foo") code, then the file corresponding to the "main"\nfield of the npm package foo will be exported.\n\nIt is recommended to set the "main" field in your npm package. If "main" is not\nset, the default entry will be the index.js file in the root of the package.\n\nIn addition to the "main" attribute, the "module" attribute is usually set. It\nis similar to the "main" attribute in that it is mainly used in webpack\nscenarios. webpack reads the npm package entry (file) in most cases in the order\n"module" -> "main ".\n\n> To learn more about how webpack does this, check out this link.\n\n\n"SCRIPTS"\n\nThe "scripts" attribute of the package.json file supports a number of built-in\nscripts and npm-preset lifecycle events, as well as arbitrary scripts.\n\nThese can be executed by running npm run-script <stage> or simply npm run\n<stage>.\n\nName matching pre and post commands will also be run (e.g. premyscript,\nmyscript, postmyscript ).\n\n{\n  "scripts": {\n    "premyscript": "",\n    "myscript": "",\n    "postmyscript": ""\n  }\n}\n\n\nWhen npm run myscripts is executed, the script corresponding to premyscripts\nwill be executed before it, and the script corresponding to postmyscripts will\nbe executed after it.\n\nScript commands from dependencies can be run with npm explore <pkg> -- npm run\n<stage>.\n\nThere are also special lifecycle scripts that occur only under certain\ncircumstances. Here are a few that are usually necessary to know.\n\nNPM INSTALL\n\nWhen you run npm install -g <pkg-name>, the following scripts will run.\n\n * preinstall\n * install\n * postinstall\n * prepublish\n * preprepare\n * prepare\n * postprepare\n\nIf your package root has a binding.gyp file and you don\'t define an install or\npreinstall script, then npm will build with node-gyp rebuild as the default\ninstall command, using node-gyp.\n\nNPM PUBLISH\n\nWhen publishing a project, executing this command will trigger the following\nscript.\n\n * prepublishOnly\n * prepack\n * prepare\n * postpack\n * publish\n * postpublish\n\nWhen running in -dry-run mode, the script corresponding to prepare will not be\nexecuted.\n\n\nPEERDEPENDENCIES\n\nIn some cases, your npm project has a compatibility relationship with its host\ntool or library (e.g. a webpack plugin project and webpack), and your npm\nproject does not want to use the host as a necessary dependency, which usually\nmeans that your project is probably a plugin for that host tool or library. Your\nnpm project will have certain requirements for the version of the host package,\nas only the APIs required by the npm project will be exposed under a specific\nversion.\n\nFor more explanation of peerDependencies, you can learn about the different ways\nnpm, pnpm, and Yarn handle it at the following links.\n\n * npm\'s explanation of peerDependencies\n * pnpm vs npm vs Yarn\n\n\nNPM PACKAGE MANAGER\n\nIn addition to the standard package manager like npm, the mainstream ones are\npnpm and Yarn, both of which are good alternatives to npm cli.\n\nIt is recommended to use pnpm to manage project dependencies, which can be\ninstalled as follows.\n\nnpm install -g pnpm\n\n\n\nMODULE TOOLS CONFIGURATION FILE\n\nThe Module Tools configuration file - modern.config.(j|t)s - is provided in the\nproject directory of the module project created with @modern-js/create. However,\nthe modern.config configuration file is not required to exist.\n\nBy default, the contents of the generated configuration file are as follows.\n\n// modern.config.ts\n\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildPreset: \'npm-library\',\n});\n\n\n// modern.config.js\n\n\nexport default {\n  plugins: [moduleTools()],\n  buildPreset: \'npm-library\',\n};\n\n\nWe recommend using the defineConfig function, but it is not mandatory to use it.\nSo you can also return an object directly in the config file: the\n\n// modern.config.ts\nexport default {};\n\n\n// modern.config.js\nexport default {};\n',frontmatter:{sidebar_position:1}},{id:15,title:"Command Preview",routePath:"/module-tools/en/guide/basic/command-preview",toc:[{id:"modern-build-2",text:"modern build",depth:2},{id:"modern-new-2",text:"modern new",depth:2},{id:"modern-dev-2",text:"modern dev",depth:2},{id:"modern-test-2",text:"modern test",depth:2},{id:"modern-lint-2",text:"modern lint",depth:2},{id:"-modern-change-1",text:"-modern change",depth:2},{id:"modern-pre-2",text:"modern pre",depth:2},{id:"modern-bump-2",text:"modern bump",depth:2},{id:"modern-release-2",text:"modern release",depth:2},{id:"modern-gen-release-note-2",text:"modern gen-release-note",depth:2},{id:"modern-upgrade-2",text:"modern upgrade",depth:2}],content:'COMMAND PREVIEW\n\nCommands available for module engineering projects.\n\n\nMODERN BUILD\n\nUsage: modern build [options]\n\nBuild module command\n\nOptions:\n  -w, --watch Build code in listening mode\n  --tsconfig [tsconfig] Specify the path to the tsconfig.json file (default:\n                         ". /tsconfig.json")\n  --platform [platform] Build products for all or specified platforms\n  --no-dts disables DTS type file generation and type checking\n  --no-clear disables automatic clearing of product output directories\n  -h, --help Show information about the current command\n\n\nWhen you want to start a project build, you can execute the modern build\ncommand. When using this command, we can:\n\n * When wanting to start a build in watch mode, use the --watch option.\n * When you want to specify the path to the TypeScript configuration file read\n   by the project build, use -build --tsconfig . /path/config.json option. This\n   option overrides all buildConfig configurations in dts.tsconfigPath.\n * The -no-dts option can be used when the DTS type file generation and type\n   checking behavior of the project needs to be turned off. Note: The generation\n   of type files depends on the results of type checking. If type checking is\n   turned off, then type files will not be generated either.\n * The --no-clear option can be used when the automatic clearing of the product\n   output directory needs to be turned off.\n\nIn addition to the above, module projects also support platform build mode,\nwhich can be used to perform build tasks for other tools. For example, it is\ncurrently officially supported to start a Storybook build task to generate\nStorybook products by executing the modern build --platform or modern build\n--platform storybook commands after installing the @modern-js/plugin-storybook\nplugin.\n\nWhen executing a Storybook build, it needs to read the project\'s build product.\nSo when running the modern build --platform command to start a Storybook build,\nrun modern build once to ensure that the source build product exists.\n\n\nMODERN NEW\n\nUsage: modern new [options]\n\nExecute the generator in a modular project scenario\n\nOptions:\n  -d, --debug Enable Debug mode, print debug log messages (default: false)\n  -c, --config <config> Generators run default configuration (JSON string)\n  --dist-tag <tag> Generator uses a special version of npm Tag\n  --registry customize npm Registry during generator runtime\n  -h, --help display help for command\n\n\nThe modern new command is used to start the microgenerator functionality, which\nenables features for the project that are not provided by default.\n\nThe following features can currently be enabled.\n\n * Testing support\n * Storybook debugging\n * Tailwind CSS support\n * Modern.js Runtime API\n\nYou can learn more about these features in the Using the micro generator\nsection.\n\n\nMODERN DEV\n\nUsage: modern dev [options]\n\nLocal development commands\n\nOptions:\n  -h, --help display help for command\n\nCommands:\n[dev-tools-subCommand]\n\n\nThe module engineering solution provides the ability to use debugging tools,\nwhich can be started with the modern dev command. Note, however, that no\ndebugging-related plugins are provided by default, so executing modern dev will\nprompt: "No dev tools found available ".\n\nThe officially supported debugging tool is Storybook, so you can run modern dev\nor modern dev storybook to execute it after you run modern new to enable it.\n\n\nMODERN TEST\n\nUsage: modern test [options]\n\nOptions:\n  -h, --help display help for command\n\n\nYou need to execute modern new to turn on the test function before you can\nexecute the modern test command. The modern test command will automatically run\nthe src/tests/*.test.(js|ts|jsx|tsx) file as a test case.\n\n\nMODERN LINT\n\nUsage: modern lint [options] [. .files]\n\nlint and fix source files\n\nOptions:\n  --no-fix disable auto fix source file\n  -h, --help display help for command\n\n\nRun ESLint to check the syntax of the code. Usually, we only need to check the\npart of the code that was changed in this commit with lint-staged during the\n-git commit phase.\n\n * The -no-fix argument turns off the ability to automatically fix lint error\n   code.\n\n\n-MODERN CHANGE\n\nUsage: modern change [options]\n\nCreate a changeset\n\nOptions:\n  --empty Create an empty changeset (default: false)\n  --open Open the created changeset in the editor (default: false)\n  -h, --help display help for command\n\n\nThe modern change command is used to generate the required Markdown file for\nchangesets.\n\n\nMODERN PRE\n\nUsage: modern pre [options] <enter|exit> [tag]\n\nEntering and exiting pre-publishing mode\n\nOptions:\n  -h, --help display help for command\n\n\nYou can use the modern pre command to pre-release a version before the official\nrelease.\n\n\nMODERN BUMP\n\nUsage: modern bump [options]\n\nUse changesets to automatically update releases and changelogs\n\nOptions:\n  --canary Create a pre-release for testing (default: false)\n  --preid <tag> Specify an identifier when versioning a pre-release (default: "next")\n  --snapshot Create a special version for testing (default: false)\n  -h, --help display help for command\n\n\nModify the version number in package.json according to the Markdown file of the\nchangelog generated by changesets, and generate the CHANGELOG.md file.\n\n\nMODERN RELEASE\n\nUsage: modern release [options]\n\nRelease npm packages\n\nOptions:\n  --tag <tag> Release npm packages with a specific tag (default: "")\n  --ignore-scripts release ignores the scripts command in package.json, only supported in pnpm monorepo\n                    (default: "")\n  -h, --help display help for command\n\n\nThe -modern release command releases the module to the npm Registry.\n\n * The -tag argument specifies the specific dist tags to be used for the\n   release.\n\n\nMODERN GEN-RELEASE-NOTE\n\nUsage: modern gen-release-note [options]\n\nGenerate Release Note based on current repository changeset information\n\nOptions:\n  --repo <repo> The name of the repository to generate the Pull Request link, e.g.: modern-js-dev/modern.js\n  --custom <cumtom> Custom Release Note generation function\n  -h, --help display help for command\n\n\nAutomatically generate Release Note based on the changeset information of the\ncurrent repository.\n\nneeds to be executed before the bump command.\n\n\nMODERN UPGRADE\n\nUsage: modern upgrade [options]\n\nUpgrade Modern.js to the latest version\n\nOptions:\n  --registry <registry> customize npm registry (default: "")\n  -d,--debug Enable Debug mode to print debug log messages (default: false)\n  --cwd <cwd> project path (default: "")\n  -h, --help display help for command\n\n\nThe modern upgrade command is used to upgrade the project Modern.js related\ndependencies to the latest version.\n\nExecuting the command npx modern upgrade in the project root directory will\nupdate the Modern.js dependencies in package.json of the currently executing\nproject to the latest version by default.',frontmatter:{sidebar_position:2}},{id:16,title:"modify-output-product",routePath:"/module-tools/en/guide/basic/modify-output-product",toc:[{id:"modify-the-output-product-1",text:"Modify the output product",depth:2},{id:"default-output-products-1",text:"Default output products",depth:2},{id:"buildpreset-1",text:"buildPreset",depth:2},{id:"string-form-of-build-preset-1",text:"String form of build preset",depth:3},{id:"build-pre-defined-function-forms-1",text:"Build pre-defined function forms",depth:3},{id:"build-configuration-object-1",text:"Build configuration (object)",depth:2},{id:"when-to-use-buildconfig-1",text:"When to use buildConfig",depth:2}],content:'MODIFY-OUTPUT-PRODUCT\n\n\nMODIFY THE OUTPUT PRODUCT\n\n\nDEFAULT OUTPUT PRODUCTS\n\nWhen the modern build command is used in an initialized project, the products\nare generated according to the default configuration supported by Module Tools.\nThe default supported configurations are specified as follows.\n\n\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildPreset: \'npm-library\',\n});\n\n\nThe default generation product has the following characteristics.\n\n * will generate CommonJS and [ESM](https://nodejs.org/api/esm.html#modules-\n   ecmascript-modules).\n * The code syntax is supported up to ES6 , and more advanced syntax will be\n   converted.\n * All code is packaged into one file, i.e. bundle processing is performed.\n * The output root directory is the dist directory under the project, and the\n   type file output directory is dist/types.\n\nYou may have the following questions when you see this.\n\n 1. what is buildPreset?\n 2. what determines these characteristics of the product?\n\nThen the next step is to first explain buildPreset.\n\n\nBUILDPRESET\n\nThe buildPreset represents one or more sets of build-related configurations\nprepared in advance. By using the corresponding preset values of the\nbuildPreset, you can eliminate the troublesome and complicated configuration\nwork and get the expected product.\n\n\nSTRING FORM OF BUILD PRESET\n\nThe value of a build preset can be in the form of a string, so a build preset of\nthis form is called a preset string.\n\nThe module engineering solution provides generic build preset strings and\ncorresponding variants, depending on the generic scenario in which the npm\npackage is used. All currently supported preset strings can be viewed via the\nBuildPreset API. Here is an explanation about the relationship between generic\npreset strings and variants.\n\nAmong the generic preset strings, "npm-library" can be used in the scenario of\ndeveloping npm packages of the library type, which is suitable for most common\nmodule type projects. When "npm-library" is set, the output product of the\nproject will have the following characteristics.\n\n * In the dist/lib directory you will get code formatted as cjs, syntax\n   supported up to es6 and packaged.\n * In the dist/es directory, you get code in the format esm, with syntax support\n   up to es6 and after packaging.\n * In the dist/types directory, you get the type files. If it is not a\n   TypeScript project, there is no such directory.\n\nThe default string "npm-library" is a variant of the original product with a\nmodified code syntax support feature and a string naming change to\n"npm-library-[es5 | es2016.... . es2020 | esnext]".\n\nFor example, if the output product is based on the preset string "npm-library"\nand the syntax supported by the product code is changed to es5, then simply\nchanging "npm-library" to "npm-library-es5" would be sufficient.\n\n\nBUILD PRE-DEFINED FUNCTION FORMS\n\nIn addition to the string form, the value of a build preset can also be in the\nform of a function, where the specific configuration corresponding to a preset\nvalue can be printed or modified.\n\nFor example, to achieve the same effect as the preset string ``npm-library-es5"`\nusing the form of a preset function, you can do the following.\n\n\n\nexport default defineConfig({\n  buildPreset({ preset }) {\n    return preset.NPM_LIBRARY.map(config => {\n      return { ... .config, target: \'es5\' }\n    });\n  },\n});\n\n\nIn the above code implementation, preset.NPM_LIBRARY corresponds to the preset\nstring "npm-library", which represents the "npm-library" equivalent of a\nmulti-group build-related configuration. We traverse the NPM_LIBRARY array,\nwhich contains multiple buildConfig objects, with the map method. We make a\nshallow copy of the original buildConfig object and modify the shallow copy to\nget buildConfig.target, specifying it as es5.\n\n> NPM_LIBRARY, you can check it with [BuildPreset\n> API](/api/config/build-preset). Thepresetobject contains not onlyNPM_LIBRARY`,\n> but also other similar constants.\n\nSo what is the buildConfig object here? What is the basis for the build product\nfeature mentioned before?\n\nLet\'s explain next.\n\n\nBUILD CONFIGURATION (OBJECT)\n\nbuildConfig is a configuration object that describes how to compile and generate\nbuild products. What was mentioned at the beginning about "features of build\nproducts" are actually properties supported by buildConfig. The currently\nsupported properties cover the needs of most module type projects when building\nproducts. buildConfig not only contains some properties that products have, but\nalso contains some features needed to build products. The following is a brief\nlist from a classification point of view.\n\nThe basic attributes of a build product include:\n\n * Whether the product is packaged or not: the corresponding API is\n   buildConfig.buildType.\n * Product support for syntax: the corresponding API is buildConfig.target.\n * Output format: the corresponding API is buildConfig.format.\n * How the output type file is handled: the corresponding API is\n   buildConfig.dts.\n * How the sourceMap of the product is handled: the corresponding API is\n   buildConfig.sourceMap.\n * The input (or source file) corresponding to the output: the corresponding API\n   is buildConfig.input.\n * The directory of the output of the product: the corresponding API is\n   buildConfig.outDir.\n * Build source directory: the corresponding API is buildConfig.sourceDir.\n\nCommon functions required for build products include:\n\n * Alias: The corresponding API is buildConfig.alias.\n * Static resource handling: the corresponding API is buildConfig.asset.\n * Third-party dependency handling: The corresponding APIs are\n   * buildConfig.autoExternal.\n   * buildConfig.externals.\n * Copy: The corresponding API is buildConfig.copy.\n * Global variable substitution: the corresponding API is buildConfig.define.\n * Specify JSX compilation method, the corresponding API is\n   [buildConfig.jsx](/api/config/ build-config#jsx).\n\nSome advanced properties or less frequently used functions:\n\n * Product code compression: The corresponding API is buildConfig.minify.\n * Code splitting: buildConfig.splitting\n * Specify whether the build product is for the NodeJS environment or the\n   browser environment: the corresponding API is buildConfig.platform.\n * umd product-related.\n   * Specifies the global variables imported externally to the umd product: the\n     corresponding API is buildConfig.umdGlobals.\n   * Specify the module name of the umd product: the corresponding API is\n     buildConfig.umdModuleName.\n\nIn addition to the above categories, frequently asked questions and best\npractices about these APIs can be found at the following links\n\n * [What are bundle and bundleless?](/guide/advance/in-depth-about-build#bundle-\n   and-bundleless)\n * [Relationship of input to\n   sourceDir](/guide/advance/in-depth-about-build#input- to -sourcedir-)\n * Multiple ways to generate type files in product.\n * [buildConfig.define Different ways to use it for different\n   scenarios.](/guide/advance/in-depth-about-build#buildconfigdefine - How to\n   use it for different scenarios)\n * How to handle third-party dependencies?\n * How to use copy?\n * How do I build umd products? (/guide/advance/build-umd# sets the global\n   variable name of the project)\n * The capabilities currently supported by static resources.\n\n\nWHEN TO USE BUILDCONFIG\n\nbuildConfig is one of the methods used to modify the product, only buildConfig\nwill take effect when configured in conjunction with buildPreset. So if\nconfigured as follows.\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    format: \'umd\',\n  },\n  buildPreset: \'npm-library\',\n});\n\n\nThen at this point you will see the following prompt.\n\nSince both \'buildConfig\' and \'buildPreset\' are present, only the \'buildConfig\' configuration will take effect\n\n\nThe set or sets of build-related configurations represented by buildPreset are\ncomposed of buildConfig, which can be used to customize output products when the\ncurrent project needs cannot be met using buildPreset.\n\nThe process of using buildConfig is the process of thinking about what kind of\nbuild product to get.',frontmatter:{sidebar_position:3}},{id:17,title:"Versioning and Publishing",routePath:"/module-tools/en/guide/basic/publish-your-project",toc:[{id:"tracking-changes-1",text:"Tracking changes",depth:2},{id:"version-update-1",text:"Version update",depth:2},{id:"publish-1",text:"Publish",depth:2},{id:"pre-releases-1",text:"Pre-releases",depth:2}],content:"VERSIONING AND PUBLISHING\n\nAn npm-type module project release process consists of two phases.\n\n * The first phase is during development, where the developer needs to provide a\n   change file to record changes that need to be released.\n * The second phase is during release, where Module Tools can collect all the\n   change files to update the version, update the release log, and release new\n   packages to the npm Registry.\n\n\nTRACKING CHANGES\n\nChanges need to be logged when they happen to the project. Changes that occur in\na project are typically.\n\n * New features\n * Fixes to issues\n * Configuration file changes\n * ...\n\nOnce these changes have been made, the current changes need to be documented\nwith the following command.\n\n * modern change\n\nExecuting the modern change command asks the developer several questions and\ngenerates a change log based on the developer's answers. The changelog file\ncontains the type of change and its description, and is committed to the git\nrepository.\n\n$ npx modern change\n\ud83e\udd8b What kind of change is this for module-example? (current version is 0.1.0) - patch\n\ud83e\udd8b Please enter a summary for this change (this will be in the changelogs). Submit empty line to open external editor\n\ud83e\udd8b Summary - publish test\n\ud83e\udd8b === Releasing the following packages ===\n\ud83e\udd8b [Patch]\n\ud83e\udd8b module\n\ud83e\udd8b Is this your desired changeset? (Y/n) - true\n\ud83e\udd8b Changeset added! - you can now commit it\n\ud83e\udd8b\n\ud83e\udd8b If you want to modify or expand on the changeset summary, you can find it here\n\ud83e\udd8b info /xxxxxx/module/.changeset/brave-dryers-agree.md\n\n\nWhen executed successfully, the resulting Markdown file containing the change\nlog is saved in the project's .changeset directory. The contents will look like\nthe following.\n\n---\n\"``module-example'': patch\n---\n\npublish test\n\n\n\nVERSION UPDATE\n\nWhen the project version needs to be updated, execute the following command.\n\n * modern bump\n\nExecuting modern bump will modify the version number in package.json based on\nthe contents of the Markdown file in the .changeset/ directory where the changes\nwere recorded, and generate the CHANGELOG.md file. These Markdown files are also\ndeleted when the version update is complete, so they are \"consumed \".\n\n# module\n\n## 0.1.1\n\n### Patch Changes\n\n- publish test\n\n\n\nPUBLISH\n\nTo publish a project, you can execute the following command.\n\n * modern publish\n\nThe modern release command publishes the project to the npm Registry.\n\nThe release is the latest version, which is also the official version. If you\nwant to change the dist-tag, you can specify it with the modern release --tag\ncommand. For example.\n\nmodern release --tag beta\n\n\nHowever, if you want to change the version number of the current project to a\npre-release as well, you need to use the modern pre command.\n\n> dist-tag can be understood as: tagging the current release. Generally\n> speaking, the dist-tag for the default release is latest, so you can consider\n> latest as the dist-tag for the official release.\n\n\nPRE-RELEASES\n\nWhen a pre-release is needed before the official release, the following command\nis executed.\n\n * modern pre\n\nFirst modern pre enter <tag> to enter pre-release mode, <tag> can be the same as\nthe tag specified with the modern release --tag command when releasing the\nproject.\n\n$ npx modern pre enter next\n\ud83e\udd8b success Entered pre mode with tag next\n\ud83e\udd8b info Run `changeset version` to version packages with prerelease versions\n\u2728 Done in 5.30s.\nDone in 5.30s. ```\n\nThen you can update the specific version number with the `modern bump` command, **which doesn't actually \"consume\" the Markdown file that records the changes**: ``` bash\n\n``` bash\n$ npx modern bump\n\ud83e\udd8b warn ===============================IMPORTANT!===============================\n\ud83e\udd8b warn You are in prerelease mode\n\ud83e\udd8b warn If you meant to do a normal release you should revert these changes and run `changeset pre exit`\n\ud83e\udd8b warn You can then run `changeset version` again to do a normal release\n\ud83e\udd8b warn ----------------------------------------------------------------------\n\ud83e\udd8b All files have been updated. review them and commit at your leisure\n\n\nThen you can see that the updated version number in package.json will look like\nthis: 0.1.2-next.0.\n\nFinally, if you don't need to do a pre-release anymore, be sure to run the\nmodern pre exit command to exit the pre-release state and to release the\nofficial version when you run the modern bump command again.",frontmatter:{sidebar_position:7}},{id:18,title:"Testing Projects",routePath:"/module-tools/en/guide/basic/test-your-project",toc:[{id:"prerequisites-and-conventions-1",text:"Prerequisites and conventions",depth:2},{id:"run-the-tests-1",text:"Run the tests",depth:2},{id:"usage-configuration-1",text:"Usage Configuration",depth:2},{id:"test-example-1",text:"Test example",depth:2},{id:"common-modules-1",text:"Common modules",depth:3},{id:"components-1",text:"Components",depth:3}],content:"TESTING PROJECTS\n\nThis chapter will describe how to test modules.\n\n\nPREREQUISITES AND CONVENTIONS\n\nTo use the testing features of the project, you need to make sure that the\nproject contains the dependency: \"@modern-js/plugin-testing\" , which can be done\nwith modern new.\n\nIn the module engineering scheme, the following conventions are in place for\ntest cases, or files for writing tests:\n\n * The tests directory in the project directory is the directory for test cases\n   and test files, no support for changing the directory for running test cases.\n * Files with the suffix .test.[tj]sx? are automatically recognized as test\n   files by default.\n * Other . [tj]sx? suffixes are recognized as normal files that can be used as\n   test utils files or for other purposes.\n\n\nRUN THE TESTS\n\nOnce the dependencies are prepared and we know where to write the test cases, we\ncan execute the tests with the following command:\n\nmodern test\n\n// Update snapshot\nmodern test --updateSnapshot\n\n\nAfter execution, you will see the results of the test:\n\n\n\n\nUSAGE CONFIGURATION\n\nThe Module Engineering Program provides the following configurations for\ntesting.\n\n * testing\n\nYou can add it in modern.config.(j|t)s.\n\n\nTEST EXAMPLE\n\n\nCOMMON MODULES\n\nFor common modules, we can use the test function as follows:\n\n<CH.Spotlight>\n\nexport default function () {\n  return 'hello world';\n}\n\n\n--------------------------------------------------------------------------------\n\nFirst is the code of the module.\n\nexport default function () {\n  return 'hello world';\n}\n\n\n--------------------------------------------------------------------------------\n\nThen in the test file, we can do this.\n\nWhere @ points to the source directory, defined in tests/tsconfig.json in the\ninitialization project.\n\n\n\ndescribe('default cases', () => {\n  test('Have returns', () => {\n    const drink = jest.fn(main);\n    drink();\n    expect(drink).toHaveReturned();\n  });\n});\n\n\n--------------------------------------------------------------------------------\n\nFinally we can execute modern test.\n\npnpm test\n## or\nyarn test\n## or\nnpm run test\n\n\n</CH.Spotlight>\n\n\nCOMPONENTS\n\n{/* \u94fe\u63a5\u5f85\u8865\u5145 */}\n\nFor components, Modern.js's Runtime API provides functionality for testing UI\ncomponents, which is provided by @modern-js/runtime/testing.\n\nIf you need to use the Runtime API, then you can turn it on via microgenerator.\n\n<CH.Spotlight>\n\nexport const default () {\n  return (\n    <div>This is a UI Component</div>\n  );\n}\n\n\n--------------------------------------------------------------------------------\n\nFirst is the code of the component.\n\nexport const default () {\n  return (\n    <div>This is a UI Component</div>\n  );\n}\n\n\n--------------------------------------------------------------------------------\n\nThen in the test file, we can do this.\n\nWhere @ points to the source directory, defined in tests/tsconfig.json in the\ninitialization project.\n\n\n\n\n\ndescribe('default cases', () => {\n  test('Rendered', () => {\n    render(<Component />);\n    expect(screen.getByText('This is a UI Component')).toBeInTheDocument();\n  });\n});\n\n\n--------------------------------------------------------------------------------\n\nFinally we can execute modern test.\n\npnpm test\n## or\nyarn test\n## or\nnpm run test\n\n\n</CH.Spotlight>",frontmatter:{sidebar_position:6}},{id:19,title:"Using the Microgenerator",routePath:"/module-tools/en/guide/basic/use-micro-generator",toc:[{id:"test-1",text:"Test",depth:2},{id:"storybook-1",text:"Storybook",depth:2},{id:"tailwind-css-support-1",text:"Tailwind CSS support",depth:2},{id:"modernjs-runtime-api-1",text:"Modern.js Runtime API",depth:2}],content:'USING THE MICROGENERATOR\n\nThe Module Engineering solution provides the Microgenerator tool, which allows\nfor the current project to.\n\n * add new directories and files\n * Modify the contents of the package.json file\n * Execute commands\n\nThus with these capabilities, Microgenerator can enable additional feature\nfunctionality for the project.\n\nThe microgenerator can be started via modern new. The current Microgenerator\nfeatures supported by the Module Engineering program are:\n\n\nTEST\n\nWhen we want to test some modules, we can enable the test test feature. When\nthis feature is enabled, a tests directory and related files will be created in\nthe project directory, and a new "@modern-js/plugin-testing" dependency will be\nadded to package.json.\n\n\nSTORYBOOK\n\nThe Storybook feature can be enabled when we want to debug a component or a\ncommon module. When this feature is enabled, the stories directory and related\nfiles are created in the project directory, and a new\n"@modern-js/plugin-storybook" dependency is added to package.json.\n\nFor more information on how to start Storybook and how to use it, check out the\nfollowing link.\n\n * modern dev\n * using Storybook\n\n\nTAILWIND CSS SUPPORT\n\nThis can be enabled when we want to add Tailwind CSS support to our project.\nTailwind CSS is a CSS library that provides out-of-the-box styling.\n\nFor more information on how to use Tailwind CSS in your module projects, check\nout.\n\n * Using Tailwind CSS\n\n\nMODERN.JS RUNTIME API\n\nModern.js provides Runtime API capabilities that can only be used in the\nModern.js application project environment. If you need to develop a component\nfor use in a Modern.js application environment, then you can turn on this\nfeature and the microgenerator will add the "@modern-js/runtime" dependency.\n\nAlso, the Storybook debugging tool will determine if the project needs to use\nthe Runtime API by checking the project\'s dependencies and providing the same\nRuntime API runtime environment as the Modern.js application project.',frontmatter:{sidebar_position:4}},{id:20,title:"Using Storybook",routePath:"/module-tools/en/guide/basic/using-storybook",toc:[{id:"debugging-code-1",text:"Debugging code",depth:2},{id:"referencing-component-products-1",text:"Referencing component products",depth:3},{id:"referencing-component-source-code-1",text:"Referencing component source code",depth:3},{id:"configure-storybook-1",text:"Configure Storybook",depth:2},{id:"building-storybook-products-1",text:"Building Storybook Products",depth:2}],content:'USING STORYBOOK\n\nFirst of all, if you haven\'t read the following, take a few minutes to\nunderstand it first.\n\n * use micro-generator to enable Storybook debugging\n * modern dev\n\nStorybook is a tool dedicated to component debugging, providing around component\ndevelopment.\n\n * Develop UIs that are more durable\n * Test UIs with less effort and no flakes\n * Document UI for your team to reuse\n * Share how the UI actually works\n * Automate UI workflows\n\nSo it is a complex and powerful tool.\n\nThe modular engineering solution is integrated with Storybook, so you can pretty\nmuch follow the official Storybook documentation. However, there are still a few\nthings to keep in mind, which are explained below.\n\n\nDEBUGGING CODE\n\nComponent code needs to be introduced during debugging code, and currently\ncomponent code can be introduced in two ways:\n\n * Referencing the component product\n * Referencing component source code\n\nWe recommend the first way of "referencing component product". Because it is\nalmost close to the real usage scenario, not only can we debug the component\nfunctionality, but also verify the correctness of the build product.\n\nNext, we will talk about how to use each of these two methods.\n\n\nREFERENCING COMPONENT PRODUCTS\n\nIf the TypeScript project foo exists.\n\n<CH.Spotlight>\n\n{\n  "name": "foo",\n  "main": "./dist/index.js",\n  "types": "./dist/types/index.d.ts"\n}\n\n\n--------------------------------------------------------------------------------\n\nMake sure the main and types of package.json values are real paths.\n\n{\n  "name": "foo",\n  "main": "./dist/index.js",\n  "types": "./dist/types/index.d.ts"\n}\n\n\n--------------------------------------------------------------------------------\n\nThe source code of the foo project.\n\nexport const content = \'hello world\';\n\n\n--------------------------------------------------------------------------------\n\nMake sure that the paths configuration pointing to the project root is set in\nstories/tsconfig.json. The key of paths is the same as the project name.\n\n{\n  "extends": "../tsconfig.json",\n  "include": ["./"],\n  "compilerOptions": {\n    "jsx": "preserve",\n    "baseUrl": ".",\n    "paths": {\n      "foo": ["../"]\n    }\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\nFinally, it is referenced directly in the Story code by the project name.\n\n\n\nconst Component = () => <div>this is a Story Component {content}</div>;\n\nexport const YourStory = () => <Component />;\n\nexport default {\n  title: \'Your Stories\',\n};\n\n\n</CH.Spotlight>\n\nIf, during development, you encounter a situation where the type definition is\nnot available in real time, at that point.\n\nFor pnpm projects, package.json can be modified as follows.\n\n{\n    "name": "foo",\n    "main": "./dist/index.js",\n    "types": "./src/index.ts",\n    "publishConfig": {\n      "types": "./dist/index.d.ts",\n    }\n}\n\n\n> For the use of pnpm\'s publishConfig, you can read the following link.\n\nFor npm and Yarn projects, the values of types of package.json can only be\nchanged manually in development phase and release phase.\n\nSo why is it possible to reference the product directly?\n\n 1. the modern build command is executed automatically before the modern dev\n    storybook command, ensuring the existence of the project build product.\n 2. The project name is added as an alias inside Storybook to ensure that the\n    path to the project\'s product can be parsed according to package.json.\n\n\nREFERENCING COMPONENT SOURCE CODE\n\nReferencing component source code can be done by means of relative paths to:\n\n\n\nconst Component = () => <div>this is a Story Component {content}</div>;\n\nexport const YourStory = () => <Component />;\n\nexport default {\n  title: \'Your Stories\',\n};\n\n\nSo why is the source code approach not recommended?\n\nNot only is it impossible to verify that the component product is correct using\nthe component source code, but also some of the configurations supported by the\nmodule project for building the product cannot be fully translated into\nStorybook internal configuration. If some of the configurations cannot be\nconverted to each other, there will be unintended results during Storybook\ndebugging.\n\n\nCONFIGURE STORYBOOK\n\nStorybook is officially configured for projects through a folder called\n.storybook, which contains various configuration files. In a module project\nscenario, Storybook configuration files can be added to the config/storybook\ndirectory of the project.\n\nFor more information on how to use the various Storybook configuration files,\nsee the following links:\n\n * Configure Storybook\n\nBut there are some limitations to Storybooking in a module project:\n\n * It is currently not possible to change the location of the Story file, i.e.,\n   you cannot change the stories configuration in the main.js file.\n * Currently you cannot modify Webpack and Babel related configuration, i.e. you\n   cannot modify webpackFinal and babel configuration in the main.js file.\n\nIn the future we will consider whether these configurations can be allowed to be\nmodified, but for now we are limiting their use to reduce unpredictable issues.\n\n\nBUILDING STORYBOOK PRODUCTS\n\nIn addition to Storybook debugging of components or common modules, you can also\nperform Storybook build tasks with the following commands.\n\nmodern build --platform storybook\n\n\nFor the modern build --platform command you can see.\n\n * modern build\n\nAfter the build is complete, you can see the build product files in the\ndist/storybook-static directory.',frontmatter:{sidebar_position:5}},{id:21,title:"# Initialize the project",routePath:"/module-tools/en/guide/best-practices/components",toc:[{id:"debugging-code-with-storybook-1",text:"Debugging code with Storybook",depth:2},{id:"developing-styles-1",text:"Developing Styles",depth:2},{id:"csspostcss-2",text:"CSS/PostCSS",depth:3},{id:"less-5",text:"Less",depth:3},{id:"sassscss-2",text:"Sass/Scss",depth:3},{id:"tailwind-css-2",text:"Tailwind CSS",depth:3},{id:"html-class-3",text:"HTML class",depth:4},{id:"apply-2",text:"@apply",depth:4},{id:"recommended-method-1",text:"Recommended method",depth:4},{id:"the-difference-between-bundle-and-bundleless-build-products-1",text:"The difference between bundle and bundleless build products",depth:4},{id:"css-modules-2",text:"CSS Modules",depth:3},{id:"configuring-build-products-1",text:"Configuring build products",depth:2},{id:"testing-components-1",text:"Testing components",depth:2},{id:"releasing-components-1",text:"Releasing components",depth:2}],content:'DEVELOPING COMPONENTS\n\nThis chapter will describe how to develop component projects using the module\nengineering solution.\n\n\n# INITIALIZE THE PROJECT\n\n<CH.Spotlight>\n\nnpx @modern-js/create components-project\n\n? Please select the solution you want to create Module Solution\n? Package Name components-demo\n? Development Language TS\n? Package Management Tool pnpm\n\n\n--------------------------------------------------------------------------------\n\nIt is recommended to use the @modern-js/create command to initialize an npm\nproject.\n\nnpx @modern-js/create components-project\n\n? Please select the solution you want to create Module Solution\n? Package Name components-demo\n? Development Language TS\n? Package Management Tool pnpm\n\n\n--------------------------------------------------------------------------------\n\nThe initialized directory structure.\n\n.\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 node_modules/\n\u251c\u2500\u2500 dist/\n\u251c\u2500\u2500 modern.config.ts\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 pnpm-lock.yaml\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 index.ts\n\u2502   \u2514\u2500\u2500 modern-app-env.d.ts\n\u2514\u2500\u2500 tsconfig.json\n\n\n--------------------------------------------------------------------------------\n\nModify the . /src/index.ts file suffix and content.\n\nAt this point, a component project is initialized.\n\nexport default () => {\n  return <div>hello world</div>;\n};\n\n\n</CH.Spotlight>\n\n\nDEBUGGING CODE WITH STORYBOOK\n\n<CH.Spotlight>\n\npnpm run new\n\n? Action Enable features\n? Enable features Enable Visual Testing (Storybook)\n\n\n--------------------------------------------------------------------------------\n\nExecute the new command in the project root directory to enable the Storybook\nfeature.\n\npnpm run new\n\n? Action Enable features\n? Enable features Enable Visual Testing (Storybook)\n\n\n--------------------------------------------------------------------------------\n\nOnce successfully opened, you will see that a new dependency has been added to\npackage.json. The stories directory and related initialization files are also\ncreated.\n\n<CH.Code>\n\n{\n  "name": "components-demo",\n  "devDependencies": {\n    "@modern-js/plugin-storybook": "x.y.z",\n    "@modern-js/runtime": "x.y.z",\n    "react": "^17",\n    "react-dom": "^17"\n  }\n}\n\n\n.\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 index.ts\n\u2502   \u2514\u2500\u2500 modern-app-env.d.ts\n\u251c\u2500\u2500 stories\n\u2502   \u251c\u2500\u2500 .eslintrc.js\n\u2502   \u251c\u2500\u2500 index.stories.tsx\n\u2502   \u2514\u2500\u2500 tsconfig.json\n\n\n</CH.Code>\n\n--------------------------------------------------------------------------------\n\nAfter initialization, the tsconfig.json file in the . /stories directory, the\ntsconfig.json file is set by default with the paths configuration of the same\nname as the project.\n\n{\n  "extends": "../tsconfig.json",\n  "compilerOptions": {\n    "baseUrl": "../",\n    "paths": {\n      "components-demo": ["./"],\n      "components-demo/*": ["./*"]\n    }\n  },\n  "include": ["**/*"]\n}\n\n\n--------------------------------------------------------------------------------\n\nSuch a configuration allows you to introduce code in Story code directly using\nthe name of the project.\n\n<CH.Code>\n\n\n\nexport const YourStory = () => <Component />;\n\nexport default {\n  title: \'Your Stories\',\n};\n\n\n--------------------------------------------------------------------------------\n\nexport default () => {\n  return <div>hello world</div>;\n};\n\n\n</CH.Code>\n\n--------------------------------------------------------------------------------\n\nAt this point Storybook identifies the entry point for the imported code based\non fields like main, exports in the project\'s package.json file. The location of\nthe type file is determined by the types field.\n\n{\n  "name": "components-demo",\n  "main": "./dist/esm/index.js",\n  "types": "./dist/types/index.d.ts"\n}\n\n\n--------------------------------------------------------------------------------\n\nWhile importing source code for debugging is also supported, debugging using\nproject artifacts is more reliable.\n\nDebugging with source code has a limitation: some configurations are not\nequivalent in Storybook and in the original build support.\n\nThis is why debugging with the product is recommended.\n\n\n\nexport const YourStory = () => <Component />;\n\nexport default {\n  title: \'Your Stories\',\n};\n\n\n</CH.Spotlight>\n\n\nDEVELOPING STYLES\n\nNext we can add styles to the component.\n\nThe following capabilities are currently supported for developing styles.\n\n * CSS/PostCSS\n * Less\n * Scss/Sass\n * Tailwind CSS\n * CSS Modules\n\n\nCSS/POSTCSS\n\nThe module project supports PostCSS and has the following built-in postcss\nplugins.\n\n * flexbugs-fixes\n * custom-properties\n * initial\n * page-break\n * font-variant\n * media-minmax\n * nesting\n\nSo we can create .css files in our projects and use the syntax support and\ncapabilities provided by these plugins directly in our css files.\n\n<CH.Spotlight>\n\na,\nb {\n  color: red;\n\n  /* "&" comes first */\n  & c,\n  & d {\n    color: white;\n  }\n\n  /* "&" comes later, requiring "@nest" */\n  @nest e & {\n    color: yellow;\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\nSource Code.\n\n\n\n--------------------------------------------------------------------------------\n\ncss product.\n\na,\nb {\n  color: red;\n}\na c,\nb c,\na d,\nb d {\n  color: white;\n}\ne a,\ne b {\n  color: yellow;\n}\n\n\n</CH.Spotlight>\n\n\nLESS\n\nModule projects support development styles using Less.\n\n> Currently supported version is 4.1.3\n\n<CH.Spotlight>\n\n@bg: black;\n@bg-light: boolean(luma(@bg) > 50%);\n\ndiv {\n  background: @bg;\n  color: if(@bg-light, black, white);\n}\n\n\n--------------------------------------------------------------------------------\n\nSource Code.\n\n\n\n--------------------------------------------------------------------------------\n\nLess product.\n\ndiv {\n  background: black;\n  color: white;\n}\n\n\n</CH.Spotlight>\n\n\nSASS/SCSS\n\nModule projects support developing styles using Scss/Sass.\n\n> Currently supported version is 1.54.4\n\n<CH.Spotlight>\n\n$font-stack: Helvetica, sans-serif;\n$primary-color: #333;\n\nbody {\n  font: 100% $font-stack;\n  color: $primary-color;\n}\n\n\n--------------------------------------------------------------------------------\n\n\u6e90\u4ee3\u7801\u3002\n\n\n\n--------------------------------------------------------------------------------\n\nLess product.\n\nbody {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}\n\n\n</CH.Spotlight>\n\n\nTAILWIND CSS\n\nThe module project supports the development of component styles using Tailwind\nCSS.\n\nBy default, this feature is not enabled in the module project, you need to\nenable it as follows.\n\n<CH.Spotlight>\n\npnpm run new\n\n? Action Enable features\n? Enable features Enable Visual Testing (Storybook)\n\n\n--------------------------------------------------------------------------------\n\nThe Tailwind CSS feature can be enabled by executing the new command in the\nproject root directory.\n\npnpm run new\n\n? Action Enable features\n? Enable features Enable Tailwind CSS\n\n\n--------------------------------------------------------------------------------\n\nOnce successfully opened, you will see that a new dependency has been added to\npackage.json.\n\n{\n  "devDependencies": {\n    "@modern-js/plugin-tailwindcss": "x.y.z"\n  }\n}\n\n\n</CH.Spotlight>\n\nTailwind CSS offers two ways to use it.\n\nHTML CLASS\n\n<CH.Spotlight>\n\nimport \'tailwindcss/utilities.css\';\n\nexport default () => {\n  return <div className="bg-black text-white">hello world</div>;\n};\n\n\n--------------------------------------------------------------------------------\n\nTailwind CSS supports adding styles to HTML tags by using class names.\n\n\n\n--------------------------------------------------------------------------------\n\n**When using HTML class names, be sure to import the Tailwind CSS equivalent css\nfile. **\n\n\n\n--------------------------------------------------------------------------------\n\nStyle product.\n\n> This is a bundle build.\n\n/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */\n.table {\n  display: table;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes ping {\n  75%,\n  100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes bounce {\n  0%,\n  100% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n  50% {\n    transform: none;\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n*,\n::before,\n::after {\n  --tw-shadow: 0 0 #0000;\n}\n*,\n::before,\n::after {\n  --tw-ring-inset: var(--tw-empty);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n}\n@media (min-width: 640px) {\n}\n@media (min-width: 768px) {\n}\n@media (min-width: 1024px) {\n}\n@media (min-width: 1280px) {\n}\n@media (min-width: 1536px) {\n}\n\n\n</CH.Spotlight>\n\n@APPLY\n\nTailwind CSS provides the @apply directive, which allows us to inline the styles\nprovided by Tailwind CSS into the styles we write.\n\n@apply can be used in CSS, Less, and Sass.\n\n.btn {\n  @apply font-bold py-2 px-4 rounded;\n}\n\n\nHowever, there are some things to keep in mind when using Less and Sass.\n\nSASS\n\nWhen using Tailwind with Sass, the presence of !important after @apply requires\ninterpolation to get Sass to compile correctly.\n\n<CH.Spotlight>\n\n.alert {\n  @apply bg-red-500 !important;\n}\n\n\n--------------------------------------------------------------------------------\n\nIt does not work properly.\n\n\n\n--------------------------------------------------------------------------------\n\nCan work properly.\n\n.alert {\n  @apply bg-red-500 #{!important};\n}\n\n\n</CH.Spotlight>\n\nLESS\n\nWhen using Tailwind with Less, you cannot nest Tailwind\'s @screen directive.\n\n<CH.Spotlight>\n\n.card {\n  @apply rounded-none;\n\n  @screen sm {\n    @apply rounded-lg;\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\nIt does not work properly.\n\n\n\n--------------------------------------------------------------------------------\n\nInstead, use regular media queries and the theme() function to reference your\nscreen size, or simply don\'t nest your @screen directive.\n\n<CH.Code>\n\n// Use a regular media query and theme()\n.card {\n  @apply rounded-none;\n\n  @media (min-width: theme(\'screens.sm\')) {\n    @apply rounded-lg;\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\n// Use the @screen directive at the top-level\n.card {\n  @apply rounded-none;\n\n  @media (min-width: theme(\'screens.sm\')) {\n    @apply rounded-lg;\n  }\n}\n\n\n</CH.Code>\n\n</CH.Spotlight>\n\nRECOMMENDED METHOD\n\n**It is recommended to develop styles in the way specified by @apply, so that\nonly styles inlined by directives are included in the style product. **\n\nWhen adding styles using HTML class names, by default Tailwind will not only add\nthe styles corresponding to its own class name to the product, but will also\nhave additional style code that may not affect its own styles.\n\nTHE DIFFERENCE BETWEEN BUNDLE AND BUNDLELESS BUILD PRODUCTS\n\nFor the following code, there is a big difference between the bundle and\nbundleless modes of building products.\n\n> The so-called bundle and bundleless can be found in [[Bundle and\n> Bundleless]](/en/guide/advance/in-depth-about-build#bundle- and-bundleless)\n\nimport \'tailwindcss/utilities.css\';\n\nexport default () => {\n  return <div className="bg-black text-white">hello world11</div>;\n};\n\n\nIn Bundle mode, third-party dependencies are packaged in.\n\nFor styles, a separate product file is generated, and there is no code related\nto importing styles in the Js product file.\n\nIf you need to inject styles into Js products, you can enable the style.inject\nAPI.\n\n<CH.Code>\n\n/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */\n.table {\n  display: table;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: .5;\n  }\n}\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n  50% {\n    transform: none;\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n*,\n::before,\n::after {\n  --tw-shadow: 0 0 #0000 ;\n}\n*,\n::before,\n::after {\n  --tw-ring-inset: var(--tw-empty, );\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000 ;\n}\n@media (min-width: 640px) {\n}\n@media (min-width: 768px) {\n}\n@media (min-width: 1024px) {\n}\n@media (min-width: 1280px) {\n}\n@media (min-width: 1536px) {\n}\n\n\n--------------------------------------------------------------------------------\n\n// src/index.tsx\n\nvar src_default = () => {\n  return /* @__PURE__ */ jsx("div", {\n    className: "bg-black text-white",\n    children: "hello world11"\n  });\n};\nexport {\n  src_default as default\n};\n\n\n</CH.Code>\n\nIn Bundleless mode, no third-party dependencies are packaged in, and no style\nproducts are generated at this time.\n\n\nimport \'tailwindcss/utilities.css\';\nvar src_default = () => {\n  return /* @__PURE__ */ jsx(\'div\', {\n    className: \'bg-black text-white\',\n    children: \'hello world11\',\n  });\n};\nexport { src_default as default };\n\n\n\nCSS MODULES\n\nModule projects support the development of styles using CSS Modules. By default,\nthe following files are recognized as CSS Module files.\n\n * .module.css\n * .module.less\n * .module.scss\n * .module.sass\n\nIf you need to configure CSS Modules, you can check out the API at\n\n * autoModules\n * modules\n\nThe following is a code example.\n\n<CH.Code>\n\n\n\nexport default () => {\n  return <div className={style.btn}>hello world</div>;\n};\n\n\n.btn {\n  color: blue;\n}\n\n\n</CH.Code>\n\n\nCONFIGURING BUILD PRODUCTS\n\nBased on most scenarios of component project usage, it is recommended to use the\nnpm-component build preset. This preset yields a product directory structure of\n\n.\n\u251c\u2500\u2500 dist\n\u2502   \u251c\u2500\u2500 es\n\u2502   \u251c\u2500\u2500 lib\n\u2502   \u2514\u2500\u2500 types\n\n\n * . /dist/es: Contains bundleless products in ES modules format that support\n   the es6 syntax.\n * . /dist/lib: Contains bundleless products in CommonJS format with support for\n   es6 syntax.\n * . /dist/types: Contains the types file.\n\nThe buildPreset can be configured manually if there is a requirement to use\nsyntax support, and supports modifying the supported syntax by adding a suffix\nto npm-component.\n\nexport default defineConfig({\n  buildPreset: \'npm-component-es2019\',\n});\n\n\nIf you have special needs for the build product directory structure, you can use\nthe buildConfig API, which can be used by the following documentation.\n\n * modify-output-product\n * in-depth-about-build\n\n\nTESTING COMPONENTS\n\nFor more information on how to test components, please refer to [Test project].\n\n\nRELEASING COMPONENTS\n\nIt is recommended to use module project to provide version publishing function,\nyou can refer to [Versioning and publishing].',frontmatter:{}},{id:22,title:"Quick start",routePath:"/module-tools/en/guide/intro/getting-started",toc:[{id:"3-minute-demo-1",text:"3 minute demo",depth:2},{id:"lets-get-started-1",text:"Let's get started",depth:2}],content:'QUICK START\n\n\n3 MINUTE DEMO\n\nWant to experience Module Tools in action? The only prerequisite you need is\nNode.js LTS and make sure your Node version is >= 14.17.6.\n\nFrom your shell, install the following dependencies in your project.\n\n * @modern-js/module-tools\n * @modern-js/plugin-testing\n\n> If it\'s a TypeScript project, add the "typescript" dependency.\n\nnpm install -D @modern-js/module-tools @modern-js/plugin-testing\n\n\n> For projects that use pnpm or the Yarn package manager, just replace npm. pnpm\n> is recommended.\n\nThen add the command "build": "modern build" to your project\'s package.json\nfile.\n\n{\n  "scripts": {\n    "build": "modern build"\n  }\n}\n\n\nIf your project has a src/index.(js|jsx) file or both src/index.(ts|tsx) and\ntsconfig.json files, then congratulations you can run the npm run build command\ndirectly to build your project with Module Tools.\n\nIf you want to see real projects that use the module engineering solution, you\ncan execute the following command.\n\ngit clone https://github.com/modern-js-dev/module-tools-examples\ncd module-tools-example\n\n## Execute the build.\npnpm build\n\n## Execute the build in listening mode.\npnpm build --watch\n\n## Start Storybook\npnpm dev storybook\n\n## Test\npnpm test\npnpm test\n\n\nIf you want to create a complete module project, you can execute the following\ncommand:\n\nnpx @modern-js/create your-project-dir-name\n\n\nNext, in the issue interaction, follow the options below.\n\n? Please select the type of project you want to create Module\n? Please fill in the project name library\n? Please select the development language TS\n? Please select the package management tool pnpm\n\n\n> The project name is the value of the "name" field in package.json.\n\nThen the process of initializing the project will start. After the project\ndirectory and files are generated and the dependencies are installed, a complete\nmodule project is created.\n\nWe can start the project build directly with the pnpm build command, and start\nthe build in watching mode with the pnpm build --watch command.\n\n\nLET\'S GET STARTED\n\nChoose your tutorial scenario...\n\n * I\'m a beginner and need to learn basic usage of Module Tools.\n * I have learned the basic usage of Module Tools and can learn advanced usage\n   of Module Tools.\n * I am the maintainer of the project and need to learn how to develop plugins\n   for Module Tools and learn more about Module Tools Advanced.',frontmatter:{sidebar_position:3}},{id:23,title:"Welcome to Module Tools",routePath:"/module-tools/en/guide/intro/welcome",toc:[],content:"WELCOME TO MODULE TOOLS\n\nModule Tools is a modules engineering solution for Modern.js, as well as a core\ndependency. It allows developers to build, debug, and publish module type\nproject more easily. A module type project can mostly be thought of as an npm\npackage type project, which may be a component, component library or tool\nlibrary project.\n\nIf you are planning to develop a project of the npm package type, then you came\nto the right place! Modern.js provides a professional module engineering\nsolution. It gives you:\n\n * Simple project initialization: simply execute the npx @modern-js/create\n   project-dir command, followed by a few interactive questions, to create a\n   complete module type project. The created project also supports the choice of\n   two package managers, pnpm and Yarn.\n * Code formatting: In a module project, you can execute modern lint to format\n   the code. The initialized module project includes the ESLint ruleset for\n   Modern.js for most scenarios.\n * Comprehensive build capabilities and faster builds: Module Tools provides\n   high-performance build capabilities based on esbuild and SWC, and provides\n   rich configurations for different build scenarios.\n * Storybook debugging tools: Module Tools provides Storybook debugging tools\n   for debugging module projects. After installing the Storybook plugin for\n   Module Tools, you can start it with the modern dev storybook command. You can\n   use Storybook not only for debugging components, but also for other types of\n   modules.\n * Testing capabilities with Jest: When you need to test a module, you can use\n   the modern test command of Module Tools, which not only integrates with Jest,\n   but also provides an API for configuring Jest.\n * Versioning based on Changesets: When you need to record changes to a project,\n   you can use the modern change command to generate a Markdown file containing\n   the changes; when you need to upgrade a project, you can use the modern bump\n   command to analyze and upgrade the version through the Markdown file; when\n   you need to release a project, you can use the modern release command to\n   release the project; Module Tools implements these commands based on\n   Changesets.\n * Extensible plug-in mechanism: Want to integrate additional debugging tools\n   for your project? Or maybe you want to do some extra processing during the\n   build process, Module Tools provides a plugin mechanism and plugin hooks that\n   cover both the dev command and the build command process. You can use them to\n   extend the capabilities of your project.\n * Lots more! Module Tools will continue to optimize its build and debug\n   features in the future. If there are important issues to be solved in module\n   project building, or if a mainstream module project debugging tool or pattern\n   emerges, then they will probably be supported by Module Tools.",frontmatter:{sidebar_position:1}},{id:24,title:"Why module project solution",routePath:"/module-tools/en/guide/intro/why-module-engineering-solution",toc:[],content:"WHY MODULE PROJECT SOLUTION\n\nYou've probably all experienced it: when developing a component library or tool\nlibrary from scratch, we have to consider not only how to write the code logic\nof the project itself, but also how to build, debug, test, format the code, and\nother things that have nothing to do with the code logic.\n\nFor example, when we consider which builder is used to build the code for a\nmodule project, we might previously consider webpack or Rollup, but now we might\nalso consider esbuild or SWC.\n\nRegardless of which builder is chosen, this is going to be a costly learning\ncurve for developers who are not skilled in the use of these build tools. Even\nif you want to use them quickly, it will take a lot of time and effort.\n\nIn addition to the build, things like providing debugging tools for projects,\nsupporting testing capabilities, adding code format validation, etc. can take a\nlong time and effort for a novice to understand or master them and actually\nserve the current project.\n\nTo ensure the quality of the code and the integrity of the project, we often\nneed to do these things that are not related to the logical implementation of\nthe code. However, these things are likely to affect the overall project\ndevelopment progress, reduce the developer's development experience, and make\nthe developer feel that the development threshold of the module project is very\nhigh.\n\nIf you have to go through all this work every time you develop a module type\nproject, you will spend most of your development time in the beginning on these\nthings that are not related to code implementation. If we could provide a module\nengineering solution that would help developers to solve the project engineering\nissues and allow them to focus more on code implementation, it would greatly\nimprove the module type project development experience.\n\n\n\nModern.js, in order to make developing module type projects easier, provides a\nmodule engineering solution in order to solve the above mentioned problems and\nprovides the main features using Module Tools. Module-tools can be understood as\na tool dedicated to the development of module type projects.",frontmatter:{sidebar_position:2}},{id:25,title:"index",routePath:"/module-tools/en/",toc:[],content:"INDEX",frontmatter:{pageType:"home",hero:{name:"Module Tools",text:"Module engineering solutions",tagline:"simple, powerful, high-performance modern npm package development solution",actions:[{theme:"brand",text:"welcome",link:"/guide/intro/welcome"}]},features:[{title:"Esbuild: The High Performance JS Bundler",details:"Built on Esbuild, the build is extremely fast and gives you the ultimate development experience.",icon:"\ud83d\ude80"},{title:"Storybook: The community popular UI development tool",details:"Integrated with Storybook, you can use it to debug UI.",icon:"\ud83d\udce6"},{title:"transform + bundle",details:"Both bundle and bundleless build modes are supported.",icon:"\u2728"},{title:"zero configuration",details:"Develop your npm packages without any configuration, with built-in presets covering multiple scenarios.",icon:"\ud83d\udee0\ufe0f"},{title:"Extensible: Provides a powerful plugin mechanism",details:"With its plugin extension mechanism, you can easily extend the capabilities of Module Tools.",icon:"\ud83c\udfa8"}]}},{id:26,title:"Quick Start",routePath:"/module-tools/en/plugins/guide/getting-started",toc:[],content:"QUICK START\n\nModule engineering solution not only provides a rich set of features, but also\nsupports extending the capabilities of the current project by way of plugins.\n\nWe can quickly see how to write a module-tools plugin by using the following\nexample.\n\n<CH.Spotlight>\n\n. /project .\n\u251c\u2500\u2500 plugins\n\u2502 \u2514\u2500\u2500 example.ts\n\u251c\u2500\u2500 src/\n\u2514\u2500\u2500 modern.config.ts\n\n\n--------------------------------------------------------------------------------\n\nFirst we create . /plugins/example.ts file under the initialized project.\n\n\n\n--------------------------------------------------------------------------------\n\nNext add the code for the plugin to the example.ts file.\n\n\n\nexport const ExamplePlugin = (): CliPlugin<ModuleTools> => {\n  return {\n    name: 'example',\n    setup() {\n      console.info('this is example plugin');\n      return {\n        // use hooks\n        afterBuild() {\n          console.info('build over');\n        }\n      };\n    };\n  };\n};\n\n\n--------------------------------------------------------------------------------\n\nThen we register the plugin we just wrote via the plugins API.\n\n\nexport default defineConfig({\n  plugins: [examplePlugin()],\n});\n\n\n--------------------------------------------------------------------------------\n\nFinally, run modern build and you will see.\n\nThis is example plugin\nBuild succeed: 510.684ms\nbuild over\n\n\n</CH.Spotlight>\n\nWith the above example, we learned the following things.\n\n * The recommended plugin directory structure\n * The initialization code of the plugin\n * Plugin registration\n\nIn addition to the above, we also need to understand.\n\n * plugin objects, type definitions and recommended configuration items\n * setup functions, api object parameters, lifecycle hooks",frontmatter:{sidebar_position:1}},{id:27,title:"Plugin Object",routePath:"/module-tools/en/plugins/guide/plugin-object",toc:[{id:"plugin-type-definitions-1",text:"Plugin type definitions",depth:2},{id:"plugin-configuration-items-1",text:"Plugin configuration items",depth:2}],content:"PLUGIN OBJECT\n\nThe module-tools plugin is an object, and the object contains the following\nproperties.\n\n * name: The name of the plugin, a unique identifier.\n * setup: plugin initialization function, which will be executed only once.\n   setup function can return a Hooks object, and module-tools will execute the\n   function corresponding to the Hook defined on the Hooks object at a specific\n   time.\n\nFor example, in the following plugin code example, the beforeBuild function is\ntriggered before the project starts the build task and the build start log is\nprinted.\n\n<CH.Code>\n\n\n\nconst myPlugin: CliPlugin<ModuleTools> = {\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      // this is hook\n      beforeBuild: () => {\n        console.info('build start');\n      },\n    };\n  },\n};\n\n\n--------------------------------------------------------------------------------\n\n\nexport default {\n  plugins: [myPlugin()],\n};\n\n\n</CH.Code>\n\n\nPLUGIN TYPE DEFINITIONS\n\nWhen using TypeScript, you can introduce the built-in CliPlugin and ModuleTools\ntypes to provide the correct type derivation for plugins: ``\n\n\n\nconst myPlugin: CliPlugin<ModuleTools> = {\n  name: 'my-plugin',\n\n  setup() {\n    const foo = '1';\n\n    return {\n      // this is hook\n      afterBuild: () => {\n        //...\n      },\n    };\n  },\n};\n\n\n\nPLUGIN CONFIGURATION ITEMS\n\nIt is recommended to write the plugin as a function, so that the plugin can\nreceive configuration items via function entry.\n\n\n\ntype MyPluginOptions = {\n  foo: string;\n};\n\nconst myPlugin = (options: MyPluginOptions): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    console.log(options.foo);\n  },\n});\n",frontmatter:{sidebar_position:2}},{id:28,title:"Setup function",routePath:"/module-tools/en/plugins/guide/setup-function",toc:[{id:"plugin-api-objects-1",text:"Plugin API objects",depth:2},{id:"apiuseappcontext-3",text:"api.useAppContext",depth:3},{id:"apiuseresolvedconfigcontext-3",text:"api.useResolvedConfigContext",depth:3},{id:"apiusehookrunners-3",text:"api.useHookRunners",depth:3},{id:"asynchronous-setup-1",text:"Asynchronous setup",depth:2},{id:"life-cycle-hooks-1",text:"Life cycle hooks",depth:2}],content:"SETUP FUNCTION\n\nIn the [Plugin object] section we know that the plug-in object contains a setup\nfunction that not only contains an api object parameter, but also returns a\nHooks object.\n\n\nPLUGIN API OBJECTS\n\nThe setup function of the plugin will provide an api object parameter, and you\ncan call some of the methods provided on this object to get information about\nthe configuration, project context, etc.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup(api) {\n    // Get the original configuration of the application\n    const config = api.useConfigContext();\n    // Get the application runtime context\n    const appContext = api.useAppContext();\n    // Get the final configuration after resolving\n    const resolvedConfig = api.useResolvedConfigContext();\n  },\n});\n\n\n\nAPI.USEAPPCONTEXT\n\nUsed to get project context information.\n\nconst useAppContext: () => IAppContext;\n\ninterface IAppContext {\n  appDirectory: string;\n  configFile: string | false;\n  packageName: string;\n  nodeModulesDirectory: string;\n  internalDirectory: string;\n  plugins: {\n    cli?: any;\n    server?: any;\n  }[];\n}\n\n\nWe can see through the actual type file that there are other fields, but the\nonly ones that make sense for the module project at the moment are the above.\napi object other methods are the same.\n\n\nAPI.USERESOLVEDCONFIGCONTEXT\n\nUsed to get the final configuration after parsing.\n\nIf you need to get the build-related final configuration, you need to use the\nbeforeBuild Hook.\n\nconst useResolvedConfigContext: () => NormalizedConfig;\n\ninterface NormalizedConfig {\n  buildConfig: PartialBuildConfig;\n  buildPreset: BuildPreset;\n  designSystem?: Record<string, any>;\n  dev: Dev;\n  plugins: PluginConfig;\n  runtime: RuntimeConfig;\n  runtimeByEntries?: RuntimeByEntriesConfig;\n  _raw: UserConfig;\n}\n\n\n\nAPI.USEHOOKRUNNERS\n\nUsed to get the executors of Hooks and trigger the execution of a specific Hook.\n\n\n\nexport default (): CliPlugin => ({\n  name: 'my-plugin',\n\n  async setup(api) {\n    const hookRunners = api.useHookRunners();\n    // trigger the afterBuild Hook\n    await hookRunners.afterBuild();\n  },\n});\n\n\n\nASYNCHRONOUS SETUP\n\nThe setup of a CLI plugin can be an asynchronous function that performs\nasynchronous logic during the initialization process.\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  async setup(api) {\n    await doSomething();\n  },\n});\n\n\n\nLIFE CYCLE HOOKS\n\nWe know that the setup function returns a Hooks object, which can also be\nunderstood as an object with module-tools lifecycle hooks.\n\nCurrently there are two main types of hooks.\n\n * build hooks: triggered only when the build command is executed to build the\n   source code product.\n * buildPlatform hook: triggered only when the build --platform command is\n   executed to generate other build products.\n * debug hooks: hooks that are triggered when running the dev command.\n\nSee the API documentation for a full list of lifecycle hooks.",frontmatter:{sidebar_position:3}},{id:29,title:"Overview",routePath:"/module-tools/en/plugins/official-list/overview",toc:[{id:"official-plugin-1",text:"Official Plugin",depth:2}],content:"OVERVIEW\n\n\nOFFICIAL PLUGIN\n\n(Under Building)",frontmatter:{}},{id:30,title:"BuildConfig",routePath:"/module-tools/api/config/build-config",toc:[{id:"alias-3",text:"alias",depth:2},{id:"asset-3",text:"asset",depth:2},{id:"path-3",text:"path",depth:3},{id:"limit-3",text:"limit",depth:3},{id:"publicpath-3",text:"publicPath",depth:3},{id:"svgr-3",text:"svgr",depth:3},{id:"include-3",text:"include",depth:4},{id:"exclude-3",text:"exclude",depth:4},{id:"autoexternal-3",text:"autoExternal",depth:2},{id:"dependencies-3",text:"dependencies",depth:3},{id:"peerdependencies-7",text:"peerDependencies",depth:3},{id:"buildtype-3",text:"buildType",depth:2},{id:"copy-3",text:"copy",depth:2},{id:"copypatterns-1",text:"copy.patterns",depth:3},{id:"copyoptions-1",text:"copy.options",depth:3},{id:"define-3",text:"define",depth:2},{id:"dts-3",text:"dts",depth:2},{id:"tsconfigpath-3",text:"tsconfigPath",depth:3},{id:"distpath-3",text:"distPath",depth:3},{id:"only-3",text:"only",depth:3},{id:"externals-3",text:"externals",depth:2},{id:"format-3",text:"format",depth:2},{id:"input-3",text:"input",depth:2},{id:"jsx-3",text:"jsx",depth:2},{id:"metafile-3",text:"metafile",depth:2},{id:"minify-3",text:"minify",depth:2},{id:"outdir-3",text:"outDir",depth:2},{id:"platform-3",text:"platform",depth:2},{id:"sourcedir-7",text:"sourceDir",depth:2},{id:"sourcemap-3",text:"sourceMap",depth:2},{id:"splitting-3",text:"splitting",depth:2},{id:"style-3",text:"style",depth:2},{id:"less-7",text:"less",depth:3},{id:"lessoptions-3",text:"lessOptions",depth:4},{id:"additionaldata-6",text:"additionalData",depth:4},{id:"implementation-6",text:"implementation",depth:4},{id:"sass-3",text:"sass",depth:3},{id:"sassoptions-3",text:"sassOptions",depth:4},{id:"additionaldata-7",text:"additionalData",depth:4},{id:"implementation-7",text:"implementation",depth:4},{id:"postcss-3",text:"postcss",depth:3},{id:"inject-3",text:"inject",depth:3},{id:"automodules-3",text:"autoModules",depth:3},{id:"modules-3",text:"modules",depth:3},{id:"tailwindcss-7",text:"tailwindcss",depth:3},{id:"target-3",text:"target",depth:2},{id:"umdglobals-3",text:"umdGlobals",depth:2},{id:"umdmodulename-3",text:"umdModuleName",depth:2}],content:"BUILDCONFIG\n\n\u672c\u7ae0\u8282\u63cf\u8ff0\u4e86 Module Tools \u5173\u4e8e\u6784\u5efa\u7684\u6240\u6709\u914d\u7f6e\n\n\nALIAS\n\n * \u7c7b\u578b\uff1aRecord<string, string> | Function\n * \u9ed8\u8ba4\u503c\uff1a{'@': 'src',}\n\n\u5bf9\u4e8e TypeScript \u9879\u76ee\uff0c\u53ea\u9700\u8981\u5728 tsconfig.json \u4e2d\u914d\u7f6e compilerOptions.paths, Module Tools\n\u4f1a\u81ea\u52a8\u8bc6\u522b tsconfig.json \u91cc\u7684\u522b\u540d\uff0c\u56e0\u6b64\u4e0d\u9700\u8981\u989d\u5916\u914d\u7f6e alias \u5b57\u6bb5\u3002\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    alias: {\n      '@common': './src/common',\n    },\n  },\n});\n\n\n\u4ee5\u4e0a\u914d\u7f6e\u5b8c\u6210\u540e\uff0c\u5982\u679c\u5728\u4ee3\u7801\u4e2d\u5f15\u7528 @common/Foo.tsx, \u5219\u4f1a\u6620\u5c04\u5230 <root>/src/common/Foo.tsx \u8def\u5f84\u4e0a\u3002\n\nalias \u7684\u503c\u5b9a\u4e49\u4e3a\u51fd\u6570\u65f6\uff0c\u53ef\u4ee5\u63a5\u53d7\u9884\u8bbe\u7684 alias \u5bf9\u8c61\uff0c\u5e76\u5bf9\u5176\u8fdb\u884c\u4fee\u6539\u3002\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    alias: alias => {\n      alias['@common'] = './src/common';\n    },\n  },\n});\n\n\n\u4e5f\u53ef\u4ee5\u5728\u51fd\u6570\u4e2d\u8fd4\u56de\u4e00\u4e2a\u65b0\u5bf9\u8c61\u4f5c\u4e3a\u6700\u7ec8\u7ed3\u679c\uff0c\u65b0\u5bf9\u8c61\u4f1a\u8986\u76d6\u9884\u8bbe\u7684 alias \u5bf9\u8c61\u3002\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    alias: alias => {\n      return {\n        '@common': './src/common',\n      };\n    },\n  },\n});\n\n\n\nASSET\n\n\nPATH\n\n\u9759\u6001\u8d44\u6e90\u8f93\u51fa\u8def\u5f84\uff0c\u4f1a\u57fa\u4e8e outDir \u8fdb\u884c\u8f93\u51fa\u3002\n\n * \u7c7b\u578b\uff1a string\n * \u9ed8\u8ba4\u503c\uff1a assets\n\n\nLIMIT\n\n\u6253\u5305\u65f6\u81ea\u52a8\u5185\u8054\u9759\u6001\u8d44\u6e90\u7684\u9608\u503c\uff0c\u5c0f\u4e8e 10KB \u7684\u8d44\u6e90\u4f1a\u88ab\u81ea\u52a8\u5185\u8054\u8fdb bundle \u4ea7\u7269\u4e2d\u3002\n\n * \u7c7b\u578b\uff1a number\n * \u9ed8\u8ba4\u503c\uff1a 10 * 1024\n\n\nPUBLICPATH\n\n\u6253\u5305\u65f6\u7ed9\u672a\u5185\u8054\u8d44\u6e90\u7684 CDN \u524d\u7f00\u3002\n\n * \u7c7b\u578b\uff1a string\n * \u9ed8\u8ba4\u503c\uff1a undefined\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    asset: {\n      publicPath: 'https://xxx/',\n    },\n  },\n});\n\n\n\u6b64\u65f6\uff0c\u6240\u6709\u9759\u6001\u8d44\u6e90\u90fd\u4f1a\u6dfb\u52a0 https://xxx/ \u524d\u7f00\u3002\n\n\nSVGR\n\n\u6253\u5305\u65f6\u5c06 svg \u4f5c\u4e3a\u4e00\u4e2a React \u7ec4\u4ef6\u5904\u7406\uff0coptions \u53c2\u8003 svgr\uff0c\u53e6\u5916\u8fd8\u652f\u6301\u4e86 include \u548c exclude\n\u4e24\u4e2a\u914d\u7f6e\u9879\uff0c\u7528\u4e8e\u5339\u914d\u9700\u8981\u5904\u7406\u7684 svg \u6587\u4ef6\u3002\n\n * \u7c7b\u578b\uff1a boolean | Object\n * \u9ed8\u8ba4\u503c\uff1a false\n\n\u5f00\u542f svgr \u540e\uff0c\u4ecd\u7136\u4f7f\u7528 default export \u5bfc\u51fa svg\uff0c\u6240\u4ee5\u4f60\u53ea\u80fd\u5bfc\u5165\u9ed8\u8ba4\u503c\u3002\n\n// true\n\n\n// false\n\n\n\nINCLUDE\n\n\u8bbe\u5b9a\u5339\u914d\u7684 svg \u6587\u4ef6\n\n * \u7c7b\u578b\uff1a string | RegExp | (string | RegExp)[]\n * \u9ed8\u8ba4\u503c\uff1a /\\.svg$/\n\nEXCLUDE\n\n\u8bbe\u5b9a\u4e0d\u5339\u914d\u7684 svg \u6587\u4ef6\n\n * \u7c7b\u578b\uff1a string | RegExp | (string | RegExp)[]\n * \u9ed8\u8ba4\u503c\uff1a undefined\n\n\nAUTOEXTERNAL\n\n\u81ea\u52a8\u5916\u7f6e\u9879\u76ee\u7684 \"dependencies\" \u548c \"peerDependencies\"\uff0c\u4e0d\u4f1a\u5c06\u5176\u6253\u5305\u5230\u6700\u7ec8\u7684 bundle \u4ea7\u7269\u4e2d\u3002\n\n * \u7c7b\u578b\uff1a boolean | Object\n * \u9ed8\u8ba4\u503c\uff1a true\n\n\nDEPENDENCIES\n\n\u662f\u5426\u9700\u8981\u5916\u7f6e\u9879\u76ee\u7684 \"dependencies\" \u4f9d\u8d56\u3002\n\n * \u7c7b\u578b\uff1a boolean\n * \u9ed8\u8ba4\u503c\uff1a true\n\n\nPEERDEPENDENCIES\n\n\u662f\u5426\u9700\u8981\u5916\u7f6e\u9879\u76ee\u7684 \"peerDependencies\" \u4f9d\u8d56\u3002\n\n * \u7c7b\u578b\uff1a boolean\n * \u9ed8\u8ba4\u503c\uff1a true\n\n\nBUILDTYPE\n\n\u6784\u5efa\u7c7b\u578b\uff0cbundle \u4f1a\u6253\u5305\u4f60\u7684\u4ee3\u7801\uff0cbundleless \u53ea\u505a\u4ee3\u7801\u7684\u8f6c\u6362\u3002\n\n * \u7c7b\u578b\uff1a 'bundle' | 'bundleless'\n * \u9ed8\u8ba4\u503c\uff1a bundle\n\n\nCOPY\n\n\u5c06\u6587\u4ef6\u6216\u76ee\u5f55\u62f7\u8d1d\u5230\u6307\u5b9a\u4f4d\u7f6e\u3002\n\n * \u7c7b\u578b\uff1a Object\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [{ from: './src/assets', to: '' }],\n    },\n  },\n});\n\n\n\nCOPY.PATTERNS\n\n * \u7c7b\u578b\uff1a CopyPattern[]\n * \u9ed8\u8ba4\u503c\uff1a []\n\nexport interface CopyPattern {\n  from: string;\n  to?: string;\n  context?: string;\n  globOptions?: globby.GlobbyOptions;\n}\n\n\n\nCOPY.OPTIONS\n\n * \u7c7b\u578b\uff1a Object\n * \u9ed8\u8ba4\u503c\uff1a { concurrency: 100, enableCopySync: false }\n\ntype Options = {\n  concurrency?: number;\n  enableCopySync?: boolean;\n};\n\n\n * concurrency: \u6307\u5b9a\u5e76\u884c\u6267\u884c\u591a\u5c11\u4e2a\u590d\u5236\u4efb\u52a1\u3002\n * enableCopySync: \u4f7f\u7528 fs.copySync\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b fs.copy\u3002\n\n\nDEFINE\n\n\u5b9a\u4e49\u5168\u5c40\u53d8\u91cf\uff0c\u4f1a\u88ab\u6ce8\u5165\u5230\u4ee3\u7801\u4e2d\n\n * \u7c7b\u578b\uff1a Record<string, string>\n * \u9ed8\u8ba4\u503c\uff1a {}\n\n\u7531\u4e8e define \u529f\u80fd\u662f\u7531\u5168\u5c40\u6587\u672c\u66ff\u6362\u5b9e\u73b0\u7684\uff0c\u6240\u4ee5\u9700\u8981\u4fdd\u8bc1\u5168\u5c40\u53d8\u91cf\u503c\u4e3a\u5b57\u7b26\u4e32\uff0c\u66f4\u4e3a\u5b89\u5168\u7684\u505a\u6cd5\u662f\u5c06\u6bcf\u4e2a\u5168\u5c40\u53d8\u91cf\u7684\u503c\u8f6c\u5316\u4e3a\u5b57\u7b26\u4e32\uff0c\u4f7f\u7528\nJSON.stringify \u8fdb\u884c\u8f6c\u6362\uff0c\u5982\u4e0b\u6240\u793a\uff1a\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    define: {\n      VERSION: JSON.stringify('1.0'),\n    },\n  },\n});\n\n\n\u4e3a\u4e86\u9632\u6b62\u5168\u5c40\u66ff\u6362\u66ff\u6362\u8fc7\u5ea6\uff0c\u5efa\u8bae\u4f7f\u7528\u65f6\u9075\u5faa\u4ee5\u4e0b\u4e24\u4e2a\u539f\u5219\uff1a\n\n * \u5168\u5c40\u5e38\u91cf\u4f7f\u7528\u5927\u5199\n * \u81ea\u5b9a\u4e49\u5168\u5c40\u5e38\u91cf\u524d\u7f00\u540e\u7f00\uff0c\u786e\u4fdd\u72ec\u4e00\u65e0\u4e8c\n\n\nDTS\n\n\u7c7b\u578b\u6587\u4ef6\u751f\u6210\u7684\u76f8\u5173\u914d\u7f6e\uff0c\u9ed8\u8ba4\u4f1a\u751f\u6210\u3002\n\n * \u7c7b\u578b\uff1a false | Object\n * \u9ed8\u8ba4\u503c\uff1a {}\n\n\nTSCONFIGPATH\n\nTypeScript \u914d\u7f6e\u6587\u4ef6\u7684\u8def\u5f84\u3002\n\n * \u7c7b\u578b\uff1a string\n * \u9ed8\u8ba4\u503c\uff1a ./tsconfig.json\n\n\nDISTPATH\n\n\u7c7b\u578b\u6587\u4ef6\u7684\u8f93\u51fa\u8def\u5f84\uff0c\u57fa\u4e8e outDir \u8fdb\u884c\u8f93\u51fa\u3002\n\n * \u7c7b\u578b: string\n * \u9ed8\u8ba4\u503c: ./types\n\n\nONLY\n\n\u53ea\u751f\u6210\u7c7b\u578b\u6587\u4ef6\uff0c\u4e0d\u751f\u6210 js \u6587\u4ef6\u3002\n\n * \u7c7b\u578b\uff1a boolean\n * \u9ed8\u8ba4\u503c\uff1a false\n\n\nEXTERNALS\n\n\u914d\u7f6e\u5916\u90e8\u4f9d\u8d56\uff0c\u4e0d\u4f1a\u88ab\u6253\u5305\u5230\u6700\u7ec8\u7684 bundle \u4e2d\u3002\n\n * \u7c7b\u578b\uff1a (string | RegExp)[]\n * \u9ed8\u8ba4\u503c\uff1a []\n\n\nFORMAT\n\njs \u4ea7\u7269\u8f93\u51fa\u7684\u683c\u5f0f,\u5176\u4e2d iife \u548c umd \u53ea\u80fd\u5728 buildType \u4e3a bundle \u65f6\u751f\u6548\u3002\n\n * \u7c7b\u578b\uff1a 'esm' | 'cjs' | 'iife' | 'umd'\n * \u9ed8\u8ba4\u503c\uff1a cjs\n\n\nINPUT\n\n\u6307\u5b9a\u6784\u5efa\u7684\u5165\u53e3\u6587\u4ef6\uff0c\u6570\u7ec4\u5f62\u5f0f\u53ef\u4ee5\u6307\u5b9a\u76ee\u5f55\u3002\n\n * \u7c7b\u578b\uff1a string[] | Record<string, string>\n * \u9ed8\u8ba4\u503c\uff1a bundle \u6a21\u5f0f\u4e0b\u9ed8\u8ba4\u4e3a ['src/index.ts']\uff0cbundleless \u6a21\u5f0f\u4e0b\u9ed8\u8ba4\u4e3a ['src']\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    input: ['src/index.ts', 'src/index2.ts'],\n  },\n});\n\n\n\nJSX\n\n\u6307\u5b9a jsx \u7684\u7f16\u8bd1\u65b9\u5f0f, \u9ed8\u8ba4\u652f\u6301 React17 \u4ee5\u4e0a,\u81ea\u52a8\u6ce8\u5165 jsx \u8fd0\u884c\u65f6\u4ee3\u7801\u3002\n\n * \u7c7b\u578b\uff1a automatic | classic\n * \u9ed8\u8ba4\u503c\uff1a automatic\n\n\nMETAFILE\n\nesbuild \u4ee5 JSON \u683c\u5f0f\u751f\u6210\u6709\u5173\u6784\u5efa\u7684\u4e00\u4e9b\u5143\u6570\u636e\uff0c\u53ef\u4ee5\u901a\u8fc7\u4f8b\u5982 bundle-buddy \u7684\u5de5\u5177\u53ef\u89c6\u5316\n\n * type: boolean\n * default: false\n\n\nMINIFY\n\n\u4f7f\u7528 esbuild \u6216\u8005 terser \u538b\u7f29\u4ee3\u7801\uff0c\u4e5f\u53ef\u4ee5\u4f20\u5165 terserOptions\u3002\n\n * \u7c7b\u578b\uff1a 'terser' | 'esbuild' | false | Object\n * \u9ed8\u8ba4\u503c\uff1a false\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    minify: {\n      compress: {\n        drop_console: true,\n      },\n    },\n  },\n});\n\n\n\nOUTDIR\n\n\u6307\u5b9a\u6784\u5efa\u7684\u8f93\u51fa\u76ee\u5f55\n\n * \u7c7b\u578b: string\n * \u9ed8\u8ba4\u503c: dist\n\n\nPLATFORM\n\n\u9ed8\u8ba4\u751f\u6210\u7528\u4e8e Node.js \u73af\u5883\u4e0b\u7684\u4ee3\u7801\uff0c\u4f60\u4e5f\u53ef\u4ee5\u6307\u5b9a\u4e3a browser\uff0c\u4f1a\u751f\u6210\u7528\u4e8e\u6d4f\u89c8\u5668\u73af\u5883\u7684\u4ee3\u7801\u3002\n\n * \u7c7b\u578b\uff1a 'browser' | 'node'\n * \u9ed8\u8ba4\u503c\uff1a node\n\n\nSOURCEDIR\n\n\u6307\u5b9a\u6784\u5efa\u7684\u6e90\u7801\u76ee\u5f55,\u9ed8\u8ba4\u4e3a src\uff0c\u7528\u4e8e\u5728 bundleless \u6784\u5efa\u65f6\u57fa\u4e8e\u6e90\u7801\u76ee\u5f55\u7ed3\u6784\u751f\u6210\u5bf9\u5e94\u7684\u4ea7\u7269\u76ee\u5f55\u3002\n\n * \u7c7b\u578b\uff1a string\n * \u9ed8\u8ba4\u503c\uff1a src\n\n\nSOURCEMAP\n\n\u63a7\u5236 sourceMap \u5982\u4f55\u751f\u6210\u3002\n\n * \u7c7b\u578b\uff1a boolean | 'inline' | 'external'\n * \u9ed8\u8ba4\u503c\uff1a false\n\n\nSPLITTING\n\n\u662f\u5426\u5f00\u542f\u4ee3\u7801\u5206\u5272\u3002\n\n * \u7c7b\u578b\uff1a boolean\n * \u9ed8\u8ba4\u503c\uff1a false\n\n\nSTYLE\n\n\u914d\u7f6e\u6837\u5f0f\u76f8\u5173\u7684\u914d\u7f6e\u3002\n\n\nLESS\n\nless \u76f8\u5173\u914d\u7f6e\u3002\n\nLESSOPTIONS\n\n\u8be6\u7ec6\u914d\u7f6e\u53c2\u8003 less\u3002\n\n * \u7c7b\u578b\uff1a Object\n * \u9ed8\u8ba4\u503c\uff1a { javascriptEnabled: true }\n\nADDITIONALDATA\n\n\u5728\u5165\u53e3\u6587\u4ef6\u8d77\u59cb\u6dfb\u52a0 Less \u4ee3\u7801\u3002\n\n * \u7c7b\u578b\uff1a string\n * \u9ed8\u8ba4\u503c\uff1a undefined\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    style: {\n      less: {\n        additionalData: `@base-color: #c6538c;`,\n      },\n    },\n  },\n});\n\n\nIMPLEMENTATION\n\n\u914d\u7f6e Less \u4f7f\u7528\u7684\u5b9e\u73b0\u5e93\uff0c\u5728\u4e0d\u6307\u5b9a\u7684\u60c5\u51b5\u4e0b\uff0c\u4f7f\u7528\u7684\u5185\u7f6e\u7248\u672c\u662f 4.1.3\u3002\n\n * \u7c7b\u578b\uff1a string | Object\n * \u9ed8\u8ba4\u503c\uff1a undefined\n\nObject \u7c7b\u578b\u65f6\uff0c\u6307\u5b9a Less \u7684\u5b9e\u73b0\u5e93\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    style: {\n      less: {\n        implementation: require('less'),\n      },\n    },\n  },\n});\n\n\nstring \u7c7b\u578b\u65f6\uff0c\u6307\u5b9a Less \u7684\u5b9e\u73b0\u5e93\u7684\u8def\u5f84\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    style: {\n      less: {\n        implementation: require.resolve('less'),\n      },\n    },\n  },\n});\n\n\n\nSASS\n\nSass \u76f8\u5173\u914d\u7f6e\u3002\n\nSASSOPTIONS\n\n\u8be6\u7ec6\u914d\u7f6e\u53c2\u8003 node-sass\n\n * \u7c7b\u578b\uff1a Object\n * \u9ed8\u8ba4\u503c\uff1a {}\n\nADDITIONALDATA\n\n\u5728\u5165\u53e3\u6587\u4ef6\u8d77\u59cb\u6dfb\u52a0 Sass \u4ee3\u7801\u3002\n\n * \u7c7b\u578b\uff1a string | Function\n * \u9ed8\u8ba4\u503c\uff1a undefined\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    style: {\n      sass: {\n        additionalData: `$base-color: #c6538c;\n          $border-dark: rgba($base-color, 0.88);`,\n      },\n    },\n  },\n});\n\n\nIMPLEMENTATION\n\n\u914d\u7f6e Sass \u4f7f\u7528\u7684\u5b9e\u73b0\u5e93\uff0c\u5728\u4e0d\u6307\u5b9a\u7684\u60c5\u51b5\u4e0b\uff0c\u4f7f\u7528\u7684\u5185\u7f6e\u7248\u672c\u662f 1.5.4\u3002\n\n * \u7c7b\u578b\uff1a string | Object\n * \u9ed8\u8ba4\u503c\uff1a undefined\n\nObject \u7c7b\u578b\u65f6\uff0c\u6307\u5b9a Sass \u7684\u5b9e\u73b0\u5e93\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    style: {\n      sass: {\n        implementation: require('sass'),\n      },\n    },\n  },\n});\n\n\nstring \u7c7b\u578b\u65f6\uff0c\u6307\u5b9a Sass \u7684\u5b9e\u73b0\u5e93\u7684\u8def\u5f84\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    style: {\n      sass: {\n        implementation: require.resolve('sass'),\n      },\n    },\n  },\n});\n\n\n\nPOSTCSS\n\n * plugins\n * processOptions\n\n\u8be6\u7ec6\u914d\u7f6e\u67e5\u770b postcss\u3002\n\n\nINJECT\n\n\u914d\u7f6e\u6253\u5305\u6a21\u5f0f\u4e0b\u662f\u5426\u5c06 style \u63d2\u5165\u5230 js \u4e2d\n\n * \u7c7b\u578b\uff1a boolean\n * \u9ed8\u8ba4\u503c\uff1a false\n\n\nAUTOMODULES\n\n\u6839\u636e\u6587\u4ef6\u540d\u81ea\u52a8\u542f\u7528 CSS Modules\u3002\n\n * \u7c7b\u578b\uff1a boolean | RegExp\n * \u9ed8\u8ba4\u503c\uff1a true\n\ntrue : \u4e3a\u4ee5 .module.css .module.less .module.scss .module.sass \u6587\u4ef6\u540d\u7ed3\u5c3e\u7684\u6837\u5f0f\u6587\u4ef6\u542f\u7528 CSS\nModules\u3002\n\nfalse : \u7981\u7528 CSS Modules.\n\nRegExp : \u4e3a\u5339\u914d\u6b63\u5219\u6761\u4ef6\u7684\u6240\u6709\u6587\u4ef6\u542f\u7528 CSS Modules.\n\n\nMODULES\n\nCSS Modules \u914d\u7f6e\n\n * \u7c7b\u578b\uff1a Object\n * \u9ed8\u8ba4\u503c\uff1a {}\n\n\u4e00\u4e2a\u5e38\u7528\u7684\u914d\u7f6e\u662f localsConvention\uff0c\u5b83\u53ef\u4ee5\u6539\u53d8 CSS Modules \u7684\u7c7b\u540d\u751f\u6210\u89c4\u5219\u3002\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    style: {\n      modules: {\n        localsConvention: 'camelCaseOnly',\n      },\n    },\n  },\n});\n\n\n\u5bf9\u4e8e\u4ee5\u4e0b\u6837\u5f0f\uff1a\n\n.box-title {\n  color: red;\n}\n\n\n\u4f60\u53ef\u4ee5\u4f7f\u7528 styles.boxTitle \u6765\u8bbf\u95ee\n\n\u8be6\u7ec6\u914d\u7f6e\u67e5\u770b postcss-modules\n\n\nTAILWINDCSS\n\nTailwind CSS \u76f8\u5173\u914d\u7f6e\u3002\n\n * \u7c7b\u578b\uff1a Object | Function\n * \u9ed8\u8ba4\u503c\uff1a \u89c1\u4e0b\u65b9\u914d\u7f6e\u8be6\u60c5\n\nconst tailwind = {\n  content: [\n    './config/html/**/*.html',\n    './config/html/**/*.ejs',\n    './config/html/**/*.hbs',\n    './src/**/*.js',\n    './src/**/*.jsx',\n    './src/**/*.ts',\n    './src/**/*.tsx',\n    './storybook/**/*',\n  ],\n};\n\n\n\u503c\u4e3a Object \u7c7b\u578b\u65f6\uff0c\u4e0e\u9ed8\u8ba4\u914d\u7f6e\u901a\u8fc7 Object.assign \u5408\u5e76\u3002\n\n\u503c\u4e3a Function \u7c7b\u578b\u65f6\uff0c\u51fd\u6570\u8fd4\u56de\u7684\u5bf9\u8c61\u4e0e\u9ed8\u8ba4\u914d\u7f6e\u901a\u8fc7 Object.assign \u5408\u5e76\u3002\n\n\u4e0d\u5141\u8bb8\u51fa\u73b0 theme \u5c5e\u6027\uff0c\u5426\u5219\u4f1a\u6784\u5efa\u5931\u8d25, \u4f7f\u7528 designSystem \u4f5c\u4e3a Tailwind CSS Theme \u914d\u7f6e\u3002\n\n\u5176\u4ed6\u7684\u4f7f\u7528\u65b9\u5f0f\u548c Tailwind CSS \u4e00\u81f4: \u5feb\u901f\u4f20\u9001\u95e8\u3002\n\n\nTARGET\n\n\u6307\u5b9a\u6784\u5efa\u7684\u76ee\u6807\u73af\u5883\n\n * \u7c7b\u578b\uff1a 'es5' | 'es6' | 'es2015' | 'es2016' | 'es2017' | 'es2018' | 'es2019' |\n   'es2020' | 'es2021' | 'es2022' | 'esnext'\n * \u9ed8\u8ba4\u503c\uff1a 'es6'\n\n\nUMDGLOBALS\n\n\u6307\u5b9a UMD \u4ea7\u7269\u5916\u90e8\u5bfc\u5165\u7684\u5168\u5c40\u53d8\u91cf\u3002\n\n * \u7c7b\u578b\uff1a Record<string, string>\n * \u9ed8\u8ba4\u503c\uff1a {}\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    umdGlobals: {\n      react: 'React',\n      'react-dom': 'ReactDOM',\n    },\n  },\n});\n\n\n\u6b64\u65f6\uff0creact \u548c react-dom \u4f1a\u88ab\u770b\u505a\u662f\u5916\u90e8\u5bfc\u5165\u7684\u5168\u5c40\u53d8\u91cf\uff0c\u4e0d\u4f1a\u88ab\u6253\u5305\u8fdb UMD \u4ea7\u7269\u4e2d\uff0c\u800c\u662f\u901a\u8fc7 global.React \u548c\nglobal.ReactDOM \u7684\u65b9\u5f0f\u8fdb\u884c\u8bbf\u95ee\u3002\n\n\nUMDMODULENAME\n\n\u6307\u5b9a UMD \u4ea7\u7269\u7684\u6a21\u5757\u540d\u3002\n\n * \u7c7b\u578b\uff1a string | Function\n * \u9ed8\u8ba4\u503c\uff1a name => name\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    umdModuleName: 'myLib',\n  },\n});\n\n\n\u6b64\u65f6 UMD \u4ea7\u7269\u4f1a\u53bb\u6302\u8f7d\u5230 global.myLib \u4e0a\u3002\n\n * \u9700\u8981\u9075\u5b88 UMD \u89c4\u8303\uff0cUMD \u4ea7\u7269\u7684\u6a21\u5757\u540d\u4e0d\u80fd\u548c\u5168\u5c40\u53d8\u91cf\u540d\u51b2\u7a81\n * \u6a21\u5757\u540d\u4e0d\u80fd\u542b\u6709 -\uff0c@\uff0c/ \u7b49\u7279\u6b8a\u5b57\u7b26\n\n\u540c\u65f6\u51fd\u6570\u5f62\u5f0f\u53ef\u4ee5\u63a5\u6536\u4e00\u4e2a\u53c2\u6570\uff0c\u4e3a\u5f53\u524d\u6253\u5305\u6587\u4ef6\u7684\u8f93\u51fa\u8def\u5f84\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    umdModuleName: path => {\n      if (path.includes('index')) {\n        return 'myLib';\n      } else {\n        return 'myLib2';\n      }\n    },\n  },\n});\n",frontmatter:{sidebar_position:1}},{id:31,title:"BuildPreset",routePath:"/module-tools/api/config/build-preset",toc:[{id:"string-3",text:"string",depth:2},{id:"npm-library-3",text:"'npm-library'",depth:3},{id:"npm-library-with-umd-3",text:"'npm-library-with-umd'",depth:3},{id:"npm-component-3",text:"'npm-component'",depth:3},{id:"npm-component-with-umd-3",text:"'npm-component-with-umd'",depth:3},{id:"\u5173\u4e8e\u9884\u8bbe\u503c\u652f\u6301\u7684-ecmascript-\u7248\u672c\u4ee5\u53ca-es5esnext-1",text:"\u5173\u4e8e\u9884\u8bbe\u503c\u652f\u6301\u7684 ECMAScript \u7248\u672c\u4ee5\u53ca {es5...esnext}",depth:3},{id:"function-3",text:"Function",depth:2}],content:"BUILDPRESET\n\n\u6784\u5efa\u7684\u9884\u8bbe\u5b57\u7b26\u4e32\u6216\u8005\u9884\u8bbe\u51fd\u6570\u3002\u63d0\u4f9b\u5f00\u7bb1\u5373\u7528\u7684\u6784\u5efa\u914d\u7f6e\u3002\n\n * type: string | Function\n * default: undefined\n\n\nSTRING\n\n\u5b57\u7b26\u4e32\u7684\u5f62\u5f0f\u53ef\u4ee5\u8ba9\u4f60\u76f4\u63a5\u4f7f\u7528\u5185\u7f6e\u7684\u9884\u8bbe\u3002\n\n\n\nexport default defineConfig({\n  buildPreset: 'npm-library',\n});\n\n\n\n'NPM-LIBRARY'\n\n\u5728\u7c7b NPM \u5305\u7ba1\u7406\u5668\u4e0b\u4f7f\u7528\u7684 Library \u901a\u7528\u6a21\u5f0f\uff0c\u5305\u542b esm \u548c cjs \u4e24\u79cd Bundle \u4ea7\u7269\uff0c\u5e76\u4e14\u5305\u542b\u4e00\u4efd\u7c7b\u578b\u6587\u4ef6\u3002\n\n\u5173\u4e8e\u7c7b NPM \u5305\u7ba1\u7406\u5668\n\n * npm\n * yarn\n * pnpm\n\n{\n  \"main\": \"./dist/lib/index.js\",\n  \"module\": \"./dist/es/index.js\",\n  \"types\": \"./dist/types/index.d.ts\"\n}\n\n\n\u9884\u8bbe\u5b57\u7b26\u4e32\u5bf9\u5e94\u7684\u6784\u5efa\u914d\u7f6e\uff1a\n\nexport const buildConfig = [\n  {\n    format: 'cjs',\n    target: 'es6',\n    buildType: 'bundle',\n    outDir: './lib',\n  },\n  {\n    format: 'esm',\n    target: 'es6',\n    buildType: 'bundle',\n    outDir: './es',\n  },\n  {\n    buildType: 'bundle',\n    outDir: './types',\n    dts: {\n      only: true,\n    },\n  },\n];\n\n\n\n'NPM-LIBRARY-WITH-UMD'\n\n\u5728\u7c7b NPM \u5305\u7ba1\u7406\u5668\u4e0b\u4f7f\u7528\uff0c\u5e76\u4e14 Library \u652f\u6301\u7c7b\u4f3c unpkg \u7684\u6a21\u5f0f\u3002\u5728\u9884\u8bbe 'npm-library' \u7684\u57fa\u7840\u4e0a\uff0c\u989d\u5916\u63d0\u4f9b umd \u4ea7\u7269\u3002\n\n{\n    \"main\": \"./dist/lib/index.js\",\n    \"module\": \"./dist/es/index.js\",\n    \"types\": \"./dist/types/index.d.ts\",\n    \"unpkg\": \"./dist/umd/index.js\",\n};\n\n\n\u9884\u8bbe\u5b57\u7b26\u4e32\u5bf9\u5e94\u7684\u6784\u5efa\u914d\u7f6e\uff1a\n\nexport const buildConfig = [\n  {\n    format: 'cjs',\n    target: 'es6',\n    buildType: 'bundle',\n    outDir: './lib',\n  },\n  {\n    format: 'esm',\n    target: 'es6',\n    buildType: 'bundle',\n    outDir: './es',\n  },\n  {\n    format: 'umd',\n    target: 'es6',\n    buildType: 'bundle',\n    outDir: './umd',\n  },\n  {\n    buildType: 'bundle',\n    outDir: './types',\n    dts: {\n      only: true,\n    },\n  },\n];\n\n\n\n'NPM-COMPONENT'\n\n\u5728\u7c7b NPM \u5305\u7ba1\u7406\u5668\u4e0b\u4f7f\u7528\u7684 \u7ec4\u4ef6\uff08\u5e93\uff09\u901a\u7528\u6a21\u5f0f\u3002\u5305\u542b esm \u548c cjs \u4e24\u79cd Bundleless \u4ea7\u7269\uff08\u4fbf\u4e8e Tree shaking\n\u4f18\u5316\uff09\uff0c\u4ee5\u53ca\u5305\u542b\u4e00\u4efd\u7c7b\u578b\u6587\u4ef6\u3002\n\n\u5bf9\u4e8e\u6e90\u7801\u4e2d\u5305\u542b\u7684\u6837\u5f0f\u6587\u4ef6\uff0c\u4ea7\u7269\u4e2d\u63d0\u4f9b\u6837\u5f0f\u7684\u7f16\u8bd1\u4ea7\u7269\u548c\u6837\u5f0f\u7684\u6e90\u6587\u4ef6\u3002\n\n{\n    \"main\": \"./dist/lib/index.js\", // bundleless type\n    \"module\": \"./dist/es/index.js\", // bundleless type\n    \"types\": \"./dist/types/index.d.ts\",\n};\n\n\n\u9884\u8bbe\u5b57\u7b26\u4e32\u5bf9\u5e94\u7684\u6784\u5efa\u914d\u7f6e\uff1a\n\nexport const buildConfig = [\n  {\n    format: 'cjs',\n    target: 'es6',\n    buildType: 'bundleless',\n    outDir: './lib',\n  },\n  {\n    format: 'esm',\n    target: 'es6',\n    buildType: 'bundleless',\n    outDir: './es',\n  },\n  {\n    buildType: 'bundleless',\n    outDir: './types',\n    dts: {\n      only: true,\n    },\n  },\n];\n\n\n\n'NPM-COMPONENT-WITH-UMD'\n\n\u5728\u7c7b NPM \u5305\u7ba1\u7406\u5668\u4e0b\u4f7f\u7528\u7684\u7ec4\u4ef6\uff08\u5e93\uff09\uff0c\u540c\u65f6\u652f\u6301\u7c7b unpkg \u7684\u6a21\u5f0f\u3002 \u5728\u9884\u8bbe 'npm-component' \u7684\u57fa\u7840\u4e0a\uff0c\u989d\u5916\u63d0\u4f9b umd \u4ea7\u7269\u3002\n\n{\n    \"main\": \"./dist/lib/index.js\", // bundleless type\n    \"module\": \"./dist/es/index.js\", // bundleless type\n    \"types\": \"./dist/types/index.d.ts\",\n    \"unpkg\": \"./dist/umd/index.js\",\n};\n\n\nexport const buildConfig = [\n  {\n    format: 'cjs',\n    target: 'es6',\n    buildType: 'bundleless',\n    outDir: './lib',\n  },\n  {\n    format: 'esm',\n    target: 'es6',\n    buildType: 'bundleless',\n    outDir: './es',\n  },\n  {\n    format: 'umd',\n    target: 'es6',\n    buildType: 'bundle',\n    outDir: './umd',\n  },\n  {\n    buildType: 'bundleless',\n    outDir: './types',\n    dts: {\n      only: true,\n    },\n  },\n];\n\n\n\n\u5173\u4e8e\u9884\u8bbe\u503c\u652f\u6301\u7684 ECMASCRIPT \u7248\u672c\u4ee5\u53ca {ES5...ESNEXT}\n\n\u5f53\u60f3\u8981\u4f7f\u7528\u652f\u6301\u5176\u4ed6 ECMAScript \u7248\u672c\u7684 buildPreset \u9884\u8bbe\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u76f4\u63a5\u5728\n'npm-library'\u3001'npm-library-with-umd'\u3001'npm-component'\u3001'npm-component-with-umd'\n\u8fd9\u4e9b\u9884\u8bbe\u503c\u540e\u9762\u589e\u52a0\u60f3\u8981\u652f\u6301\u7684\u7248\u672c\u3002\n\n\u4f8b\u5982\u5e0c\u671b 'npm-library' \u9884\u8bbe\u652f\u6301 'es2017'\uff0c\u5219\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u65b9\u5f0f\u914d\u7f6e\uff1a\n\n\n\nexport default defineConfig({\n  buildPreset: 'npm-library-es2017',\n});\n\n\n\nFUNCTION\n\n\u51fd\u6570\u7684\u914d\u7f6e\u65b9\u5f0f\uff0c\u53ef\u4ee5\u901a\u8fc7 preset \u53c2\u6570\u83b7\u53d6\u5230\u9884\u8bbe\u503c\uff0c\u7136\u540e\u5bf9\u91cc\u9762\u7684\u6784\u5efa\u914d\u7f6e\u8fdb\u884c\u4fee\u6539\u6765\u81ea\u5b9a\u4e49\u4f60\u7684\u6784\u5efa\u914d\u7f6e\u3002\n\u4ee5\u4e0b\u662f\u4e00\u4e2a\u51fd\u6570\u7684\u914d\u7f6e\u65b9\u5f0f\u7684\u4f8b\u5b50\uff0c\u5b83\u914d\u7f6e\u4e86\u538b\u7f29\u6784\u5efa\u4ea7\u7269\u7684\u529f\u80fd\uff1a\n\n\n\nexport default defineConfig({\n  buildPreset({ preset }) {\n    const { NPM_LIBRARY } = preset;\n    return NPM_LIBRARY.map(config => {\n      config.minify = {\n        compress: {\n          drop_console: true,\n        },\n      };\n      return config;\n    });\n  },\n});\n",frontmatter:{sidebar_position:2}},{id:32,title:"DesignSystem",routePath:"/module-tools/api/config/design-system",toc:[{id:"screens-3",text:"Screens",depth:2},{id:"max-width-\u65ad\u70b9-1",text:"Max-width \u65ad\u70b9",depth:3},{id:"\u591a\u4e2a\u8303\u56f4\u7684\u65ad\u70b9-1",text:"\u591a\u4e2a\u8303\u56f4\u7684\u65ad\u70b9",depth:3},{id:"\u81ea\u5b9a\u4e49\u5a92\u4f53\u67e5\u8be2-1",text:"\u81ea\u5b9a\u4e49\u5a92\u4f53\u67e5\u8be2",depth:3},{id:"print-\u6837\u5f0f-1",text:"Print \u6837\u5f0f",depth:3},{id:"dark-mode-3",text:"Dark Mode",depth:3},{id:"colors-3",text:"Colors",depth:2},{id:"spacing-3",text:"Spacing",depth:2},{id:"\u6838\u5fc3\u63d2\u4ef6-1",text:"\u6838\u5fc3\u63d2\u4ef6",depth:2},{id:"\u81ea\u5b9a\u4e49\u9ed8\u8ba4\u914d\u7f6e-1",text:"\u81ea\u5b9a\u4e49\u9ed8\u8ba4\u914d\u7f6e",depth:2},{id:"\u8986\u76d6\u9ed8\u8ba4\u914d\u7f6e-1",text:"\u8986\u76d6\u9ed8\u8ba4\u914d\u7f6e",depth:3},{id:"\u6269\u5c55\u9ed8\u8ba4\u914d\u7f6e-1",text:"\u6269\u5c55\u9ed8\u8ba4\u914d\u7f6e",depth:3},{id:"\u5f15\u7528\u5176\u4ed6\u503c-1",text:"\u5f15\u7528\u5176\u4ed6\u503c",depth:3},{id:"\u7981\u7528\u6574\u4e2a\u6838\u5fc3\u63d2\u4ef6-1",text:"\u7981\u7528\u6574\u4e2a\u6838\u5fc3\u63d2\u4ef6",depth:3},{id:"\u6dfb\u52a0\u81ea\u5df1\u7684-key-1",text:"\u6dfb\u52a0\u81ea\u5df1\u7684 key",depth:3},{id:"\u914d\u7f6e\u5f15\u7528-1",text:"\u914d\u7f6e\u5f15\u7528",depth:2}],content:"DESIGNSYSTEM\n\n\u672c\u7ae0\u63cf\u8ff0\u4e86\u6709\u5173 designSystem \u76f8\u5173\u7684\u914d\u7f6e\n\n\u9700\u8981\u5148\u901a\u8fc7 pnpm run new \u542f\u7528 Tailwind CSS \u529f\u80fd\u3002\n\n * type: Object\n * default: \u89c1\u4e0b\u65b9\u914d\u7f6e\u8be6\u60c5\u3002\n\nconst designSystem = {\n  screens: {\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n  },\n  colors: {\n    transparent: 'transparent',\n    current: 'currentColor',\n\n    black: '#000',\n    white: '#fff',\n\n    gray: {\n      100: '#f7fafc',\n      200: '#edf2f7',\n      300: '#e2e8f0',\n      400: '#cbd5e0',\n      500: '#a0aec0',\n      600: '#718096',\n      700: '#4a5568',\n      800: '#2d3748',\n      900: '#1a202c',\n    },\n    red: {\n      100: '#fff5f5',\n      200: '#fed7d7',\n      300: '#feb2b2',\n      400: '#fc8181',\n      500: '#f56565',\n      600: '#e53e3e',\n      700: '#c53030',\n      800: '#9b2c2c',\n      900: '#742a2a',\n    },\n    orange: {\n      100: '#fffaf0',\n      200: '#feebc8',\n      300: '#fbd38d',\n      400: '#f6ad55',\n      500: '#ed8936',\n      600: '#dd6b20',\n      700: '#c05621',\n      800: '#9c4221',\n      900: '#7b341e',\n    },\n    yellow: {\n      100: '#fffff0',\n      200: '#fefcbf',\n      300: '#faf089',\n      400: '#f6e05e',\n      500: '#ecc94b',\n      600: '#d69e2e',\n      700: '#b7791f',\n      800: '#975a16',\n      900: '#744210',\n    },\n    green: {\n      100: '#f0fff4',\n      200: '#c6f6d5',\n      300: '#9ae6b4',\n      400: '#68d391',\n      500: '#48bb78',\n      600: '#38a169',\n      700: '#2f855a',\n      800: '#276749',\n      900: '#22543d',\n    },\n    teal: {\n      100: '#e6fffa',\n      200: '#b2f5ea',\n      300: '#81e6d9',\n      400: '#4fd1c5',\n      500: '#38b2ac',\n      600: '#319795',\n      700: '#2c7a7b',\n      800: '#285e61',\n      900: '#234e52',\n    },\n    blue: {\n      100: '#ebf8ff',\n      200: '#bee3f8',\n      300: '#90cdf4',\n      400: '#63b3ed',\n      500: '#4299e1',\n      600: '#3182ce',\n      700: '#2b6cb0',\n      800: '#2c5282',\n      900: '#2a4365',\n    },\n    indigo: {\n      100: '#ebf4ff',\n      200: '#c3dafe',\n      300: '#a3bffa',\n      400: '#7f9cf5',\n      500: '#667eea',\n      600: '#5a67d8',\n      700: '#4c51bf',\n      800: '#434190',\n      900: '#3c366b',\n    },\n    purple: {\n      100: '#faf5ff',\n      200: '#e9d8fd',\n      300: '#d6bcfa',\n      400: '#b794f4',\n      500: '#9f7aea',\n      600: '#805ad5',\n      700: '#6b46c1',\n      800: '#553c9a',\n      900: '#44337a',\n    },\n    pink: {\n      100: '#fff5f7',\n      200: '#fed7e2',\n      300: '#fbb6ce',\n      400: '#f687b3',\n      500: '#ed64a6',\n      600: '#d53f8c',\n      700: '#b83280',\n      800: '#97266d',\n      900: '#702459',\n    },\n  },\n  spacing: {\n    px: '1px',\n    0: '0',\n    1: '0.25rem',\n    2: '0.5rem',\n    3: '0.75rem',\n    4: '1rem',\n    5: '1.25rem',\n    6: '1.5rem',\n    8: '2rem',\n    10: '2.5rem',\n    12: '3rem',\n    16: '4rem',\n    20: '5rem',\n    24: '6rem',\n    32: '8rem',\n    40: '10rem',\n    48: '12rem',\n    56: '14rem',\n    64: '16rem',\n  },\n  backgroundColor: theme => theme('colors'),\n  backgroundOpacity: theme => theme('opacity'),\n  backgroundPosition: {\n    bottom: 'bottom',\n    center: 'center',\n    left: 'left',\n    'left-bottom': 'left bottom',\n    'left-top': 'left top',\n    right: 'right',\n    'right-bottom': 'right bottom',\n    'right-top': 'right top',\n    top: 'top',\n  },\n  backgroundSize: {\n    auto: 'auto',\n    cover: 'cover',\n    contain: 'contain',\n  },\n  borderColor: theme => ({\n    ...theme('colors'),\n    default: theme('colors.gray.300', 'currentColor'),\n  }),\n  borderOpacity: theme => theme('opacity'),\n  borderRadius: {\n    none: '0',\n    sm: '0.125rem',\n    default: '0.25rem',\n    md: '0.375rem',\n    lg: '0.5rem',\n    full: '9999px',\n  },\n  borderWidth: {\n    default: '1px',\n    0: '0',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  boxShadow: {\n    xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n    default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',\n    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',\n    inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',\n    outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',\n    none: 'none',\n  },\n  container: {},\n  cursor: {\n    auto: 'auto',\n    default: 'default',\n    pointer: 'pointer',\n    wait: 'wait',\n    text: 'text',\n    move: 'move',\n    'not-allowed': 'not-allowed',\n  },\n  divideColor: theme => theme('borderColor'),\n  divideOpacity: theme => theme('borderOpacity'),\n  divideWidth: theme => theme('borderWidth'),\n  fill: {\n    current: 'currentColor',\n  },\n  flex: {\n    1: '1 1 0%',\n    auto: '1 1 auto',\n    initial: '0 1 auto',\n    none: 'none',\n  },\n  flexGrow: {\n    0: '0',\n    default: '1',\n  },\n  flexShrink: {\n    0: '0',\n    default: '1',\n  },\n  fontFamily: {\n    sans: [\n      'system-ui',\n      '-apple-system',\n      'BlinkMacSystemFont',\n      '\"Segoe UI\"',\n      'Roboto',\n      '\"Helvetica Neue\"',\n      'Arial',\n      '\"Noto Sans\"',\n      'sans-serif',\n      '\"Apple Color Emoji\"',\n      '\"Segoe UI Emoji\"',\n      '\"Segoe UI Symbol\"',\n      '\"Noto Color Emoji\"',\n    ],\n    serif: ['Georgia', 'Cambria', '\"Times New Roman\"', 'Times', 'serif'],\n    mono: [\n      'Menlo',\n      'Monaco',\n      'Consolas',\n      '\"Liberation Mono\"',\n      '\"Courier New\"',\n      'monospace',\n    ],\n  },\n  fontSize: {\n    xs: '0.75rem',\n    sm: '0.875rem',\n    base: '1rem',\n    lg: '1.125rem',\n    xl: '1.25rem',\n    '2xl': '1.5rem',\n    '3xl': '1.875rem',\n    '4xl': '2.25rem',\n    '5xl': '3rem',\n    '6xl': '4rem',\n  },\n  fontWeight: {\n    hairline: '100',\n    thin: '200',\n    light: '300',\n    normal: '400',\n    medium: '500',\n    semibold: '600',\n    bold: '700',\n    extrabold: '800',\n    black: '900',\n  },\n  height: theme => ({\n    auto: 'auto',\n    ...theme('spacing'),\n    full: '100%',\n    screen: '100vh',\n  }),\n  inset: {\n    0: '0',\n    auto: 'auto',\n  },\n  letterSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.1em',\n  },\n  lineHeight: {\n    none: '1',\n    tight: '1.25',\n    snug: '1.375',\n    normal: '1.5',\n    relaxed: '1.625',\n    loose: '2',\n    3: '.75rem',\n    4: '1rem',\n    5: '1.25rem',\n    6: '1.5rem',\n    7: '1.75rem',\n    8: '2rem',\n    9: '2.25rem',\n    10: '2.5rem',\n  },\n  listStyleType: {\n    none: 'none',\n    disc: 'disc',\n    decimal: 'decimal',\n  },\n  margin: (theme, { negative }) => ({\n    auto: 'auto',\n    ...theme('spacing'),\n    ...negative(theme('spacing')),\n  }),\n  maxHeight: {\n    full: '100%',\n    screen: '100vh',\n  },\n  maxWidth: (theme, { breakpoints }) => ({\n    none: 'none',\n    xs: '20rem',\n    sm: '24rem',\n    md: '28rem',\n    lg: '32rem',\n    xl: '36rem',\n    '2xl': '42rem',\n    '3xl': '48rem',\n    '4xl': '56rem',\n    '5xl': '64rem',\n    '6xl': '72rem',\n    full: '100%',\n    ...breakpoints(theme('screens')),\n  }),\n  minHeight: {\n    0: '0',\n    full: '100%',\n    screen: '100vh',\n  },\n  minWidth: {\n    0: '0',\n    full: '100%',\n  },\n  objectPosition: {\n    bottom: 'bottom',\n    center: 'center',\n    left: 'left',\n    'left-bottom': 'left bottom',\n    'left-top': 'left top',\n    right: 'right',\n    'right-bottom': 'right bottom',\n    'right-top': 'right top',\n    top: 'top',\n  },\n  opacity: {\n    0: '0',\n    25: '0.25',\n    50: '0.5',\n    75: '0.75',\n    100: '1',\n  },\n  order: {\n    first: '-9999',\n    last: '9999',\n    none: '0',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n  },\n  padding: theme => theme('spacing'),\n  placeholderColor: theme => theme('colors'),\n  placeholderOpacity: theme => theme('opacity'),\n  space: (theme, { negative }) => ({\n    ...theme('spacing'),\n    ...negative(theme('spacing')),\n  }),\n  stroke: {\n    current: 'currentColor',\n  },\n  strokeWidth: {\n    0: '0',\n    1: '1',\n    2: '2',\n  },\n  textColor: theme => theme('colors'),\n  textOpacity: theme => theme('opacity'),\n  width: theme => ({\n    auto: 'auto',\n    ...theme('spacing'),\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    '1/12': '8.333333%',\n    '2/12': '16.666667%',\n    '3/12': '25%',\n    '4/12': '33.333333%',\n    '5/12': '41.666667%',\n    '6/12': '50%',\n    '7/12': '58.333333%',\n    '8/12': '66.666667%',\n    '9/12': '75%',\n    '10/12': '83.333333%',\n    '11/12': '91.666667%',\n    full: '100%',\n    screen: '100vw',\n  }),\n  zIndex: {\n    auto: 'auto',\n    0: '0',\n    10: '10',\n    20: '20',\n    30: '30',\n    40: '40',\n    50: '50',\n  },\n  gap: theme => theme('spacing'),\n  gridTemplateColumns: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n    7: 'repeat(7, minmax(0, 1fr))',\n    8: 'repeat(8, minmax(0, 1fr))',\n    9: 'repeat(9, minmax(0, 1fr))',\n    10: 'repeat(10, minmax(0, 1fr))',\n    11: 'repeat(11, minmax(0, 1fr))',\n    12: 'repeat(12, minmax(0, 1fr))',\n  },\n  gridColumn: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n    'span-7': 'span 7 / span 7',\n    'span-8': 'span 8 / span 8',\n    'span-9': 'span 9 / span 9',\n    'span-10': 'span 10 / span 10',\n    'span-11': 'span 11 / span 11',\n    'span-12': 'span 12 / span 12',\n  },\n  gridColumnStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridColumnEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridTemplateRows: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n  },\n  gridRow: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n  },\n  gridRowStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  gridRowEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  transformOrigin: {\n    center: 'center',\n    top: 'top',\n    'top-right': 'top right',\n    right: 'right',\n    'bottom-right': 'bottom right',\n    bottom: 'bottom',\n    'bottom-left': 'bottom left',\n    left: 'left',\n    'top-left': 'top left',\n  },\n  scale: {\n    0: '0',\n    50: '.5',\n    75: '.75',\n    90: '.9',\n    95: '.95',\n    100: '1',\n    105: '1.05',\n    110: '1.1',\n    125: '1.25',\n    150: '1.5',\n  },\n  rotate: {\n    '-180': '-180deg',\n    '-90': '-90deg',\n    '-45': '-45deg',\n    0: '0',\n    45: '45deg',\n    90: '90deg',\n    180: '180deg',\n  },\n  translate: (theme, { negative }) => ({\n    ...theme('spacing'),\n    ...negative(theme('spacing')),\n    '-full': '-100%',\n    '-1/2': '-50%',\n    '1/2': '50%',\n    full: '100%',\n  }),\n  skew: {\n    '-12': '-12deg',\n    '-6': '-6deg',\n    '-3': '-3deg',\n    0: '0',\n    3: '3deg',\n    6: '6deg',\n    12: '12deg',\n  },\n  transitionProperty: {\n    none: 'none',\n    all: 'all',\n    default:\n      'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',\n    colors: 'background-color, border-color, color, fill, stroke',\n    opacity: 'opacity',\n    shadow: 'box-shadow',\n    transform: 'transform',\n  },\n  transitionTimingFunction: {\n    linear: 'linear',\n    in: 'cubic-bezier(0.4, 0, 1, 1)',\n    out: 'cubic-bezier(0, 0, 0.2, 1)',\n    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',\n  },\n  transitionDuration: {\n    75: '75ms',\n    100: '100ms',\n    150: '150ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n  transitionDelay: {\n    75: '75ms',\n    100: '100ms',\n    150: '150ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n};\n\n\n\u66f4\u591a\u5173\u4e8eTailwindCSS \u914d\u7f6e\n\ndesignSystem \u7528\u4e8e\u5b9a\u4e49\u9879\u76ee\u7684\u8c03\u8272\u677f\u3001\u6392\u7248\u6bd4\u4f8b\uff08Typographic Scales \u6216\u8005 Type\nScale\uff09\u3001\u5b57\u4f53\u5217\u8868\u3001\u65ad\u70b9\u3001\u8fb9\u6846\u5706\u89d2\u503c\u7b49\u7b49\u3002\u56e0\u4e3a Modern.js \u501f\u7528\u4e86 Tailwind Theme \u7684\u8bbe\u8ba1\u65b9\u5f0f\uff0c\u5e76\u4e14\u5185\u90e8\u4e5f\u96c6\u6210\u4e86 Tailwind\nCSS\uff0c\u6240\u4ee5 designSystem \u4f7f\u7528\u65b9\u5f0f\u4e0e Tailwind CSS Theme \u76f8\u540c\n\ndesignSystem \u5bf9\u8c61\u5305\u542b screens\u3001colors \u548c spacing \u7684\u5c5e\u6027\uff0c\u4ee5\u53ca\u6bcf\u4e2a\u53ef\u81ea\u5b9a\u4e49\u6838\u5fc3\u63d2\u4ef6\u3002\n\n\nSCREENS\n\n\u4f7f\u7528screens \u53ef\u4ee5\u81ea\u5b9a\u4e49\u9879\u76ee\u4e2d\u7684\u54cd\u5e94\u65ad\u70b9\uff1a\n\nconst designSystem = {\n  screens: {\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n  },\n};\n\n\n\u5176\u4e2d screens \u5bf9\u8c61\u91cc\u7684\u5c5e\u6027\u540d\u662f\u5c4f\u5e55\u540d\u79f0\uff08\u7528\u4f5c Tailwind CSS \u751f\u6210\u7684\u81ea\u9002\u5e94\u5b9e\u7528\u7a0b\u5e8f\u53d8\u4f53\u7684\u524d\u7f00\uff0c\u4f8b\u5982\nmd:text-center\uff09\uff0c\u503c\u662f\u8be5\u65ad\u70b9\u5e94\u5728\u5176\u5f00\u59cb\u7684 min-width\u3002\n\n\u9ed8\u8ba4\u65ad\u70b9\u53d7\u5e38\u89c1\u8bbe\u5907\u5206\u8fa8\u7387\u7684\u542f\u53d1\uff1a\n\nconst designSystem = {\n  screens: {\n    sm: '640px',\n    // => @media (min-width: 640px) { ... }\n\n    md: '768px',\n    // => @media (min-width: 768px) { ... }\n\n    lg: '1024px',\n    // => @media (min-width: 1024px) { ... }\n\n    xl: '1280px',\n    // => @media (min-width: 1280px) { ... }\n  },\n};\n\n\n\u4f60\u53ef\u4ee5\u5728\u4f60\u7684\u9879\u76ee\u4e2d\u4f7f\u7528\u4efb\u610f\u4f60\u559c\u6b22\u7684\u540d\u79f0\u4f5c\u4e3a\u65ad\u70b9\u7684\u5c5e\u6027\uff1a\n\nconst designSystem = {\n  screens: {\n    tablet: '640px',\n    // => @media (min-width: 640px) { ... }\n\n    laptop: '1024px',\n    // => @media (min-width: 1024px) { ... }\n\n    desktop: '1280px',\n    // => @media (min-width: 1280px) { ... }\n  },\n};\n\n\n\u8fd9\u4e9b\u5c4f\u5e55\u540d\u79f0\u53cd\u6620\u5728 utilities \u4e2d\uff0c\u56e0\u6b64 text-center \u73b0\u5728\u662f\u8fd9\u6837\u7684\uff1a\n\n.text-center {\n  text-align: center;\n}\n\n@media (min-width: 640px) {\n  .tablet\\:text-center {\n    text-align: center;\n  }\n}\n\n@media (min-width: 1024px) {\n  .laptop\\:text-center {\n    text-align: center;\n  }\n}\n\n@media (min-width: 1280px) {\n  .desktop\\:text-center {\n    text-align: center;\n  }\n}\n\n\n\nMAX-WIDTH \u65ad\u70b9\n\n\u5982\u679c\u8981\u4f7f\u7528 max-width \u65ad\u70b9\u800c\u4e0d\u662f min-width\uff0c\u53ef\u4ee5\u5c06\u5c4f\u5e55\u6307\u5b9a\u4e3a\u5177\u6709 max \u5c5e\u6027\u7684\u5bf9\u8c61\uff1a\n\nconst designSystem = {\n  screens: {\n    xl: { max: '1279px' },\n    // => @media (max-width: 1279px) { ... }\n\n    lg: { max: '1023px' },\n    // => @media (max-width: 1023px) { ... }\n\n    md: { max: '767px' },\n    // => @media (max-width: 767px) { ... }\n\n    sm: { max: '639px' },\n    // => @media (max-width: 639px) { ... }\n  },\n};\n\n\n\u5982\u6709\u5fc5\u8981\uff0c\u4ee5\u521b\u5efa\u5e26\u6709 min-width \u548c max-width \u5b9a\u4e49\u7684\u65ad\u70b9\uff0c\u4f8b\u5982\uff1a\n\nconst designSystem = {\n  screens: {\n    sm: { min: '640px', max: '767px' },\n    md: { min: '768px', max: '1023px' },\n    lg: { min: '1024px', max: '1279px' },\n    xl: { min: '1280px' },\n  },\n};\n\n\n\n\u591a\u4e2a\u8303\u56f4\u7684\u65ad\u70b9\n\n\u6709\u65f6\uff0c\u5c06\u5355\u4e2a\u65ad\u70b9\u5b9a\u4e49\u5e94\u7528\u4e8e\u591a\u4e2a\u8303\u56f4\u4f1a\u5f88\u6709\u7528\u3002\n\n\u4f8b\u5982\uff0c\u5047\u8bbe\u60a8\u6709\u4e00\u4e2a sidebar\uff0c\u5e76\u4e14\u5e0c\u671b\u65ad\u70b9\u57fa\u4e8e\u5185\u5bb9\u533a\u57df\u5bbd\u5ea6\u800c\u4e0d\u662f\u6574\u4e2a\u89c6\u53e3\u3002\u60a8\u53ef\u4ee5\u6a21\u62df\u8fd9\u79cd\u60c5\u51b5\uff0c\u5f53 sidebar\n\u53ef\u89c1\u5e76\u7f29\u5c0f\u5185\u5bb9\u533a\u57df\u65f6\uff0c\u65ad\u70b9\u7684\u6837\u5f0f\u4f7f\u7528\u8f83\u5c0f\u7684\u65ad\u70b9\u6837\u5f0f\uff1a\n\nconst designSystem = {\n  screens: {\n    sm: '500px',\n    md: [\n      // Sidebar appears at 768px, so revert to `sm:` styles between 768px\n      // and 868px, after which the main content area is wide enough again to\n      // apply the `md:` styles.\n      { min: '668px', max: '767px' },\n      { min: '868px' },\n    ],\n    lg: '1100px',\n    xl: '1400px',\n  },\n};\n\n\n\n\u81ea\u5b9a\u4e49\u5a92\u4f53\u67e5\u8be2\n\n\u5982\u679c\u9700\u8981\u4e3a\u65ad\u70b9\u63d0\u4f9b\u5b8c\u5168\u81ea\u5b9a\u4e49\u7684\u5a92\u4f53\u67e5\u8be2\uff0c\u5219\u53ef\u4ee5\u4f7f\u7528\u5e26\u6709 raw \u5c5e\u6027\u7684\u5bf9\u8c61\uff1a\n\nconst designSystem = {\n  extend: {\n    screens: {\n      portrait: { raw: '(orientation: portrait)' },\n      // => @media (orientation: portrait) { ... }\n    },\n  },\n};\n\n\n\nPRINT \u6837\u5f0f\n\n\u5982\u679c\u9700\u8981\u4e3a\u6253\u5370\u5e94\u7528\u4e0d\u540c\u7684\u6837\u5f0f\uff0c\u5219 raw \u9009\u9879\u53ef\u80fd\u7279\u522b\u6709\u7528\u3002\n\n\u9700\u8981\u505a\u7684\u5c31\u662f\u5728 designSystem.extend.screens \u4e0b\u6dfb\u52a0\u4e00\u4e2a print\uff1a\n\nconst designSystem = {\n  extend: {\n    screens: {\n      print: { raw: 'print' },\n      // => @media print { ... }\n    },\n  },\n};\n\n\n\u7136\u540e\uff0c\u53ef\u4ee5\u4f7f\u7528\u8bf8\u5982 print:text-black \u4e4b\u7c7b\u7684\u7c7b\u6765\u6307\u5b9a\u4ec5\u5f53\u67d0\u4eba\u5c1d\u8bd5\u6253\u5370\u9875\u9762\u65f6\u624d\u5e94\u7528\u7684\u6837\u5f0f\uff1a\n\n<div class=\"text-gray-700 print:text-black\">\n  \x3c!-- ... --\x3e\n</div>\n\n\n\nDARK MODE\n\nraw \u9009\u9879\u53ef\u4ee5\u7528\u4e8e\u5b9e\u73b0 \u201c\u6697\u6a21\u5f0f\u201d \u5c4f\u5e55\uff1a\n\nconst designSystem = {\n  extend: {\n    screens: {\n      dark: { raw: '(prefers-color-scheme: dark)' },\n      // => @media (prefers-color-scheme: dark) { ... }\n    },\n  },\n};\n\n\n\u7136\u540e\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 dark: \u524d\u7f00\u5728\u6697\u6a21\u5f0f\u4e0b\u4e3a\u5143\u7d20\u8bbe\u7f6e\u4e0d\u540c\u7684\u6837\u5f0f\uff1a\n\n<div class=\"text-gray-700 dark:text-gray-200\">\n  \x3c!-- ... --\x3e\n</div>\n\n\n\u8bf7\u6ce8\u610f\uff0c\u7531\u4e8e\u8fd9\u4e9b screen variants \u662f\u5728 Tailwind CSS \u4e2d\u5b9e\u73b0\u7684\uff0c\u56e0\u6b64\u65e0\u6cd5\u4f7f\u7528\u8fd9\u79cd\u65b9\u6cd5\u5c06\u65ad\u70b9\u4e0e\u6697\u6a21\u5f0f\u7ed3\u5408\u4f7f\u7528 \uff0c\u4f8b\u5982\nmd:dark:text-gray-300 \u5c06\u4e0d\u8d77\u4f5c\u7528\u3002\n\n\nCOLORS\n\ncolors \u5c5e\u6027\u53ef\u8ba9\u60a8\u81ea\u5b9a\u4e49\u9879\u76ee\u7684\u5168\u5c40\u8c03\u8272\u677f\u3002\n\nconst designSystem = {\n  colors: {\n    transparent: 'transparent',\n    black: '#000',\n    white: '#fff',\n    gray: {\n      100: '#f7fafc',\n      // ...\n      900: '#1a202c',\n    },\n\n    // ...\n  },\n};\n\n\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u8fd9\u4e9b\u989c\u8272\u7531 backgroundColor\uff0ctextColor \u548c borderColor \u6838\u5fc3\u63d2\u4ef6\u7ee7\u627f\u3002\n\n\u60f3\u4e86\u89e3\u66f4\u591a\uff0c\u53ef\u4ee5\u67e5\u770b\uff1aCustomizing Colors\u3002\n\n\nSPACING\n\n\u4f7f\u7528 space \u5c5e\u6027\uff0c\u53ef\u4ee5\u81ea\u5b9a\u4e49\u9879\u76ee\u7684\u5168\u5c40\u95f4\u8ddd\u548c\u7f29\u653e\u6bd4\u4f8b\uff1a\n\nconst designSystem = {\n  spacing: {\n    px: '1px',\n    0: '0',\n    1: '0.25rem',\n    2: '0.5rem',\n    3: '0.75rem',\n    4: '1rem',\n    5: '1.25rem',\n    6: '1.5rem',\n    8: '2rem',\n    10: '2.5rem',\n    12: '3rem',\n    16: '4rem',\n    20: '5rem',\n    24: '6rem',\n    32: '8rem',\n    40: '10rem',\n    48: '12rem',\n    56: '14rem',\n    64: '16rem',\n  },\n};\n\n\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u8fd9\u4e9b\u503c\u7531 padding\uff0cmargin\uff0cnegativeMargin\uff0cwidth \u548c height \u6838\u5fc3\u63d2\u4ef6\u7ee7\u627f\u3002\n\n\u60f3\u8981\u4e86\u89e3\u66f4\u591a\uff0c\u770b Customizing Spacing\u3002\n\n\n\u6838\u5fc3\u63d2\u4ef6\n\n\u4e3b\u9898\u90e8\u5206\u7684\u5176\u4f59\u90e8\u5206\u7528\u4e8e\u914d\u7f6e\u6bcf\u4e2a\u6838\u5fc3\u63d2\u4ef6\u53ef\u7528\u7684\u503c\u3002\n\n\u4f8b\u5982\uff0cborderRadius \u5c5e\u6027\u53ef\u8ba9\u60a8\u81ea\u5b9a\u4e49\u5c06\u751f\u6210\u7684\u5706\u89d2\u7684 utilities\uff1a\n\nconst designSystem = {\n  borderRadius: {\n    none: '0',\n    sm: '.125rem',\n    default: '.25rem',\n    lg: '.5rem',\n    full: '9999px',\n  },\n};\n\n\n\u5c5e\u6027\u540d\u786e\u5b9a\u6240\u751f\u6210\u7c7b\u7684\u540e\u7f00\uff0c\u503c\u786e\u5b9a\u5b9e\u9645 CSS \u58f0\u660e\u7684\u503c\u3002 \u4e0a\u9762\u7684\u793a\u4f8bborderRadius\u914d\u7f6e\u5c06\u751f\u6210\u4ee5\u4e0b CSS \u7c7b\uff1a\n\n.rounded-none {\n  border-radius: 0;\n}\n.rounded-sm {\n  border-radius: 0.125rem;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n\n\n\u4f1a\u6ce8\u610f\u5230\uff0c\u5728\u4e3b\u9898\u914d\u7f6e\u4e2d\u4f7f\u7528 default \u5c5e\u6027\u521b\u5efa\u4e86\u4e0d\u5e26\u540e\u7f00\u7684 rounded \u7c7b\u3002\u8fd9\u662f\u8bb8\u591a\uff08\u5c3d\u7ba1\u4e0d\u662f\u5168\u90e8\uff09\u6838\u5fc3\u63d2\u4ef6\u652f\u6301\u7684 Tailwind CSS\n\u4e2d\u7684\u901a\u7528\u7ea6\u5b9a\u3002\n\n\u8981\u4e86\u89e3\u6709\u5173\u81ea\u5b9a\u4e49\u7279\u5b9a\u6838\u5fc3\u63d2\u4ef6\u7684\u66f4\u591a\u4fe1\u606f\uff0c\u8bf7\u8bbf\u95ee\u8be5\u63d2\u4ef6\u7684\u6587\u6863\u3002\n\n\n\u81ea\u5b9a\u4e49\u9ed8\u8ba4\u914d\u7f6e\n\n\u5f00\u7bb1\u5373\u7528\uff0c\u60a8\u7684\u9879\u76ee\u5c06\u81ea\u52a8\u4ece\u9ed8\u8ba4\u4e3b\u9898\u914d\u7f6e\u7ee7\u627f\u503c\u3002\u5982\u679c\u60f3\u81ea\u5b9a\u4e49\u9ed8\u8ba4\u4e3b\u9898\uff0c\u5219\u6839\u636e\u76ee\u6807\u6709\u51e0\u79cd\u4e0d\u540c\u7684\u9009\u62e9\u3002\n\n\n\u8986\u76d6\u9ed8\u8ba4\u914d\u7f6e\n\n\u8981\u8986\u76d6\u9ed8\u8ba4\u914d\u7f6e\u4e2d\u7684\u9009\u9879\uff0c\u8bf7\u5728 designSystem \u4e2d\u6dfb\u52a0\u8981\u8986\u76d6\u7684\u5c5e\u6027\uff1a\n\n\n\nconst designSystem = {\n  // Replaces all of the default `opacity` values\n  opacity: {\n    0: '0',\n    20: '0.2',\n    40: '0.4',\n    60: '0.6',\n    80: '0.8',\n    100: '1',\n  },\n};\n\nexport default defineConfig({\n  designSystem,\n});\n\n\n\u8fd9\u5c06\u5b8c\u5168\u66ff\u6362\u9ed8\u8ba4\u5c5e\u6027\u914d\u7f6e\uff0c\u56e0\u6b64\u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u4e0d\u4f1a\u751f\u6210\u9ed8\u8ba4\u7684 opacity utilities\u3002\n\n\u60a8\u672a\u63d0\u4f9b\u7684\u4efb\u4f55\u5c5e\u6027\u90fd\u5c06\u4ece\u9ed8\u8ba4\u4e3b\u9898\u7ee7\u627f\uff0c\u56e0\u6b64\u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u5c06\u4fdd\u7559\u989c\u8272\uff0c\u95f4\u8ddd\uff0c\u8fb9\u6846\u5706\u89d2\uff0c\u80cc\u666f\u4f4d\u7f6e\u7b49\u5185\u5bb9\u7684\u9ed8\u8ba4\u4e3b\u9898\u914d\u7f6e\u3002\n\n\n\u6269\u5c55\u9ed8\u8ba4\u914d\u7f6e\n\n\u5982\u679c\u60a8\u60f3\u4fdd\u7559\u4e3b\u9898\u9009\u9879\u7684\u9ed8\u8ba4\u503c\uff0c\u4f46\u53c8\u8981\u6dfb\u52a0\u65b0\u503c\uff0c\u8bf7\u5728 designSystem.extend \u5c5e\u6027\u4e0b\u6dfb\u52a0\u6269\u5c55\u7684\u5185\u5bb9\u3002\n\n\u4f8b\u5982\uff0c\u5982\u679c\u60a8\u60f3\u6dfb\u52a0\u4e00\u4e2a\u989d\u5916\u7684\u65ad\u70b9\u4f46\u4fdd\u7559\u73b0\u6709\u7684\u65ad\u70b9\uff0c\u5219\u53ef\u4ee5\u6269\u5c55 screens \u5c5e\u6027\uff1a\n\n\n\nconst designSystem = {\n  extend: {\n    // Adds a new breakpoint in addition to the default breakpoints\n    screens: {\n      '2xl': '1440px',\n    },\n  },\n};\n\nexport default defineConfig({\n  designSystem,\n});\n\n\n\u60a8\u5f53\u7136\u53ef\u4ee5\u8986\u76d6\u9ed8\u8ba4\u4e3b\u9898\u7684\u67d0\u4e9b\u90e8\u5206\uff0c\u5e76\u5728\u540c\u4e00\u914d\u7f6e\u4e2d\u6269\u5c55\u9ed8\u8ba4\u4e3b\u9898\u7684\u5176\u4ed6\u90e8\u5206\uff1a\n\n\n\nconst designSystem = {\n  opacity: {\n    0: '0',\n    20: '0.2',\n    40: '0.4',\n    60: '0.6',\n    80: '0.8',\n    100: '1',\n  },\n  extend: {\n    screens: {\n      '2xl': '1440px',\n    },\n  },\n};\n\nexport default defineConfig({\n  designSystem,\n});\n\n\n\n\u5f15\u7528\u5176\u4ed6\u503c\n\n\u5982\u679c\u9700\u8981\u5728\u914d\u7f6e\u4e2d\u5f15\u7528\u53e6\u4e00\u4e2a\u503c\uff0c\u53ef\u4ee5\u901a\u8fc7\u63d0\u4f9b\u95ed\u5305\u51fd\u6570\u800c\u4e0d\u662f\u9759\u6001\u503c\u6765\u5b9e\u73b0\u3002\u51fd\u6570\u5c06\u6536\u5230 theme() \u51fd\u6570\u4f5c\u4e3a\u53c2\u6570\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u8be5\u51fd\u6570\u4f7f\u7528\u70b9\u8868\u793a\u6cd5\u5728\u914d\u7f6e\u4e2d\u67e5\u627e\u5176\u4ed6\u503c\u3002\n\n\u4f8b\u5982\uff0c\u60a8\u53ef\u4ee5\u5728 fill \u914d\u7f6e\u4e0a\u901a\u8fc7\u5f15\u7528 theme('colors') \u4e3a\u8c03\u8272\u677f\u4e2d\u7684\u6bcf\u79cd\u989c\u8272\u751f\u6210 fill utilities\u3002\n\n\n\nconst designSystem = {\n  colors: {\n    // ...\n  },\n  fill: theme => theme('colors'),\n};\n\nexport default defineConfig({\n  designSystem,\n});\n\n\ntheme()\u51fd\u6570\u5c1d\u8bd5\u4ece\u5df2\u7ecf\u5b8c\u5168\u5408\u5e76\u7684\u914d\u7f6e\u5bf9\u8c61\u4e2d\u627e\u5230\u60a8\u8981\u67e5\u627e\u7684\u503c\uff0c\u56e0\u6b64\u5b83\u53ef\u4ee5\u5f15\u7528\u60a8\u81ea\u5df1\u7684\u81ea\u5b9a\u4e49\u8bbe\u7f6e\u4ee5\u53ca\u9ed8\u8ba4\u4e3b\u9898\u503c\u3002\u5b83\u4e5f\u53ef\u4ee5\u9012\u5f52\u5de5\u4f5c\uff0c\u56e0\u6b64\u53ea\u8981\u94fe\u672b\u5c3e\u6709\u4e00\u4e2a\u9759\u6001\u503c\uff0c\n\u5b83\u5c31\u53ef\u4ee5\u89e3\u6790\u60a8\u8981\u67e5\u627e\u7684\u503c\u3002\n\n\u5f15\u7528\u9ed8\u8ba4\u914d\u7f6e\n\n\u5982\u679c\u51fa\u4e8e\u4efb\u4f55\u539f\u56e0\u60f3\u8981\u5f15\u7528\u9ed8\u8ba4\u914d\u7f6e\u4e2d\u7684\u503c\uff0c\u5219\u53ef\u4ee5\u4ece tailwindcss/defaultTheme\n\u5bfc\u5165\u5b83\u3002\u4e00\u4e2a\u6709\u7528\u7684\u793a\u4f8b\u662f\uff0c\u5982\u679c\u8981\u5c06\u6dfb\u52a0\u9ed8\u8ba4\u914d\u7f6e\u63d0\u4f9b\u7684\u5b57\u4f53\u4e2d\u67d0\u4e00\u4e2a\u5b57\u4f53\uff1a\n\n\n\nconst defaultTheme = require('tailwindcss/defaultTheme');\n\nconst designSystem = {\n  extend: {\n    fontFamily: {\n      sans: ['Lato', ...defaultTheme.fontFamily.sans],\n    },\n  },\n};\n\nexport default defineConfig({\n  designSystem,\n});\n\n\n\n\u7981\u7528\u6574\u4e2a\u6838\u5fc3\u63d2\u4ef6\n\n\u5982\u679c\u60a8\u4e0d\u60f3\u4e3a\u67d0\u4e2a\u6838\u5fc3\u63d2\u4ef6\u751f\u6210\u4efb\u4f55\u7c7b\uff0c\u5219\u6700\u597d\u5728 corePlugins \u914d\u7f6e\u4e2d\u5c06\u8be5\u63d2\u4ef6\u8bbe\u7f6e\u4e3a false\uff0c\u800c\u4e0d\u662f\u5728\u914d\u7f6e\u4e2d\u4e3a\u8be5\u5c5e\u6027\u63d0\u4f9b\u4e00\u4e2a\u7a7a\u5bf9\u8c61\uff1a\n\n// Don't assign an empty object in your theme configuration\n\nconst designSystem = {\n  opacity: {},\n};\n\n// Do disable the plugin in your corePlugins configuration\nconst designSyttem = {\n  corePlugins: {\n    opacity: false,\n  },\n};\n\n\n\u6700\u7ec8\u7ed3\u679c\u662f\u76f8\u540c\u7684\uff0c\u4f46\u662f\u7531\u4e8e\u8bb8\u591a\u6838\u5fc3\u63d2\u4ef6\u672a\u516c\u5f00\u4efb\u4f55\u914d\u7f6e\uff0c\u56e0\u6b64\u65e0\u8bba\u5982\u4f55\u53ea\u80fd\u4f7f\u7528 corePlugins \u7981\u7528\u5b83\u4eec\uff0c\u6700\u597d\u4fdd\u6301\u4e00\u81f4\u3002\n\n\n\u6dfb\u52a0\u81ea\u5df1\u7684 KEY\n\n\u5728\u5f88\u591a\u60c5\u51b5\u4e0b\uff0c\u5c06\u81ea\u5df1\u7684\u5c5e\u6027\u6dfb\u52a0\u5230\u914d\u7f6e\u5bf9\u8c61\u53ef\u80fd\u4f1a\u5f88\u6709\u7528\u3002\n\n\u5176\u4e2d\u4e00\u4e2a\u793a\u4f8b\u662f\u6dfb\u52a0\u65b0\u5c5e\u6027\u4e3a\u591a\u4e2a\u6838\u5fc3\u63d2\u4ef6\u4e4b\u95f4\u590d\u7528\u3002\u4f8b\u5982\uff0c\u60a8\u53ef\u4ee5\u63d0\u53d6\u4e00\u4e2a positions\u5bf9\u8c61\uff0cbackgroundPosition \u548c\nobjectPosition \u63d2\u4ef6\u90fd\u53ef\u4ee5\u5f15\u7528\u8be5\u5bf9\u8c61\uff1a\n\nconst designSystem = {\n  positions: {\n    bottom: 'bottom',\n    center: 'center',\n    left: 'left',\n    'left-bottom': 'left bottom',\n    'left-top': 'left top',\n    right: 'right',\n    'right-bottom': 'right bottom',\n    'right-top': 'right top',\n    top: 'top',\n  },\n  backgroundPosition: theme => theme('positions'),\n  objectPosition: theme => theme('positions'),\n};\n\n\n\u53e6\u4e00\u4e2a\u793a\u4f8b\u662f\u5728\u81ea\u5b9a\u4e49\u63d2\u4ef6\u4e2d\u6dfb\u52a0\u65b0\u7684\u5c5e\u6027\u4ee5\u8fdb\u884c\u5f15\u7528\u3002\u4f8b\u5982\uff0c\u5982\u679c\u60a8\u4e3a\u9879\u76ee\u7f16\u5199\u4e86\u6e10\u53d8\u63d2\u4ef6\uff0c\u5219\u53ef\u4ee5\u5411\u8be5\u63d2\u4ef6\u5f15\u7528\u7684\u4e3b\u9898\u5bf9\u8c61\u6dfb\u52a0\u6e10\u53d8\u5c5e\u6027\uff1a\n\n\n\nconst designSystem = {\n  gradients: theme => ({\n    'blue-green': [theme('colors.blue.500'), theme('colors.green.500')],\n    'purple-blue': [theme('colors.purple.500'), theme('colors.blue.500')],\n    // ...\n  }),\n};\n\nexport default defineConfig({\n  designSystem,\n  buildConfig: {\n    style: {\n      postcss: {\n        plugins: [require('./plugins/gradients')],\n      },\n    },\n  },\n});\n\n\n\n\u914d\u7f6e\u5f15\u7528\n\n\u9664\u4e86 screens\uff0ccolors \u548c spacing \u5916\uff0c\u914d\u7f6e\u5bf9\u8c61\u4e2d\u7684\u6240\u6709\u5c5e\u6027\u90fd\u6620\u5c04\u5230 Tailwind CSS\n\u7684\u6838\u5fc3\u63d2\u4ef6\u4e0a\u3002\u7531\u4e8e\u8bb8\u591a\u63d2\u4ef6\u8d1f\u8d23\u4ec5\u63a5\u53d7\u9759\u6001\u503c\u96c6\uff08\u4f8b\u5982\uff0c\u4f8b\u5982float\uff09\u7684 CSS \u5c5e\u6027\uff0c\u56e0\u6b64\u8bf7\u6ce8\u610f\uff0c\u5e76\u975e\u6bcf\u4e2a\u63d2\u4ef6\u5728\u4e3b\u9898\u5bf9\u8c61\u4e2d\u90fd\u6709\u5bf9\u5e94\u7684\u5c5e\u6027\u3002\n\n\u6240\u6709\u8fd9\u4e9b\u5c5e\u6027\u4e5f\u53ef\u4ee5\u5728 designSystem.extend \u5c5e\u6027\u4e0b\u4f7f\u7528\uff0c\u4ee5\u6269\u5c55\u9ed8\u8ba4\u4e3b\u9898\u3002\n\n\u5173\u4e8e\u6240\u6709\u5c5e\u6027\u7684\u4f5c\u7528\uff0c\u53ef\u4ee5\u67e5\u770b\u6b64 \u94fe\u63a5\u3002",frontmatter:{sidebar_position:3}},{id:33,title:"Plugins",routePath:"/module-tools/api/config/plugins",toc:[],content:"PLUGINS\n\n\u672c\u7ae0\u4ecb\u7ecd\u6ce8\u518c module-tools \u63d2\u4ef6\u7684\u914d\u7f6e\u3002\n\n * type\uff1aArray<ModuleToolsPlugin>\n\n\nexport default defineConfig({\n  plugins: [examplePlugin()],\n});\n\n\n\u5173\u4e8e\u5982\u4f55\u7f16\u5199\u63d2\u4ef6\uff0c\u53ef\u4ee5\u67e5\u770b\u3010\u63d2\u4ef6\u7f16\u5199\u6307\u5357\u3011\u3002",frontmatter:{sidebar_position:4}},{id:34,title:"Testing",routePath:"/module-tools/api/config/testing",toc:[{id:"jest-3",text:"jest",depth:2},{id:"transformer-3",text:"transformer",depth:2}],content:"TESTING\n\n\u672c\u7ae0\u63cf\u8ff0\u4e86\u6d4b\u8bd5\u76f8\u5173\u7684\u914d\u7f6e\u3002\n\n\u9700\u8981\u5148\u901a\u8fc7 pnpm run new \u542f\u7528 \u5355\u5143\u6d4b\u8bd5 \u529f\u80fd\u3002\n\n\nJEST\n\n * \u7c7b\u578b\uff1a Object | Function\n * \u9ed8\u8ba4\u503c\uff1a{}\n\n\u5bf9\u5e94 Jest \u7684\u914d\u7f6e\uff0c\u5f53\u4e3a Object \u7c7b\u578b\u65f6\uff0c\u53ef\u4ee5\u914d\u7f6e Jest \u6240\u652f\u6301\u7684\u6240\u6709\u5e95\u5c42\u914d\u7f6e \u3002\n\n\n\nexport default defineConfig({\n  testing: {\n    jest: {\n      testTimeout: 10000,\n    },\n  },\n});\n\n\n\u503c\u4e3a Function \u7c7b\u578b\u65f6\uff0c\u9ed8\u8ba4\u914d\u7f6e\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\u4f20\u5165\uff0c\u9700\u8981\u8fd4\u56de\u65b0\u7684 Jest \u914d\u7f6e\u5bf9\u8c61\u3002\n\n\n\nexport default defineConfig({\n  testing: {\n    jest: options => {\n      return {\n        ...options,\n        testTimeout: 10000,\n      };\n    },\n  },\n});\n\n\n\nTRANSFORMER\n\n * \u7c7b\u578b\uff1a'babel-jest' | 'ts-jest'\n * \u9ed8\u8ba4\u503c\uff1a'babel-jest'\n\n\u914d\u7f6e\u6267\u884c\u6d4b\u8bd5\u7684\u65f6\u5019\u5bf9\u4e8e\u6e90\u7801\u7684\u7f16\u8bd1\u5de5\u5177\uff1a babel-jest \u6216 ts-jest\u3002\u9ed8\u8ba4\u4f7f\u7528 babel-jest\u3002\n\nbabel-jest \u4e5f\u53ef\u4ee5\u7f16\u8bd1 TS \u6587\u4ef6\uff0c\u4f46\u4e0d\u4f1a\u7c7b\u578b\u62a5\u9519\uff0c\u5982\u679c\u4f60\u9700\u8981\u8dd1\u6d4b\u8bd5\u7684\u65f6\u5019\u5bf9 TS \u7c7b\u578b\u8fdb\u884c\u6821\u9a8c\uff0c\u90a3\u4e48\u8bf7\u4f7f\u7528 ts-jest\u3002",frontmatter:{sidebar_position:5}},{id:35,title:"index",routePath:"/module-tools/api/",toc:[],content:"INDEX",frontmatter:{overview:!0,sidebar_label:"\u6982\u89c8",sidebar_position:1}},{id:36,title:"Plugin Hooks",routePath:"/module-tools/api/plugin-api/plugin-hooks",toc:[{id:"\u6784\u5efa\u94a9\u5b50-1",text:"\u6784\u5efa\u94a9\u5b50",depth:2},{id:"beforebuild-3",text:"beforeBuild",depth:3},{id:"beforebuildtask-3",text:"beforeBuildTask",depth:3},{id:"afterbuildtask-3",text:"afterBuildTask",depth:3},{id:"afterbuild-3",text:"afterBuild",depth:3},{id:"buildplatform-\u94a9\u5b50-1",text:"buildPlatform \u94a9\u5b50",depth:2},{id:"registerbuildplatform-3",text:"registerBuildPlatform",depth:3},{id:"beforebuildplatform-3",text:"beforeBuildPlatform",depth:3},{id:"buildplatform-3",text:"buildPlatform",depth:3},{id:"afterbuildplatform-3",text:"afterBuildPlatform",depth:3},{id:"\u8c03\u8bd5\u94a9\u5b50-1",text:"\u8c03\u8bd5\u94a9\u5b50",depth:2},{id:"registerdev-3",text:"registerDev",depth:3},{id:"beforedev-3",text:"beforeDev",depth:3},{id:"beforeafterdevmenu-3",text:"(before|after)DevMenu",depth:3},{id:"beforedevtask-3",text:"beforeDevTask",depth:3},{id:"afterdev-3",text:"afterDev",depth:3}],content:"PLUGIN HOOKS\n\n\u672c\u7ae0\u4ecb\u7ecd\u5173\u4e8e module-tools \u652f\u6301\u7684\u751f\u547d\u5468\u671f\u94a9\u5b50\u3002\n\n\u76ee\u524d\u4e3b\u8981\u5305\u542b\u4e24\u7c7b\u751f\u547d\u5468\u671f\u94a9\u5b50\uff1a\n\n * \u6784\u5efa\u94a9\u5b50\uff1a\u4ec5\u5728\u6267\u884c build \u547d\u4ee4\u6784\u5efa\u6e90\u7801\u4ea7\u7269\u65f6\u89e6\u53d1\u3002\n * buildPlatform \u94a9\u5b50\uff1a\u4ec5\u5728\u6267\u884c build --platform \u547d\u4ee4\u751f\u6210\u5176\u4ed6\u6784\u5efa\u4ea7\u7269\u65f6\u89e6\u53d1\u3002\n * \u8c03\u8bd5\u94a9\u5b50\uff1a\u8fd0\u884c dev \u547d\u4ee4\u65f6\u4f1a\u89e6\u53d1\u7684\u94a9\u5b50\u3002\n\n\n\u6784\u5efa\u94a9\u5b50\n\n\u5728\u6267\u884c build \u547d\u4ee4\u7684\u65f6\u5019\uff0c\u4f1a\u6309\u7167\u987a\u5e8f\u89e6\u53d1\u4ee5\u4e0b Hooks\uff1a\n\n * beforeBuild\n * beforeBuildTask\n * afterBuildTask\n * afterBuild\n\n\nBEFOREBUILD\n\n\u6267\u884c\u6574\u4f53\u6784\u5efa\u6d41\u7a0b\u4e4b\u524d\u89e6\u53d1\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      beforeBuild(options: Options): Return {\n        return options.config;\n      },\n    };\n  },\n});\n\n\n\u53c2\u6570\u548c\u8fd4\u56de\u503c\u7c7b\u578b\uff1a\n\ntype Options = {\n  options: { config: BuildConfig; cliOptions: BuildCommandOptions };\n};\n\nexport interface BuildCommandOptions {\n  config: string;\n  clear?: boolean;\n  dts?: boolean;\n  platform?: boolean | string[];\n  tsconfig: string;\n  watch?: boolean;\n}\n\ntype Return = BuildConfig;\n\n\n> BuildConfig \u7c7b\u578b\u53c2\u8003 API \u914d\u7f6e\n\n\nBEFOREBUILDTASK\n\n\u6839\u636e\u6784\u5efa\u914d\u7f6e\uff0cModule Tools \u4f1a\u5c06\u6574\u4f53\u6784\u5efa\u5206\u6210\u591a\u4e2a\u5b50\u6784\u5efa\u4efb\u52a1\u3002\u8be5 Hook \u5c06\u4f1a\u5728\u6bcf\u4e00\u4e2a\u6784\u5efa\u5b50\u4efb\u52a1\u4e4b\u524d\u89e6\u53d1\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      beforeBuildTask(config: BaseBuildConfig): BaseBuildConfig {\n        return config;\n      },\n    };\n  },\n});\n\n\n\u53c2\u6570\u548c\u8fd4\u56de\u503c\u7c7b\u578b\uff1a\n\nBaseBuildConfig \u7c7b\u578b\u53c2\u8003 API \u914d\u7f6e\u3002\n\n\nAFTERBUILDTASK\n\n\u6bcf\u4e00\u4e2a\u6784\u5efa\u5b50\u4efb\u52a1\u7ed3\u675f\u4e4b\u540e\u89e6\u53d1\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      afterBuildTask(options: BuildTaskResult): void {\n        // ...\n      },\n    };\n  },\n});\n\n\n\u53c2\u6570\u548c\u8fd4\u56de\u503c\u7c7b\u578b\uff1a\n\nexport interface BuildTaskResult {\n  status: 'success' | 'fail';\n  message?: string;\n  config: BaseBuildConfig;\n}\n\n\n\nAFTERBUILD\n\n\u6574\u4f53\u6784\u5efa\u6d41\u7a0b\u7ed3\u675f\u4e4b\u540e\u89e6\u53d1\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      afterBuild(options: BuildResult): void {\n        // ...\n      },\n    };\n  },\n});\n\n\n\u53c2\u6570\u548c\u8fd4\u56de\u503c\u7c7b\u578b\uff1a\n\nexport interface BuildResult {\n  status: 'success' | 'fail';\n  message?: string;\n  config: BuildConfig;\n  commandOptions: BuildCommandOptions;\n  totalDuration: number;\n}\n\n\n\nBUILDPLATFORM \u94a9\u5b50\n\nmodule-tools \u8fd8\u63d0\u4f9b\u4e86 build --platform \u547d\u4ee4\u6765\u6267\u884c\u7279\u5b9a\u7684\u6784\u5efa\u4efb\u52a1\u3002\n\n\u4f8b\u5982\u5728\u5b89\u88c5\u4e86 Storybook \u63d2\u4ef6\u540e\uff0c\u5c31\u53ef\u4ee5\u6267\u884c build --platform \u6216\u8005 build --platform storybook \u6765\u6267\u884c\nStorybook \u7684\u6784\u5efa\u4efb\u52a1\u3002\u56e0\u4e3a Storybook \u63d2\u4ef6\u57fa\u4e8e buildPlatform Hooks \u5b9e\u73b0\u4e86\u8be5\u529f\u80fd\u3002\n\n\u5728\u6267\u884c build --platform \u540e\u4f1a\u6309\u7167\u4ee5\u4e0b\u987a\u5e8f\u89e6\u53d1 Hooks\uff1a\n\n * registerBuildPlatform\n * beforeBuildPlatform\n * buildPlatform\n * afterBuildPlatform\n\n\nREGISTERBUILDPLATFORM\n\n\u83b7\u53d6\u5728\u6267\u884c build --platform \u547d\u4ee4\u65f6\u5019\u9700\u8981\u8fd0\u884c\u7684\u4efb\u52a1\u4fe1\u606f\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      registerBuildPlatform(): RegisterBuildPlatformResult {\n        // ...\n        return {\n          platform: 'stroybook',\n          build() {\n            // run storybook logic\n          },\n        };\n      },\n    };\n  },\n});\n\n\n\u5165\u53c2\u548c\u8fd4\u56de\u7684\u53c2\u6570\u7c7b\u578b\uff1a\n\nexport interface RegisterBuildPlatformResult {\n  platform: string | string[];\n  build: (\n    currentPlatform: string, // \u5f53\u524d\u8fd0\u884c\u7684 platform \u6784\u5efa\u4efb\u52a1\n    context: { isTsProject: boolean },\n  ) => void | Promise<void>;\n}\n\n\n\nBEFOREBUILDPLATFORM\n\n\u5f53\u6267\u884c build --platform \u547d\u4ee4\u7684\u65f6\u5019\uff0c\u4f1a\u89e6\u53d1\u6240\u6709\u5df2\u6ce8\u518c\u7684\u6784\u5efa\u4efb\u52a1\u3002beforeBuildPlatform \u4f1a\u5728\u6267\u884c\u6574\u4f53\u7684\u6784\u5efa\u4efb\u52a1\u4e4b\u524d\u89e6\u53d1\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      beforeBuildPlatform(platforms: RegisterBuildPlatformResult[]): void {\n        console.info(`have ${platforms.length} platform tasks`);\n      },\n    };\n  },\n});\n\n\n\u5165\u53c2\u548c\u8fd4\u56de\u7684\u53c2\u6570\u7c7b\u578b\uff1a\n\nexport interface RegisterBuildPlatformResult {\n  platform: string | string[];\n  build: (\n    currentPlatform: string, // \u5f53\u524d\u8fd0\u884c\u7684 platform \u6784\u5efa\u4efb\u52a1\n    context: { isTsProject: boolean },\n  ) => void | Promise<void>;\n}\n\n\n\nBUILDPLATFORM\n\n\u5f53\u6267\u884c build --platform \u547d\u4ee4\u7684\u65f6\u5019\uff0c\u4f1a\u89e6\u53d1\u6240\u6709\u5df2\u6ce8\u518c\u7684\u6784\u5efa\u4efb\u52a1\u3002buildPlatform \u4f1a\u5728\u6bcf\u4e2a\u6784\u5efa\u4efb\u52a1\u6267\u884c\u4e4b\u524d\u89e6\u53d1\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      buildPlatform({ platform }: Options): void {\n        console.info(`current task is ${platform}`);\n      },\n    };\n  },\n});\n\n\n\u5165\u53c2\u548c\u8fd4\u56de\u7684\u53c2\u6570\u7c7b\u578b\uff1a\n\nexport interface Options {\n  platform: string;\n}\n\n\n\nAFTERBUILDPLATFORM\n\n\u5f53\u6267\u884c build --platform \u547d\u4ee4\u7684\u65f6\u5019\uff0c\u4f1a\u89e6\u53d1\u6240\u6709\u5df2\u6ce8\u518c\u7684\u6784\u5efa\u4efb\u52a1\u3002afterBuildPlatform \u4f1a\u5728\u6574\u4f53 platform\n\u6784\u5efa\u4efb\u52a1\u7ed3\u675f\u540e\u89e6\u53d1\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      afterBuildPlatform(result: BuildPlatformResult): void {\n        if (result.status === 'success') {\n          console.info(`all platform build task success`);\n        } else {\n          console.error(result.message);\n        }\n      },\n    };\n  },\n});\n\n\n\u5165\u53c2\u548c\u8fd4\u56de\u7684\u53c2\u6570\u7c7b\u578b\uff1a\n\nexport interface BuildPlatformResult {\n  status: 'success' | 'fail';\n  message: string | Error | null;\n}\n\n\n\n\u8c03\u8bd5\u94a9\u5b50\n\n\u5728\u6267\u884c dev \u547d\u4ee4\u7684\u65f6\u5019\uff0c\u4f1a\u6309\u7167\u987a\u5e8f\u89e6\u53d1\u4ee5\u4e0b Hooks\uff1a\n\n * registerDev: \u5728\u83b7\u53d6\u8c03\u8bd5\u529f\u80fd\u4fe1\u606f\u7684\u65f6\u5019\u89e6\u53d1\u3002\n * beforeDev: \u5f00\u59cb\u6267\u884c\u8c03\u8bd5\u6574\u4f53\u6d41\u7a0b\u4e4b\u524d\u89e6\u53d1\u3002\n * beforeDevMenu: \u51fa\u73b0\u8c03\u8bd5\u5217\u8868/\u83dc\u5355\u4e4b\u524d\u89e6\u53d1\u3002\n * afterDevMenu: \u9009\u62e9\u8c03\u8bd5\u5217\u8868/\u83dc\u5355\u9009\u9879\u540e\u89e6\u53d1\u3002\n * beforeDevTask: \u6267\u884c\u8c03\u8bd5\u4efb\u52a1\u4e4b\u524d\u89e6\u53d1\u3002\n * afterDev: \u6267\u884c dev \u6574\u4f53\u6d41\u7a0b\u6700\u540e\u89e6\u53d1\u3002\n\n\nREGISTERDEV\n\n\u6ce8\u518c\u8c03\u8bd5\u5de5\u5177\u76f8\u5173\u7684\u6570\u636e\u3002\u4e3b\u8981\u5305\u542b\uff1a\n\n * \u8c03\u8bd5\u5de5\u5177\u7684\u540d\u79f0\n * \u663e\u793a\u5728\u83dc\u5355\u5217\u8868\u4e2d\u7684\u9879\u76ee\u540d\u79f0\u4ee5\u53ca\u5bf9\u5e94\u7684\u503c\u3002\n * dev \u5b50\u547d\u4ee4\u7684\u5b9a\u4e49\u3002\n * \u662f\u5426\u5728\u8fd0\u884c\u8c03\u8bd5\u4efb\u52a1\u4e4b\u524d\u6267\u884c\u6e90\u7801\u6784\u5efa\n * \u6267\u884c\u8c03\u8bd5\u4efb\u52a1\u7684\u51fd\u6570\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      registerDev() {\n        return {\n          // \u8c03\u8bd5\u5de5\u5177\u540d\u79f0\n          name: 'storybook',\n          // \u83dc\u5355\u663e\u793a\u5185\u5bb9\n          menuItem: {\n            name: 'Storybook',\n            value: 'storybook',\n          },\n          // \u5b9a\u4e49\u7684 dev \u5b50\u547d\u4ee4\n          subCommands: ['storybook', 'story'],\n          async action() {\n            // dev logic\n          },\n        };\n      },\n    };\n  },\n});\n\n\n\u5165\u53c2\u548c\u8fd4\u56de\u7684\u53c2\u6570\u7c7b\u578b\uff1a\n\nexport interface DevToolData {\n  name: string;\n  subCommands?: string[];\n  menuItem?: {\n    name: string;\n    value: string;\n  };\n  // \u5728 dev \u547d\u4ee4\u6267\u884c\u4e4b\u524d\uff0c\u662f\u5426\u5173\u95ed\u6e90\u7801\u6784\u5efa\n  disableRunBuild?: boolean;\n  action: (\n    options: { port?: string },\n    context: { isTsProject?: boolean },\n  ) => void | Promise<void>;\n}\n\n\n\u5728\u8c03\u8bd5\u9879\u76ee\u7684\u65f6\u5019\uff0c\u5982\u679c\u4ec5\u9700\u8981\u5bf9\u4ee3\u7801\u529f\u80fd\u8fdb\u884c\u8c03\u8bd5\u7684\u8bdd\uff0c\u4e5f\u8bb8\u53ef\u4ee5\u8bbe\u7f6e disableRunBuild: true \u6765\u5173\u95ed\u5bf9\u4e8e\u6e90\u7801\u6267\u884c\uff08\u76d1\u542c\u6a21\u5f0f\u4e0b\u7684\uff09\u6784\u5efa\u4efb\u52a1\u3002\n\n\u76ee\u524d\u652f\u6301\u7684 Storybook \u8c03\u8bd5\u652f\u6301\u5c06\u6e90\u7801\u4ea7\u7269\u4f5c\u4e3a\u8c03\u8bd5\u5bf9\u8c61\uff0c\u56e0\u6b64\u5728 Storybook \u63d2\u4ef6\u4e2d disableRunBuild: false\u3002\n\n\nBEFOREDEV\n\n\u5728\u6536\u96c6\u5b8c\u6240\u6709\u8c03\u8bd5\u5de5\u5177\u5143\u6570\u636e\u540e\uff0c\u6267\u884c dev \u4efb\u52a1\u4e4b\u524d\u89e6\u53d1\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      beforeDev(metas: DevToolData[]) {\n        console.info(`have ${metas.length} dev tools`);\n      },\n    };\n  },\n});\n\n\n\u5165\u53c2\u548c\u8fd4\u56de\u7684\u53c2\u6570\u7c7b\u578b\uff1a\n\nexport interface DevToolData {\n  name: string;\n  subCommands?: string[];\n  menuItem?: {\n    name: string;\n    value: string;\n  };\n  // \u5728 dev \u547d\u4ee4\u6267\u884c\u4e4b\u524d\uff0c\u662f\u5426\u5173\u95ed\u6e90\u7801\u6784\u5efa\n  disableRunBuild?: boolean;\n  action: (\n    options: { port?: string },\n    context: { isTsProject?: boolean },\n  ) => void | Promise<void>;\n}\n\n\n\n(BEFORE|AFTER)DEVMENU\n\nbeforeDevMenu \u5728\u51fa\u73b0\u8c03\u8bd5\u5217\u8868/\u83dc\u5355\u4e4b\u524d\u89e6\u53d1\u3002\u63a5\u6536 inquirer question \u4f5c\u4e3a\u53c2\u6570\u3002\u9ed8\u8ba4\u503c\u4e3a\uff1a\n\nconst question = [\n  {\n    name: 'choiceDevTool',\n    message: '\u9009\u62e9\u8c03\u8bd5\u5de5\u5177',\n    type: 'list',\n    // \u6ce8\u518c\u7684\u8c03\u8bd5\u4fe1\u606f\n    choices,\n  },\n];\n\n\nafterDevMenu \u9009\u62e9\u8c03\u8bd5\u5217\u8868/\u83dc\u5355\u9009\u9879\u540e\u89e6\u53d1\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      beforeDevMenu(questions) {\n        questions[0].message += '!';\n        return questions; // required\n      },\n      afterDevMenu(options: Options) {\n        console.info(`choise ${options.result.choiceDevTool} dev tools`);\n      },\n    };\n  },\n});\n\n\n\u5165\u53c2\u548c\u8fd4\u56de\u7684\u53c2\u6570\u7c7b\u578b\uff1a\n\nexport type { QuestionCollection } from 'inquirer';\n\nexport interface Options {\n  result: PromptResult;\n  devTools: DevToolData[];\n}\n\nexport type PromptResult = { choiceDevTool: string };\nexport interface DevToolData {\n  name: string;\n  subCommands?: string[];\n  menuItem?: {\n    name: string;\n    value: string;\n  };\n  // \u5728 dev \u547d\u4ee4\u6267\u884c\u4e4b\u524d\uff0c\u662f\u5426\u5173\u95ed\u6e90\u7801\u6784\u5efa\n  disableRunBuild?: boolean;\n  action: (\n    options: { port?: string },\n    context: { isTsProject?: boolean },\n  ) => void | Promise<void>;\n}\n\n\n\nBEFOREDEVTASK\n\n\u6267\u884c\u8c03\u8bd5\u4efb\u52a1\u4e4b\u524d\u89e6\u53d1\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      beforeDevTask(currentDevData: DevToolData) {\n        console.info(`${currentDevData.name} running`);\n      },\n    };\n  },\n});\n\n\n\u5165\u53c2\u548c\u8fd4\u56de\u7684\u53c2\u6570\u7c7b\u578b\uff1a\n\nexport interface DevToolData {\n  name: string;\n  subCommands?: string[];\n  menuItem?: {\n    name: string;\n    value: string;\n  };\n  // \u5728 dev \u547d\u4ee4\u6267\u884c\u4e4b\u524d\uff0c\u662f\u5426\u5173\u95ed\u6e90\u7801\u6784\u5efa\n  disableRunBuild?: boolean;\n  action: (\n    options: { port?: string },\n    context: { isTsProject?: boolean },\n  ) => void | Promise<void>;\n}\n\n\n\nAFTERDEV\n\n\u5728\u4e2d\u65ad\u8c03\u8bd5\u4efb\u52a1\u8fdb\u7a0b\u65f6\u89e6\u53d1\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      afterDev() {\n        console.info(`exit!`);\n      },\n    };\n  },\n});\n",frontmatter:{}},{id:37,title:"\u5904\u7406\u9759\u6001\u8d44\u6e90\u6587\u4ef6",routePath:"/module-tools/guide/advance/asset",toc:[{id:"\u9ed8\u8ba4\u884c\u4e3a-1",text:"\u9ed8\u8ba4\u884c\u4e3a",depth:2},{id:"\u8bbe\u7f6e-cdn-\u524d\u7f00-1",text:"\u8bbe\u7f6e CDN \u524d\u7f00",depth:2}],content:"\u5904\u7406\u9759\u6001\u8d44\u6e90\u6587\u4ef6\n\n\u6a21\u5757\u5de5\u7a0b\u4f1a\u5bf9\u4ee3\u7801\u4e2d\u4f7f\u7528\u7684\u9759\u6001\u8d44\u6e90\u8fdb\u884c\u5904\u7406\u3002\u5982\u679c\u9700\u8981\u914d\u7f6e\uff0c\u5219\u53ef\u4ee5\u4f7f\u7528 buildConfig.asset API\u3002\n\n\n\u9ed8\u8ba4\u884c\u4e3a\n\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6a21\u5757\u5de5\u7a0b\u5bf9\u4e8e\u4ee5\u4e0b\u9759\u6001\u8d44\u6e90\u4f1a\u8fdb\u884c\u5904\u7406\uff1a\n\n * '.svg'\u3001'.png'\u3001'.jpg'\u3001'.jpeg'\u3001'.gif'\u3001'.webp'\n * '.ttf'\u3001'.otf'\u3001'.woff'\u3001'.woff2'\u3001'.eot'\n * '.mp3'\u3001'.mp4'\u3001'.webm'\u3001'.ogg'\u3001'.wav'\u3001'.flac'\u3001'.aac'\u3001'.mov'\n\n\u5bf9\u4e8e\u9759\u6001\u6587\u4ef6\u7684\u5904\u7406\uff0c\u6a21\u5757\u5de5\u7a0b\u76ee\u524d\u652f\u6301\u7684\u529f\u80fd\u6709\uff1a\n\n * \u8bbe\u7f6e\u9759\u6001\u8d44\u6e90\u8def\u5f84\u4e3a ./assets\u3002\n * \u5bf9\u4e8e\u8d85\u8fc7 10kb \u7684\u6587\u4ef6\u4f1a\u5185\u8054\u5230\u4ee3\u7801\u4e2d\u3002\n\n\u8ba9\u6211\u4eec\u770b\u4e0b\u9762\u7684\u4f8b\u5b50\uff1a\n\n<CH.Spotlight>\n\n\n//...\n\n\n--------------------------------------------------------------------------------\n\n\u9879\u76ee\u6e90\u4ee3\u7801\u3002\n\n\n//...\n\n\n--------------------------------------------------------------------------------\n\n\u5982\u679c bg.png \u7684\u5927\u5c0f\u5c0f\u4e8e 10 kb\uff0c\u5219\u6b64\u65f6\u4ea7\u7269\u76ee\u5f55\u7ed3\u6784\u548c\u4ea7\u7269\u5185\u5bb9\u4e3a\u3002\n\n<CH.Code>\n\n./dist\n\u2514\u2500\u2500 asset.js\n\n\n--------------------------------------------------------------------------------\n\nvar bg_default = 'data:image/png;base64,';\nconsole.info(bg_default);\n\n\n</CH.Code>\n\n\u5982\u679c bg.png \u7684\u5927\u5c0f\u5927\u4e8e 10 kb\uff0c\u5219\u6b64\u65f6\u4ea7\u7269\u76ee\u5f55\u7ed3\u6784\u548c\u4ea7\u7269\u5185\u5bb9\u4e3a\u3002\n\n<CH.Code>\n\n./dist\n\u251c\u2500\u2500 asset.js\n\u2514\u2500\u2500 assets\n    \u2514\u2500\u2500 bg.13e2aba2.png\n\n\n--------------------------------------------------------------------------------\n\nvar bg_default = 'assets/bg.13e2aba2.png';\nconsole.info(bg_default);\n\n\n</CH.Code>\n\n</CH.Spotlight>\n\n\u5f53\u60f3\u8981\u4fee\u6539\u9ed8\u8ba4\u884c\u4e3a\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b API\uff1a\n\n * asset.path\uff1a\u4fee\u6539\u9759\u6001\u8d44\u6e90\u6587\u4ef6\u8f93\u51fa\u8def\u5f84\u3002\n * asset.limit\uff1a\u4fee\u6539\u5185\u8054\u9759\u6001\u8d44\u6e90\u6587\u4ef6\u7684\u9608\u503c\u3002\n\n\n\u8bbe\u7f6e CDN \u524d\u7f00\n\n\u5982\u679c\u9879\u76ee\u8fd0\u884c\u7684\u73af\u5883\u662f\u5728\u6d4f\u89c8\u5668\u4e0b\uff0c\u6211\u4eec\u6709\u53ef\u80fd\u9700\u8981\u9759\u6001\u8d44\u6e90\u6258\u7ba1\u81f3 CDN\uff0c\u7136\u540e\u5728\u751f\u4ea7\u73af\u5883\u4f7f\u7528\u3002\n\n\u90a3\u4e48\u6b64\u65f6\u9ed8\u8ba4\u751f\u6210\u7684\u6784\u5efa\u4ea7\u7269\u4e2d\uff0c\u6211\u4eec\u9700\u8981\u5728\u9759\u6001\u8d44\u6e90\u6587\u4ef6\u7684\u8def\u5f84\u524d\u9762\u589e\u52a0 CDN \u7684\u57fa\u7840\u8def\u5f84\u3002\u8fd8\u662f\u770b\u4e00\u4e2a\u4f8b\u5b50\uff1a\n\n<CH.Spotlight>\n\n\n//...\n\n\n--------------------------------------------------------------------------------\n\n\u9879\u76ee\u6e90\u4ee3\u7801\u3002\n\n\n\n--------------------------------------------------------------------------------\n\nmodern.config \u914d\u7f6e\u4e3a\u3002\n\nexport default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    asset: {\n      publicPath: 'https://cdn/',\n    },\n  },\n});\n\n\n--------------------------------------------------------------------------------\n\n\u5982\u679c bg.png \u7684\u5927\u5c0f\u5927\u4e8e 10 kb\uff0c\u5219\u6b64\u65f6\u4ea7\u7269\u5185\u5bb9\u4e3a\u3002\n\n(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory();\n  else if (typeof define === 'function' && define.amd) define([], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory();\n})(this, function () {\n  'use strict';\n  var bg_default = 'http://cdn/assets/bg.13e2aba2.png';\n  // src/asset.tsx\n  console.info(bg_default);\n});\n\n\n</CH.Spotlight>",frontmatter:{sidebar_position:7}},{id:38,title:"\u6784\u5efa umd \u4ea7\u7269",routePath:"/module-tools/guide/advance/build-umd",toc:[{id:"umd-\u4ea7\u7269\u7684\u7b2c\u4e09\u65b9\u4f9d\u8d56\u5904\u7406-1",text:"umd \u4ea7\u7269\u7684\u7b2c\u4e09\u65b9\u4f9d\u8d56\u5904\u7406",depth:2},{id:"\u66f4\u6539\u9879\u76ee\u7684\u5168\u5c40\u53d8\u91cf\u540d\u79f0-1",text:"\u66f4\u6539\u9879\u76ee\u7684\u5168\u5c40\u53d8\u91cf\u540d\u79f0",depth:2}],content:"\u6784\u5efa UMD \u4ea7\u7269\n\numd \u5168\u79f0\u4e3a Universal Module Definition\uff0c\u8fd9\u79cd\u683c\u5f0f\u7684 JS \u6587\u4ef6\u53ef\u4ee5\u8fd0\u884c\u5728\u591a\u4e2a\u8fd0\u884c\u73af\u5883\uff1a\n\n * \u6d4f\u89c8\u5668\u73af\u5883\uff1a\u57fa\u4e8e AMD \u89c4\u8303\u8fdb\u884c\u6a21\u5757\u52a0\u8f7d\n * Node.js \u73af\u5883\uff1a\u57fa\u4e8e CommonJS \u8fdb\u884c\u6a21\u5757\u52a0\u8f7d\n * \u5176\u4ed6\u60c5\u51b5\uff1a\u5c06\u6a21\u5757\u6302\u8f7d\u5728\u5168\u5c40\u5bf9\u8c61\u4e0a\u3002\n\n\u56e0\u6b64\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u7684\u65b9\u5f0f\uff0c\u5c06\u9879\u76ee\u7684\u6784\u5efa\u4ea7\u7269\u6307\u5b9a\u4e3a umd \u4ea7\u7269\uff1a\n\nexport default defineConfig({\n  buildConfig: {\n    format: 'umd',\n  },\n});\n\n\n\nUMD \u4ea7\u7269\u7684\u7b2c\u4e09\u65b9\u4f9d\u8d56\u5904\u7406\n\n\u5728 \u3010\u5982\u4f55\u5904\u7406\u7b2c\u4e09\u65b9\u4f9d\u8d56\u3011 \u7ae0\u8282\u4e2d\uff0c\u6211\u4eec\u77e5\u9053\u53ef\u4ee5\u901a\u8fc7 autoExternals \u548c externals API \u6765\u63a7\u5236\u9879\u76ee\u662f\u5426\u5bf9\u7b2c\u4e09\u65b9\u4f9d\u8d56\u6253\u5305\u3002 \u56e0\u6b64\u5728\u6784\u5efa\numd \u4ea7\u7269\u7684\u8fc7\u7a0b\u4e2d\uff0c\u6211\u4eec\u4e5f\u53ef\u4ee5\u8fd9\u6837\u4f7f\u7528\uff1a\n\n<CH.Spotlight>\n\n{\n  \"dependencies\": {\n    \"react\": \"^17\"\n    //...other dependencies\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\n\u5982\u679c\u9879\u76ee\u4f9d\u8d56\u4e86 react\u3002\n\n{\n  \"dependencies\": {\n    \"react\": \"^17\"\n    //...other dependencies\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\nmodern.config.ts \u914d\u7f6e\u3002\n\nexport default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    autoExternal: false,\n    externals: ['react'],\n  },\n});\n\n\n--------------------------------------------------------------------------------\n\n\u5f53\u6e90\u7801\u4e2d\u4f7f\u7528\u4e86 react \u4f9d\u8d56\u3002\n\n\nconsole.info(React);\n\n\n--------------------------------------------------------------------------------\n\n\u6b64\u65f6\u4ea7\u7269\u4e2d\u4e0d\u4f1a\u5c06 react \u4ee3\u7801\u6253\u5305\u5230\u4ea7\u7269\u4e2d\u3002\n\n(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory(exports, require('react'));\n  else if (typeof define === 'function' && define.amd)\n    define(['exports', 'react'], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory((global.index = {}), global.react);\n})(this, function (exports, _react) {\n  'use strict';\n  Object.defineProperty(exports, '__esModule', {\n    value: true,\n  });\n  _react = /*#__PURE__*/ _interopRequireDefault(_react);\n  function _interopRequireDefault(obj) {\n    return obj && obj.__esModule\n      ? obj\n      : {\n          default: obj,\n        };\n  }\n  console.info(_react.default);\n});\n\n\n</CH.Spotlight>\n\n\u901a\u8fc7\u4e0a\u9762\u7684\u4f8b\u5b50\u6211\u4eec\u77e5\u9053\uff0c\u5f53\u4f7f\u7528 autoExternal \u548c externals API \u540e\uff1a\n\n * \u5728 Node.js \u73af\u5883\u4e0b\uff0c\u53ef\u4ee5\u901a\u8fc7 require('react') \u83b7\u53d6 react \u4f9d\u8d56\u3002\n * \u5728 \u6d4f\u89c8\u5668\u73af\u5883\u4e0b\uff0c\u53ef\u4ee5\u901a\u8fc7 global.react \u83b7\u53d6 react \u4f9d\u8d56\u3002\n\n\u7136\u800c\u5728\u6d4f\u89c8\u5668\u73af\u5883\u4e0b\uff0c\u83b7\u53d6\u7b2c\u4e09\u65b9\u4f9d\u8d56\u7684\u65f6\u5019\uff0c\u5168\u5c40\u53d8\u91cf\u540d\u79f0\u4e0d\u4e00\u5b9a\u4e0e\u4f9d\u8d56\u540d\u79f0\u5b8c\u5168\u76f8\u540c\uff0c\u6b64\u65f6\u5c31\u8981\u4f7f\u7528 buildConfig.umdGlobals API\u3002\n\n\u8fd8\u662f\u4f7f\u7528\u4e4b\u524d\u7684\u4f8b\u5b50\uff0c\u5f53 react \u4f9d\u8d56\u4ee5 windows.React \u6216\u8005 global.React \u5168\u5c40\u53d8\u91cf\u7684\u5f62\u5f0f\u5b58\u5728\u4e8e\u6d4f\u89c8\u5668\u73af\u5883\u4e0b\uff0c\u90a3\u4e48\u6b64\u65f6\uff1a\n\n<CH.Spotlight>\n\n{\n  \"devDependencies\": {\n    \"react\": \"^17\"\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\n\u5982\u679c\u9879\u76ee\u4f9d\u8d56\u4e86 react\u3002\n\n{\n  \"devDependencies\": {\n    \"react\": \"^17\"\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\nmodern.config.ts \u914d\u7f6e\u3002\n\nexport default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    umdGlobals: {\n      react: 'React',\n    },\n  },\n});\n\n\n--------------------------------------------------------------------------------\n\n\u5f53\u6e90\u7801\u4e2d\u4f7f\u7528\u4e86 react \u4f9d\u8d56\u3002\n\n\nconsole.info(React);\n\n\n--------------------------------------------------------------------------------\n\n\u6b64\u65f6\u6211\u4eec\u4f1a\u770b\u5230\u8fd9\u6837\u7684\u4ea7\u7269\u4ee3\u7801\u3002\n\n(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory();\n  else if (typeof define === 'function' && define.amd) define([], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory();\n})(this, function () {\n  // ...\n  // libuild:globals:react\n  var require_react = __commonJS({\n    'libuild:globals:react'(exports, module1) {\n      module1.exports = Function('return this')()['React'];\n    },\n  });\n  // src/index.ts\n  var import_react = __toESM(require_react());\n  console.info(import_react.default);\n});\n\n\n</CH.Spotlight>\n\n\u6b64\u65f6\u9879\u76ee\u5c31\u53ef\u4ee5\u8fd0\u884c\u5728\u6d4f\u89c8\u5668\u4e2d\uff0c\u5e76\u4f7f\u7528\u5b58\u5728\u4e8e\u5168\u5c40\u5bf9\u8c61\u4e0a\u7684 React \u53d8\u91cf\u4e86\u3002\n\n\n\u66f4\u6539\u9879\u76ee\u7684\u5168\u5c40\u53d8\u91cf\u540d\u79f0\n\n\u5f53\u6211\u4eec\u5c06\u4e0b\u9762\u7684\u4ee3\u7801\u6253\u5305\u6210 umd \u4ea7\u7269\u5e76\u8fd0\u884c\u5728\u6d4f\u89c8\u5668\u7684\u65f6\u5019\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 window.index \u6765\u4f7f\u7528\u8be5\u6a21\u5757\u3002\n\nexport default () => {\n  console.info('hello world');\n};\n\n\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u4ee5\u6e90\u7801\u6587\u4ef6\u540d\u79f0\u4f5c\u4e3a\u8be5\u6a21\u5757\u5728\u6d4f\u89c8\u5668\u91cc\u5168\u5c40\u53d8\u91cf\u7684\u540d\u79f0\u3002\u5bf9\u4e8e\u4e0a\u9762\u7684\u4f8b\u5b50\uff0c\u5176\u4ea7\u7269\u5185\u5bb9\u5982\u4e0b\uff1a\n\n(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory(exports);\n  else if (typeof define === 'function' && define.amd)\n    define(['exports'], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory((global.index = {}));\n})(this, function (exports) {\n  //...\n});\n\n\n\u5982\u679c\u9700\u8981\u4fee\u6539\u5b83\uff0c\u5219\u9700\u8981\u4f7f\u7528 buildConfig.umdModuleName API\u3002\n\n\u5f53\u4f7f\u7528\u8be5 API \u540e\uff1a\n\nexport default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    umdModuleName: 'myLib',\n  },\n});\n\n\n\u6b64\u65f6\u6784\u5efa\u4ea7\u7269\u7684\u5185\u5bb9\u4e3a\uff1a\n\n(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory(exports);\n  else if (typeof define === 'function' && define.amd)\n    define(['exports'], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory((global.myLib = {}));\n})(this, function (exports) {\n  //...\n});\n",frontmatter:{sidebar_position:5}},{id:39,title:"\u4f7f\u7528 Copy \u5de5\u5177",routePath:"/module-tools/guide/advance/copy",toc:[{id:"\u4e86\u89e3-copy-api-1",text:"\u4e86\u89e3 Copy API",depth:2},{id:"api-\u8be6\u89e3-1",text:"API \u8be6\u89e3",depth:2},{id:"\u4e0d\u540c\u573a\u666f\u4f7f\u7528\u793a\u4f8b-3",text:"\u4e0d\u540c\u573a\u666f\u4f7f\u7528\u793a\u4f8b",depth:2},{id:"\u5c06\u6587\u4ef6\u590d\u5236\u6587\u4ef6-3",text:"\u5c06\u6587\u4ef6\u590d\u5236\u6587\u4ef6",depth:3},{id:"\u5c06\u6587\u4ef6\u590d\u5236\u5230\u76ee\u5f55-3",text:"\u5c06\u6587\u4ef6\u590d\u5236\u5230\u76ee\u5f55",depth:3},{id:"\u4ece\u76ee\u5f55\u590d\u5236\u5230\u76ee\u5f55-3",text:"\u4ece\u76ee\u5f55\u590d\u5236\u5230\u76ee\u5f55",depth:3},{id:"\u4ece\u76ee\u5f55\u5230\u6587\u4ef6-3",text:"\u4ece\u76ee\u5f55\u5230\u6587\u4ef6",depth:3},{id:"\u4f7f\u7528-glob-3",text:"\u4f7f\u7528 Glob",depth:3}],content:"\u4f7f\u7528 COPY \u5de5\u5177\n\n\u6a21\u5757\u5de5\u7a0b\u63d0\u4f9b\u4e86 Copy \u5de5\u5177\u7528\u4e8e\u5c06\u5df2\u7ecf\u5b58\u5728\u7684\u5355\u4e2a\u6587\u4ef6\u6216\u6574\u4e2a\u76ee\u5f55\u590d\u5236\u5230\u4ea7\u7269\u76ee\u5f55\u4e2d\u3002\u63a5\u4e0b\u6765\u6211\u4eec\u5b66\u4e60\u5982\u4f55\u4f7f\u7528\u5b83\u3002\n\n\n\u4e86\u89e3 COPY API\n\n\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 buildConfig.copy API \u6765\u4f7f\u7528 Copy \u5de5\u5177\uff0c\u5b83\u5305\u542b\u4ee5\u4e0b\u4e24\u4e2a\u4e3b\u8981\u914d\u7f6e\uff1a\n\n * patterns\n * options\n\n\u5728\u5f00\u59cb\u5b66\u4e60\u4e4b\u524d\u53ef\u4ee5\u5148\u82b1\u4e00\u4e9b\u65f6\u95f4\u4e86\u89e3\u5b83\u4eec\u3002\n\n\nAPI \u8be6\u89e3\n\ncopy.patterns \u7528\u4e8e\u5bfb\u627e\u590d\u5236\u7684\u6587\u4ef6\u4ee5\u53ca\u914d\u7f6e\u8f93\u51fa\u7684\u8def\u5f84\u3002\n\n\u5176\u4e2d patterns.from \u7528\u4e8e\u6307\u5b9a\u8981\u590d\u5236\u7684\u6587\u4ef6\u6216\u8005\u76ee\u5f55\u3002\u5b83\u63a5\u6536 Glob \u5f62\u5f0f\u5b57\u7b26\u4e32\u6216\u5177\u4f53\u8def\u5f84\u3002Glob \u5f62\u5f0f\u5b57\u7b26\u4e32\u662f\u6307 fast-glob\npattern-syntax\u3002\u56e0\u6b64\u6211\u4eec\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u4e24\u79cd\u65b9\u5f0f\u4f7f\u7528\u5b83\uff1a\n\nexport default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [\n        { from: './index.html', to: '' },\n        { from: './*.html', to: '' },\n      ],\n    },\n  },\n});\n\n\npatterns.context \u4e00\u822c\u548c patterns.from \u914d\u5408\u4f7f\u7528\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u5b83\u7684\u503c\u4e0e buildConfig.sourceDir\n\u76f8\u540c\uff0c\u56e0\u6b64\u6211\u4eec\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u65b9\u5f0f\u6307\u5b9a src/data.json \u6587\u4ef6\u4e3a\u8981\u590d\u5236\u7684\u6587\u4ef6\uff1a\n\n> \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cbuildConfig.sourceDir \u4e3a src\n\nexport default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [\n        { from: './data.json' to: ''},\n      ],\n    },\n  },\n});\n\n\n\u5f53\u6307\u5b9a\u7684\u6587\u4ef6\u4e0d\u5728\u6e90\u7801\u76ee\u5f55\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u4fee\u6539 context \u914d\u7f6e\u3002\u4f8b\u5982\u6307\u5b9a\u9879\u76ee\u76ee\u5f55\u4e0b\u7684 temp/index.html \u4e3a\u8981\u590d\u5236\u7684\u6587\u4ef6\uff1a\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [\n        {\n          from: './index.html',\n          context: path.join(__dirname, './temp')\n          to: '',\n        }\n      ],\n    },\n  },\n});\n\n\npatterns.to \u7528\u4e8e\u6307\u5b9a\u590d\u5236\u6587\u4ef6\u7684\u8f93\u51fa\u8def\u5f84\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u5b83\u7684\u503c\u4e3a buildConfig.outDir\u5bf9\u5e94\u7684\u503c\u3002\u56e0\u6b64\u6211\u4eec\u6309\u7167\u5982\u4e0b\u65b9\u5f0f\u5c06\nsrc/index.html \u590d\u5236\u5230 dist \u76ee\u5f55\u4e0b\uff1a\n\nexport default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [{ from: './index.html' }],\n    },\n  },\n});\n\n\n\u5f53\u6211\u4eec\u914d\u7f6e\u4e86 patterns.to \u7684\u65f6\u5019\uff1a\n\n * \u5982\u679c\u662f\u76f8\u5bf9\u8def\u5f84\uff0c\u5219\u8be5\u8def\u5f84\u4f1a\u76f8\u5bf9\u4e8e buildConfig.outDir \u8ba1\u7b97\u51fa\u590d\u5236\u6587\u4ef6\u8f93\u51fa\u7684\u7edd\u5bf9\u8def\u5f84\u3002\n * \u5982\u679c\u662f\u7edd\u5bf9\u8def\u5f84\uff0c\u5219\u4f1a\u76f4\u63a5\u4f7f\u7528\u8be5\u503c\u3002\n\n\u6700\u540e patterns.globOptions \u7528\u4e8e\u914d\u7f6e\u5bfb\u627e\u590d\u5236\u6587\u4ef6 globby \u5bf9\u8c61\uff0c\u5176\u914d\u7f6e\u53ef\u53c2\u8003\uff1a\n\n * globby.options\n\n\n\u4e0d\u540c\u573a\u666f\u4f7f\u7528\u793a\u4f8b\n\n\n\u5c06\u6587\u4ef6\u590d\u5236\u6587\u4ef6\n\nexport default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy file to file\n           */\n          {\n            from: './temp-1/a.png',\n            context: __dirname,\n            to: './temp-1/b.png',\n          },\n        ],\n      },\n    },\n  ],\n});\n\n\n\n\u5c06\u6587\u4ef6\u590d\u5236\u5230\u76ee\u5f55\n\nexport default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy file to dir\n           */\n          {\n            from: './temp-2/a.png',\n            context: __dirname,\n            to: './temp-2',\n          },\n        ],\n      },\n    },\n  ],\n});\n\n\n\n\u4ece\u76ee\u5f55\u590d\u5236\u5230\u76ee\u5f55\n\nexport default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy dir to dir\n           */\n          {\n            from: './temp-3/',\n            to: './temp-3',\n            context: __dirname,\n          },\n        ],\n        options: {\n          enableCopySync: true,\n        },\n      },\n    },\n  ],\n});\n\n\n\n\u4ece\u76ee\u5f55\u5230\u6587\u4ef6\n\nexport default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy dir to file\n           */\n          {\n            from: './temp-4/',\n            context: __dirname,\n            to: './temp-4/_index.html',\n          },\n        ],\n        options: {\n          enableCopySync: true,\n        },\n      },\n    },\n  ],\n});\n\n\n\n\u4f7f\u7528 GLOB\n\nexport default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy glob to dir\n           */\n          {\n            from: './*.html',\n            to: './temp-5',\n          },\n        ],\n        options: {\n          enableCopySync: true,\n        },\n      },\n    },\n    {\n      copy: {\n        patterns: [\n          /**\n           * copy glob to file\n           */\n          {\n            from: './*.html',\n            to: './temp-6/index.html',\n          },\n        ],\n        options: {\n          enableCopySync: true,\n        },\n      },\n    },\n  ],\n});\n",frontmatter:{sidebar_position:3}},{id:40,title:"\u5982\u4f55\u5904\u7406\u7b2c\u4e09\u65b9\u4f9d\u8d56",routePath:"/module-tools/guide/advance/external-dependency",toc:[{id:"\u7b2c\u4e09\u65b9\u4f9d\u8d56\u7684\u9ed8\u8ba4\u5904\u7406-1",text:"\u7b2c\u4e09\u65b9\u4f9d\u8d56\u7684\u9ed8\u8ba4\u5904\u7406",depth:2},{id:"\u6253\u5305\u7b2c\u4e09\u65b9\u4f9d\u8d56-1",text:"\u6253\u5305\u7b2c\u4e09\u65b9\u4f9d\u8d56",depth:2},{id:"\u5173\u95ed\u9ed8\u8ba4\u884c\u4e3a-1",text:"\u5173\u95ed\u9ed8\u8ba4\u884c\u4e3a",depth:3},{id:"\u6392\u9664\u6307\u5b9a\u7b2c\u4e09\u65b9\u4f9d\u8d56-1",text:"\u6392\u9664\u6307\u5b9a\u7b2c\u4e09\u65b9\u4f9d\u8d56",depth:3}],content:'\u5982\u4f55\u5904\u7406\u7b2c\u4e09\u65b9\u4f9d\u8d56\n\n\u4e00\u822c\u6765\u8bf4\uff0c\u9879\u76ee\u6240\u9700\u8981\u7684\u7b2c\u4e09\u65b9\u4f9d\u8d56\u53ef\u4ee5\u901a\u8fc7\u5305\u7ba1\u7406\u5668\u7684 install \u547d\u4ee4\u5b89\u88c5\uff0c\u5728\u5b89\u88c5\u7b2c\u4e09\u65b9\u4f9d\u8d56\u6210\u529f\u540e\uff0c\u8fd9\u4e9b\u7b2c\u4e09\u65b9\u4f9d\u8d56\u4e00\u822c\u4f1a\u51fa\u73b0\u5728\u9879\u76ee package.json\n\u7684 dependencies \u548c devDependencies \u4e0b\u3002\n\n{\n  "dependencies": {},\n  "devDependencies": {}\n}\n\n\n\u800c "dependencies" \u4e0b\u7684\u4f9d\u8d56\u901a\u5e38\u6765\u8bf4\u662f\u548c\u9879\u76ee\u4ee3\u7801\u4ee5\u53ca\u6784\u5efa\u76f8\u5173\u7684\uff0c\u5982\u679c\u8fd9\u4e9b\u7b2c\u4e09\u65b9\u4f9d\u8d56\u58f0\u660e\u5728 "devDependencies"\n\u4e0b\uff0c\u90a3\u4e48\u5728\u751f\u4ea7\u73af\u5883\u4e0b\u5c31\u4f1a\u51fa\u73b0\u7f3a\u5931\u4f9d\u8d56\u7684\u95ee\u9898\u3002\n\n\u9664\u4e86 "dependencies" \u4ee5\u5916\uff0c"peerDependencies" \u4e5f\u53ef\u4ee5\u58f0\u660e\u5728\u751f\u4ea7\u73af\u5883\u4e0b\u9700\u8981\u7684\u4f9d\u8d56\uff0c\u4e0d\u8fc7\u5b83\u66f4\u5f3a\u8c03\u9879\u76ee\u5728\u8fd0\u884c\u73af\u5883\u4e0b\u5b58\u5728\n"peerDependencies" \u58f0\u660e\u7684\u8fd9\u4e9b\u4f9d\u8d56\uff0c\u8fd9\u7c7b\u4f3c\u4e8e\u63d2\u4ef6\u8fd9\u6837\u7684\u673a\u5236\u3002\n\n\n\u7b2c\u4e09\u65b9\u4f9d\u8d56\u7684\u9ed8\u8ba4\u5904\u7406\n\n\u5728\u6a21\u5757\u5de5\u7a0b\u91cc\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u4e0d\u4f1a\u5bf9"dependencies" \u4ee5\u53ca "peerDependencies" \u4e0b\u7684\u7b2c\u4e09\u65b9\u4f9d\u8d56\u8fdb\u884c\u6253\u5305\u5904\u7406\uff0c\u56e0\u6b64\uff1a\n\n<CH.Spotlight>\n\n{\n  "dependencies": {\n    "react": "^17"\n  },\n  // or\n  "peerDependencies": {\n    "react": "^17"\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\n\u5982\u679c\u9879\u76ee\u4f9d\u8d56\u4e86 react\u3002\n\n{\n  "dependencies": {\n    "react": "^17"\n  },\n  // or\n  "peerDependencies": {\n    "react": "^17"\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\n\u5f53\u6e90\u7801\u4e2d\u4f7f\u7528\u4e86 react \u4f9d\u8d56\u3002\n\n\nconsole.info(React);\n\n\n--------------------------------------------------------------------------------\n\n\u6b64\u65f6\u4ea7\u7269\u4e2d\u4e0d\u4f1a\u5c06 react \u4ee3\u7801\u6253\u5305\u5230\u4ea7\u7269\u4e2d\u3002\n\n\nconsole.info(React);\n\n\n</CH.Spotlight>\n\n\n\u6253\u5305\u7b2c\u4e09\u65b9\u4f9d\u8d56\n\n\u4e0d\u8fc7\u4e5f\u6709\u4e00\u4e9b\u60c5\u51b5\u5e0c\u671b\u5c06\u8fd9\u4e9b\u7b2c\u4e09\u65b9\u4f9d\u8d56\u6253\u5305\u5230\u4ea7\u7269\u3002\u5c06\u7b2c\u4e09\u65b9\u4f9d\u8d56\u6253\u5305\u5230\u4ea7\u7269\u7684\u597d\u5904\u662f\uff1a\u51cf\u5c11\u4e0b\u8f7d\u7b2c\u4e09\u65b9\u4f9d\u8d56\u6240\u82b1\u8d39\u7684\u65f6\u95f4\u3002\n\n\u8fd9\u79cd\u5904\u7406\u7b2c\u4e09\u65b9\u4f9d\u8d56\u7684\u65b9\u5f0f\u4e00\u822c\u5728\u5f00\u53d1\u547d\u4ee4\u884c\u5de5\u5177\u4e2d\u6bd4\u8f83\u5e38\u89c1\uff0c\u8fd9\u53ef\u4ee5\u63d0\u5347\u547d\u4ee4\u884c\u5de5\u5177\u7684\u52a0\u8f7d\u901f\u5ea6\uff0c\u7ed9\u4f7f\u7528\u8005\u5e26\u6765\u66f4\u597d\u7684\u4f7f\u7528\u4f53\u9a8c\u3002\n\n\u90a3\u4e48\u5982\u4f55\u5728\u6a21\u5757\u5de5\u7a0b\u4e2d\u5f00\u542f\u5bf9\u4e8e\u7b2c\u4e09\u65b9\u4f9d\u8d56\u7684\u6253\u5305\u5904\u7406\u5462\uff1f\n\n\u5728\u6784\u5efa\u914d\u7f6e\u4e2d\u63d0\u4f9b\u4e86\u4ee5\u4e0b API \u6765\u5904\u7406\u7b2c\u4e09\u65b9\u4f9d\u8d56\uff1a\n\n * buildConfig.autoExternal\n * buildConfig.externals\n\n\n\u5173\u95ed\u9ed8\u8ba4\u884c\u4e3a\n\n\u5f53\u6211\u4eec\u5e0c\u671b\u5173\u95ed\u5bf9\u4e8e\u7b2c\u4e09\u65b9\u4f9d\u8d56\u7684\u9ed8\u8ba4\u5904\u7406\u884c\u4e3a\u65f6\u5019\uff0c\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u65b9\u5f0f\u6765\u5b9e\u73b0\uff1a\n\nexport default defineConfig({\n  buildConfig: {\n    autoExternal: false,\n  },\n});\n\n\n\u8fd9\u6837\u5bf9\u4e8e "dependencies" \u548c "peerDependencies" \u4e0b\u9762\u7684\u4f9d\u8d56\u90fd\u4f1a\u8fdb\u884c\u6253\u5305\u5904\u7406\u3002\u5982\u679c\u53ea\u60f3\u8981\u5173\u95ed\u5176\u4e2d\u67d0\u4e2a\u4e0b\u9762\u7684\u4f9d\u8d56\u5904\u7406\uff0c\u5219\u53ef\u4ee5\u4f7f\u7528\nbuildConfig.autoExternal \u7684\u5bf9\u8c61\u5f62\u5f0f\uff1a\n\nexport default defineConfig({\n  buildConfig: {\n    autoExternal: {\n      dependencies: false,\n      peerDependencies: false,\n    },\n  },\n});\n\n\n\n\u6392\u9664\u6307\u5b9a\u7b2c\u4e09\u65b9\u4f9d\u8d56\n\n\u800c\u9664\u4e86 buildConfig.autoExternal API \u4ee5\u5916\uff0cbuildConfig.externals\n\u4e5f\u53ef\u4ee5\u63a7\u5236\u54ea\u4e9b\u7b2c\u4e09\u65b9\u4f9d\u8d56\u8981\u8fdb\u884c\u5904\u7406\u3002\u6211\u4eec\u53ef\u4ee5\u7ec4\u5408\u8fd9\u4e24\u4e2a API \u5bf9\u9879\u76ee\u7684\u4f9d\u8d56\u8fdb\u884c\u66f4\u7ec6\u5fae\u7684\u5904\u7406\u3002\n\n\u4f8b\u5982\u5f53\u6211\u4eec\u9700\u8981\u4ec5\u5bf9\u67d0\u4e9b\u4f9d\u8d56\u4e0d\u8fdb\u884c\u6253\u5305\u5904\u7406\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u65b9\u5f0f\u8fdb\u884c\u914d\u7f6e\uff1a\n\n> \u4e00\u822c\u8fd9\u79cd\u60c5\u51b5\uff0c\u53ef\u80fd\u662f\u67d0\u4e9b\u4f9d\u8d56\u4e0d\u9002\u5408\u8fdb\u884c\u6253\u5305\u5904\u7406\u3002\u5982\u679c\u9047\u5230\u8fd9\u79cd\u60c5\u51b5\uff0c\u5219\u53ef\u4ee5\u6309\u7167\u4e0b\u9762\u7684\u65b9\u5f0f\u8fdb\u884c\u5904\u7406\u3002\n\nepxort default defineConfig({\n  buildConfig: {\n    autoExternal: false,\n    externals: [\'pkg-1\', /pkg-2/],\n  }\n});\n',frontmatter:{sidebar_position:4}},{id:41,title:"\u6df1\u5165\u7406\u89e3\u6784\u5efa",routePath:"/module-tools/guide/advance/in-depth-about-build",toc:[{id:"\u6df1\u5165\u7406\u89e3-buildconfig-4",text:"\u6df1\u5165\u7406\u89e3 buildConfig",depth:2},{id:"bundle-\u548c-bundleless-4",text:"Bundle \u548c Bundleless",depth:3},{id:"input-\u4e0e-sourcedir-\u7684\u5173\u7cfb-4",text:"input \u4e0e sourceDir \u7684\u5173\u7cfb",depth:3},{id:"input-\u7684\u5bf9\u8c61\u6a21\u5f0f-1",text:"input \u7684\u5bf9\u8c61\u6a21\u5f0f",depth:4},{id:"sourcedir-6",text:"sourceDir",depth:4},{id:"\u7c7b\u578b\u6587\u4ef6-1",text:"\u7c7b\u578b\u6587\u4ef6",depth:3},{id:"\u5173\u95ed\u7c7b\u578b\u751f\u6210-1",text:"\u5173\u95ed\u7c7b\u578b\u751f\u6210",depth:4},{id:"\u6253\u5305\u7c7b\u578b\u6587\u4ef6-1",text:"\u6253\u5305\u7c7b\u578b\u6587\u4ef6",depth:4},{id:"\u522b\u540d\u8f6c\u6362-1",text:"\u522b\u540d\u8f6c\u6362",depth:4},{id:"\u4e00\u4e9b-dts-\u7684\u4f7f\u7528\u793a\u4f8b-1",text:"\u4e00\u4e9b dts \u7684\u4f7f\u7528\u793a\u4f8b",depth:4},{id:"buildconfigdefine-\u4e0d\u540c\u573a\u666f\u7684\u4f7f\u7528\u65b9\u5f0f-1",text:"buildConfig.define \u4e0d\u540c\u573a\u666f\u7684\u4f7f\u7528\u65b9\u5f0f",depth:3},{id:"\u73af\u5883\u53d8\u91cf\u66ff\u6362-1",text:"\u73af\u5883\u53d8\u91cf\u66ff\u6362",depth:4},{id:"\u5168\u5c40\u53d8\u91cf\u66ff\u6362-1",text:"\u5168\u5c40\u53d8\u91cf\u66ff\u6362",depth:4},{id:"\u6784\u5efa\u8fc7\u7a0b-4",text:"\u6784\u5efa\u8fc7\u7a0b",depth:2},{id:"\u6784\u5efa\u62a5\u9519-1",text:"\u6784\u5efa\u62a5\u9519",depth:2}],content:"\u6df1\u5165\u7406\u89e3\u6784\u5efa\n\n\u5728\u3010\u57fa\u7840\u4f7f\u7528\u3011\u7684\u90e8\u5206\uff0c\u6211\u4eec\u5df2\u7ecf\u77e5\u9053\u53ef\u4ee5\u901a\u8fc7 buildConfig \u914d\u7f6e\u5bf9\u9879\u76ee\u7684\u8f93\u51fa\u4ea7\u7269\u8fdb\u884c\u4fee\u6539\u3002buildConfig\n\u4e0d\u4ec5\u63cf\u8ff0\u4e86\u4ea7\u7269\u7684\u4e00\u4e9b\u7279\u6027\uff0c\u540c\u65f6\u8fd8\u4e3a\u6784\u5efa\u4ea7\u7269\u63d0\u4f9b\u4e86\u4e00\u4e9b\u529f\u80fd\u3002\n\n\u5982\u679c\u4f60\u8fd8\u4e0d\u6e05\u695a buildConfig \u662f\u4ec0\u4e48\uff0c\u5efa\u8bae\u82b1\u4e00\u4e9b\u65f6\u95f4\u901a\u8fc7\u4e0b\u9762\u7684\u94fe\u63a5\u4e86\u89e3\u4e00\u4e0b\uff1a\n\n * \u3010\u4fee\u6539\u8f93\u51fa\u4ea7\u7269\u3011\n\n\u800c\u5728\u672c\u7ae0\u91cc\u6211\u4eec\u5c06\u8981\u6df1\u5165\u7406\u89e3\u67d0\u4e9b\u6784\u5efa\u914d\u7f6e\u7684\u4f7f\u7528\u4ee5\u53ca\u4e86\u89e3\u6267\u884c modern build \u547d\u4ee4\u7684\u65f6\u5019\u53d1\u751f\u4e86\u4ec0\u4e48\u3002\n\n\n\u6df1\u5165\u7406\u89e3 BUILDCONFIG\n\n\nBUNDLE \u548c BUNDLELESS\n\n\u90a3\u4e48\u9996\u5148\u6211\u4eec\u6765\u4e86\u89e3\u4e00\u4e0b Bundle \u548c Bundleless\u3002\n\n\u6240\u8c13 Bundle \u662f\u6307\u5bf9\u6784\u5efa\u4ea7\u7269\u8fdb\u884c\u6253\u5305\uff0c\u6784\u5efa\u4ea7\u7269\u53ef\u80fd\u662f\u4e00\u4e2a\u6587\u4ef6\uff0c\u4e5f\u6709\u53ef\u80fd\u662f\u57fa\u4e8e\u4e00\u5b9a\u7684\u4ee3\u7801\u62c6\u5206\u7b56\u7565\u5f97\u5230\u7684\u591a\u4e2a\u6587\u4ef6\u3002\n\n\u800c Bundleless \u5219\u662f\u6307\u5bf9\u6bcf\u4e2a\u6e90\u6587\u4ef6\u5355\u72ec\u8fdb\u884c\u7f16\u8bd1\u6784\u5efa\uff0c\u4f46\u662f\u5e76\u4e0d\u5c06\u5b83\u4eec\u6253\u5305\u5728\u4e00\u8d77\u3002\u6bcf\u4e00\u4e2a\u4ea7\u7269\u6587\u4ef6\u90fd\u53ef\u4ee5\u627e\u5230\u4e0e\u4e4b\u76f8\u5bf9\u5e94\u7684\u6e90\u7801\u6587\u4ef6\u3002Bundleless\n\u6784\u5efa\u7684\u8fc7\u7a0b\uff0c\u4e5f\u53ef\u4ee5\u7406\u89e3\u4e3a\u4ec5\u5bf9\u6e90\u6587\u4ef6\u8fdb\u884c\u4ee3\u7801\u8f6c\u6362\u7684\u8fc7\u7a0b\u3002\n\n\u5728 buildConfig \u4e2d\u53ef\u4ee5\u901a\u8fc7 buildConfig.buildType \u6765\u6307\u5b9a\u5f53\u524d\u6784\u5efa\u4efb\u52a1\u662f Bundle \u8fd8\u662f Bundleless\u3002\n\n\nINPUT \u4e0e SOURCEDIR \u7684\u5173\u7cfb\n\nbuildConfig.input \u7528\u4e8e\u6307\u5b9a\u8bfb\u53d6\u6e90\u7801\u7684\u6587\u4ef6\u8def\u5f84\u6216\u8005\u76ee\u5f55\u8def\u5f84\uff0c\u5176\u9ed8\u8ba4\u503c\u5728 Bundle \u548c Bundleless \u6784\u5efa\u8fc7\u7a0b\u4e2d\u6709\u6240\u4e0d\u540c\uff1a\n\n * \u5f53 buildType: 'bundle' \u7684\u65f6\u5019\uff0cinput \u9ed8\u8ba4\u503c\u4e3a ['src/index.ts']\n * \u5f53 buildType: 'bundleless' \u7684\u65f6\u5019\uff0cinput \u9ed8\u8ba4\u503c\u4e3a ['src']\n   \n   > \u5b9e\u9645\u4e0a\uff0c\u5728 buildType: 'bundle' \u7684\u65f6\u5019\uff0c\u6784\u5efa\u5de5\u5177\u4f1a\u68c0\u6d4b\u662f\u5426\u5b58\u5728\u7b26\u5408 src/index.(j|t)sx?\n   > \u8fd9\u4e2a\u540d\u79f0\u89c4\u5219\u7684\u6587\u4ef6\uff0c\u5e76\u5c06\u5176\u4f5c\u4e3a\u5165\u53e3\u6587\u4ef6\u3002\n\n:::warning {title=\u6ce8\u610f} \u5efa\u8bae\u4e0d\u8981\u5728 Bundleless \u6784\u5efa\u8fc7\u7a0b\u4e2d\u6307\u5b9a\u591a\u4e2a\u6e90\u7801\u6587\u4ef6\u76ee\u5f55\uff0c\u53ef\u80fd\u51fa\u73b0\u4e0d\u7b26\u5408\u9884\u671f\u7684\u7ed3\u679c\u3002\u76ee\u524d\u591a\u4e2a\u6e90\u7801\u76ee\u5f55\u7684\nBundleless \u6784\u5efa\u8fd8\u5904\u4e8e\u4e0d\u7a33\u5b9a\u9636\u6bb5\u3002 :::\n\n\u4ece\u9ed8\u8ba4\u503c\u4e0a\u6211\u4eec\u53ef\u4ee5\u77e5\u9053\uff1aBundle \u6784\u5efa\u4e00\u822c\u53ef\u4ee5\u6307\u5b9a\u6587\u4ef6\u8def\u5f84\u4f5c\u4e3a\u6784\u5efa\u7684\u5165\u53e3\uff0c\u800c Bundleless \u6784\u5efa\u5219\u66f4\u671f\u671b\u4f7f\u7528\u76ee\u5f55\u8def\u5f84\u5bfb\u627e\u6e90\u6587\u4ef6\u3002\n\nINPUT \u7684\u5bf9\u8c61\u6a21\u5f0f\n\n\u5728 Bundle \u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u9664\u4e86\u5c06 input\n\u8bbe\u7f6e\u4e3a\u4e00\u4e2a\u6570\u7ec4\uff0c\u4e5f\u53ef\u4ee5\u5c06\u5b83\u8bbe\u7f6e\u4e3a\u4e00\u4e2a\u5bf9\u8c61\u3002\u901a\u8fc7\u4f7f\u7528\u5bf9\u8c61\u7684\u5f62\u5f0f\uff0c\u6211\u4eec\u53ef\u4ee5\u4fee\u6539\u6784\u5efa\u4ea7\u7269\u8f93\u51fa\u7684\u6587\u4ef6\u540d\u79f0\u3002\u90a3\u4e48\u5bf9\u4e8e\u4e0b\u9762\u7684\u4f8b\u5b50\uff0c./src/index.ts\n\u5bf9\u5e94\u7684\u6784\u5efa\u4ea7\u7269\u6587\u4ef6\u8def\u5f84\u4e3a ./dist/main.js\u3002\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    input: {\n      main: ['./src/index.ts'],\n    },\n    outDir: './dist',\n  },\n});\n\n\n\u800c\u5728 Bundleless \u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u867d\u7136\u540c\u6837\u652f\u6301\u8fd9\u6837\u7684\u4f7f\u7528\u65b9\u5f0f\uff0c\u4f46\u662f\u5e76\u4e0d\u63a8\u8350\u3002\n\nSOURCEDIR\n\nsourceDir \u7528\u4e8e\u6307\u5b9a\u6e90\u7801\u76ee\u5f55\uff0c\u5b83\u4e3b\u8981\u4e0e\u4ee5\u4e0b\u4e24\u4e2a\u5185\u5bb9\u6709\u5173\u7cfb\uff1a\n\n * \u7c7b\u578b\u6587\u4ef6\u751f\u6210\n * \u6307\u5b9a\u6784\u5efa\u8fc7\u7a0b\u4e2d\u7684 outbase\n\n\u4e00\u822c\u6765\u8bf4\uff1a\n\n * \u5728 Bundleless \u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0csourceDir \u4e0e input \u7684\u503c\u8981\u4fdd\u6301\u4e00\u81f4\uff0c\u5b83\u4eec\u7684\u9ed8\u8ba4\u503c\u90fd\u662f src\u3002\n * \u5728 Bundle \u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u5f88\u5c11\u9700\u8981\u4f7f\u7528 sourceDir\u3002\n\n\n\u7c7b\u578b\u6587\u4ef6\n\nbuildConfig.dts \u914d\u7f6e\u4e3b\u8981\u7528\u4e8e\u7c7b\u578b\u6587\u4ef6\u7684\u751f\u6210\u3002\n\n\u5173\u95ed\u7c7b\u578b\u751f\u6210\n\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u7c7b\u578b\u751f\u6210\u529f\u80fd\u662f\u5f00\u542f\u7684\uff0c\u5982\u679c\u9700\u8981\u5173\u95ed\u7684\u8bdd\uff0c\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u914d\u7f6e\uff1a\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    dts: false,\n  },\n});\n\n\n\u5173\u95ed\u7c7b\u578b\u6587\u4ef6\u540e\uff0c\u4e00\u822c\u6765\u8bf4\u6784\u5efa\u901f\u5ea6\u4f1a\u6709\u6240\u63d0\u5347\u3002\n\n\u6253\u5305\u7c7b\u578b\u6587\u4ef6\n\n\u5728 buildType: 'bundleless' \u7684\u65f6\u5019\uff0c\u7c7b\u578b\u6587\u4ef6\u7684\u751f\u6210\u662f\u4f7f\u7528\u9879\u76ee\u7684 tsc \u547d\u4ee4\u6765\u5b8c\u6210\u751f\u4ea7\u3002\n\n\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848\u540c\u65f6\u8fd8\u652f\u6301\u5bf9\u7c7b\u578b\u6587\u4ef6\u8fdb\u884c\u6253\u5305\uff0c\u4e0d\u8fc7\u4f7f\u7528\u8be5\u529f\u80fd\u7684\u65f6\u5019\u9700\u8981\u6ce8\u610f\uff1a\n\n * \u4e00\u4e9b\u7b2c\u4e09\u65b9\u4f9d\u8d56\u5b58\u5728\u9519\u8bef\u7684\u8bed\u6cd5\u4f1a\u5bfc\u81f4\u6253\u5305\u8fc7\u7a0b\u5931\u8d25\u3002\u56e0\u6b64\u5bf9\u4e8e\u8fd9\u79cd\u60c5\u51b5\uff0c\u9700\u8981\u624b\u52a8\u901a\u8fc7 buildConfig.externals \u5c06\u8fd9\u7c7b\u7b2c\u4e09\u65b9\u5305\u6392\u9664\u3002\n * \u5bf9\u4e8e\u7b2c\u4e09\u65b9\u4f9d\u8d56\u7684\u7c7b\u578b\u6587\u4ef6\u6307\u5411\u7684\u662f\u4e00\u4e2a .ts \u6587\u4ef6\u7684\u60c5\u51b5\uff0c\u76ee\u524d\u65e0\u6cd5\u5904\u7406\u3002\u6bd4\u5982\u7b2c\u4e09\u65b9\u4f9d\u8d56\u7684 package.json \u4e2d\u5b58\u5728\u8fd9\u6837\u7684\u5185\u5bb9\uff1a {\"types\":\n   \"./src/index.ts\"}\u3002\n\n\u522b\u540d\u8f6c\u6362\n\n\u5728 Bundleless \u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u5982\u679c\u6e90\u4ee3\u7801\u4e2d\u51fa\u73b0\u4e86\u522b\u540d\uff0c\u4f8b\u5982\uff1a\n\n\n\n\u6b63\u5e38\u6765\u8bf4\uff0c\u4f7f\u7528 tsc \u751f\u6210\u7684\u4ea7\u7269\u7c7b\u578b\u6587\u4ef6\u4e5f\u4f1a\u5305\u542b\u8fd9\u4e9b\u522b\u540d\u3002\u4e0d\u8fc7 Module Tools \u4f1a\u5bf9 tsc \u751f\u6210\u7684\u7c7b\u578b\u6587\u4ef6\u91cc\u7684\u522b\u540d\u8fdb\u884c\u8f6c\u6362\u5904\u7406\uff1a\n\n * \u5bf9\u4e8e\u7c7b\u4f3c `` \u8fd9\u6837\u5f62\u5f0f\u7684\u4ee3\u7801\u53ef\u4ee5\u8fdb\u884c\u522b\u540d\u8f6c\u6362\u3002\n * \u5bf9\u4e8e\u7c7b\u4f3c export { utils } from '@common/utils' \u8fd9\u6837\u5f62\u5f0f\u7684\u4ee3\u7801\u53ef\u4ee5\u8fdb\u884c\u522b\u540d\u8f6c\u6362\u3002\n\n\u7136\u800c\u4e5f\u5b58\u5728\u4e00\u4e9b\u60c5\u51b5\uff0c\u76ee\u524d\u8fd8\u65e0\u6cd5\u5904\u7406\uff1a\n\n * \u5bf9\u4e8e\u7c7b\u4f3c Promise<import('@common/utils')> \u8fd9\u6837\u5f62\u5f0f\u7684\u8f93\u51fa\u7c7b\u578b\u76ee\u524d\u65e0\u6cd5\u8fdb\u884c\u8f6c\u6362\u3002\n\n\u4e00\u4e9b DTS \u7684\u4f7f\u7528\u793a\u4f8b\n\n\u4e00\u822c\u4f7f\u7528\u65b9\u5f0f\uff1a\n\n\n\nexport default defineConfig({\n  // \u6b64\u65f6\u6253\u5305\u7684\u7c7b\u578b\u6587\u4ef6\u8f93\u51fa\u8def\u5f84\u4e3a `./dist/types`\n  buildConfig: {\n    buildType: 'bundle',\n    dts: {\n      tsconfigPath: './other-tsconfig.json',\n      distPath: './types',\n    },\n    outDir: './dist',\n  },\n});\n\n\n\u4f7f\u7528 dts.only \u7684\u60c5\u51b5\uff1a\n\n\n\nexport default defineConfig({\n  // \u6b64\u65f6\u7c7b\u578b\u6587\u4ef6\u6ca1\u6709\u8fdb\u884c\u6253\u5305\uff0c\u8f93\u51fa\u8def\u5f84\u4e3a `./dist/types`\n  buildConfig: [\n    {\n      buildType: 'bundle',\n      dts: false,\n      outDir: './dist',\n    },\n    {\n      buildType: 'bundleless',\n      dts: {\n        only: true,\n      },\n      outDir: './dist/types',\n    },\n  ],\n});\n\n\n\nBUILDCONFIG.DEFINE \u4e0d\u540c\u573a\u666f\u7684\u4f7f\u7528\u65b9\u5f0f\n\nbuildConfig.define \u529f\u80fd\u6709\u4e9b\u7c7b\u4f3c webpack.DefinePlugin\u3002\u8fd9\u91cc\u4ecb\u7ecd\u51e0\u4e2a\u4f7f\u7528\u573a\u666f\uff1a\n\n\u73af\u5883\u53d8\u91cf\u66ff\u6362\n\n\nexport default defineConfig({\n  buildConfig: {\n    define: {\n      'process.env.VERSION': JSON.stringify(process.env.VERSION || '0.0.0'),\n    },\n  },\n});\n\n\n\u901a\u8fc7\u4e0a\u9762\u7684\u914d\u7f6e\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u5c06\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\uff1a\n\n// \u7f16\u8bd1\u524d\u4ee3\u7801\nconsole.log(process.env.VERSION);\n\n\n\u5728\u6267\u884c VERSION=1.0.0 modern build \u7684\u65f6\u5019\uff0c\u8f6c\u6362\u4e3a\uff1a\n\n// \u7f16\u8bd1\u540e\u4ee3\u7801\nconsole.log('1.0.0');\n\n\n\u5168\u5c40\u53d8\u91cf\u66ff\u6362\n\n\nexport default defineConfig({\n  buildConfig: {\n    define: {\n      VERSION: JSON.stringify(require('./package.json').version || '0.0.0'),\n    },\n  },\n});\n\n\n\u901a\u8fc7\u4e0a\u9762\u7684\u914d\u7f6e\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u5c06\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\uff1a\n\n// \u7f16\u8bd1\u524d\u4ee3\u7801\nconsole.log(VERSION);\n\n\n\u8f6c\u6362\u4e3a\uff1a\n\n// \u7f16\u8bd1\u540e\u4ee3\u7801\nconsole.log('1.0.0');\n\n\n\u4e0d\u8fc7\u8981\u6ce8\u610f\uff1a\u5982\u679c\u9879\u76ee\u662f\u4e00\u4e2a TypeScript \u9879\u76ee\uff0c\u90a3\u4e48\u4f60\u53ef\u80fd\u9700\u8981\u5728\u9879\u76ee\u6e90\u4ee3\u7801\u76ee\u5f55\u4e0b\u7684 .d.ts \u6587\u4ef6\u91cc\u589e\u52a0\u4ee5\u4e0b\u5185\u5bb9\uff1a\n\n> \u5982\u679c\u4e0d\u5b58\u5728 d.ts \u6587\u4ef6\uff0c\u5219\u53ef\u4ee5\u624b\u52a8\u521b\u5efa\u3002\n\ndeclare const YOUR_ADD_GLOBAL_VAR;\n\n\n\n\u6784\u5efa\u8fc7\u7a0b\n\n\u5f53\u6267\u884c modern build \u547d\u4ee4\u7684\u65f6\u5019\uff0c\u4f1a\u53d1\u751f\n\n * \u6839\u636e buildConfig.outDir \u6e05\u7406\u4ea7\u7269\u76ee\u5f55\u3002\n * \u7f16\u8bd1 js/ts \u6e90\u4ee3\u7801\u751f\u6210 Bundle/Bundleless \u7684 JS \u6784\u5efa\u4ea7\u7269\u3002\n * \u4f7f\u7528 tsc \u751f\u6210 Bundle/Bundleless \u7684\u7c7b\u578b\u6587\u4ef6\u3002\n * \u5904\u7406 Copy \u4efb\u52a1\u3002\n\n\n\u6784\u5efa\u62a5\u9519\n\n\u5f53\u53d1\u751f\u6784\u5efa\u62a5\u9519\u7684\u65f6\u5019\uff0c\u57fa\u4e8e\u4ee5\u4e0a\u4e86\u89e3\u5230\u7684\u4fe1\u606f\uff0c\u53ef\u4ee5\u5f88\u5bb9\u6613\u7684\u660e\u767d\u5728\u7ec8\u7aef\u51fa\u73b0\u7684\u62a5\u9519\u5185\u5bb9\uff1a\n\njs \u6216\u8005 ts \u6784\u5efa\u7684\u62a5\u9519\uff1a\n\nerror  ModuleBuildError:\n\n\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n\u2502 bundle failed:        \u2502\n\u2502  - format is \"cjs\"    \u2502\n\u2502  - target is \"esnext\" \u2502\n\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n\nDetailed Information:\n\n\n\u7c7b\u578b\u6587\u4ef6\u751f\u6210\u8fc7\u7a0b\u7684\u62a5\u9519\uff1a\n\nerror   ModuleBuildError:\n\nbundle DTS failed:\n\n\n\u5bf9\u4e8e js/ts \u6784\u5efa\u9519\u8bef\uff0c\u6211\u4eec\u53ef\u4ee5\u4ece\u62a5\u9519\u4fe1\u606f\u4e2d\u77e5\u9053\uff1a\n\n * \u901a\u8fc7 'bundle failed:' \u6765\u5224\u65ad\u62a5\u9519\u7684\u662f Bundle \u6784\u5efa\u8fd8\u662f Bundleless \u6784\u5efa\uff1f\n * \u6784\u5efa\u8fc7\u7a0b\u7684 format \u662f\u4ec0\u4e48\uff1f\n * \u6784\u5efa\u8fc7\u7a0b\u7684 target \u662f\u4ec0\u4e48\uff1f\n * \u5177\u4f53\u7684\u62a5\u9519\u4fe1\u606f\u3002",frontmatter:{sidebar_position:1}},{id:42,title:"\u6df1\u5165\u7406\u89e3 dev \u547d\u4ee4",routePath:"/module-tools/guide/advance/in-depth-about-dev-command",toc:[{id:"\u6df1\u5165\u7406\u89e3-buildconfig-5",text:"\u6df1\u5165\u7406\u89e3 buildConfig",depth:2},{id:"bundle-\u548c-bundleless-5",text:"Bundle \u548c Bundleless",depth:3},{id:"input-\u4e0e-sourcedir-\u7684\u5173\u7cfb-5",text:"input \u4e0e sourceDir \u7684\u5173\u7cfb",depth:3},{id:"\u6784\u5efa\u8fc7\u7a0b-5",text:"\u6784\u5efa\u8fc7\u7a0b",depth:2}],content:"\u6df1\u5165\u7406\u89e3 DEV \u547d\u4ee4\n\n\u5728\u3010\u57fa\u7840\u4f7f\u7528\u3011\u7684\u90e8\u5206\uff0c\u6211\u4eec\u5df2\u7ecf\u77e5\u9053\u53ef\u4ee5\u901a\u8fc7 buildConfig \u914d\u7f6e\u5bf9\u9879\u76ee\u7684\u8f93\u51fa\u4ea7\u7269\u8fdb\u884c\u4fee\u6539\u3002buildConfig\n\u4e0d\u4ec5\u63cf\u8ff0\u4e86\u4ea7\u7269\u7684\u4e00\u4e9b\u7279\u6027\uff0c\u540c\u65f6\u8fd8\u4e3a\u6784\u5efa\u4ea7\u7269\u63d0\u4f9b\u4e86\u4e00\u4e9b\u529f\u80fd\u3002\n\n\u5982\u679c\u4f60\u8fd8\u4e0d\u6e05\u695a buildConfig \u662f\u4ec0\u4e48\uff0c\u5efa\u8bae\u82b1\u4e00\u4e9b\u65f6\u95f4\u901a\u8fc7\u4e0b\u9762\u7684\u94fe\u63a5\u4e86\u89e3\u4e00\u4e0b\uff1a\n\n * \u3010\u4fee\u6539\u8f93\u51fa\u4ea7\u7269\u3011\n\n\u800c\u5728\u672c\u7ae0\u91cc\u6211\u4eec\u5c06\u8981\u6df1\u5165\u7406\u89e3\u67d0\u4e9b\u6784\u5efa\u914d\u7f6e\u7684\u4f7f\u7528\u4ee5\u53ca\u4e86\u89e3\u6267\u884c modern build \u547d\u4ee4\u7684\u65f6\u5019\u53d1\u751f\u4e86\u4ec0\u4e48\u3002\n\n\n\u6df1\u5165\u7406\u89e3 BUILDCONFIG\n\n\nBUNDLE \u548c BUNDLELESS\n\n\u90a3\u4e48\u9996\u5148\u6211\u4eec\u6765\u7406\u89e3\u4e00\u4e0b Bundle \u548c Bundleless\u3002\n\n\u6240\u8c13 Bundle \u662f\u6307\u5bf9\u6784\u5efa\u4ea7\u7269\u8fdb\u884c\u6253\u5305\uff0c\u6784\u5efa\u4ea7\u7269\u53ef\u80fd\u662f\u4e00\u4e2a\u6587\u4ef6\uff0c\u4e5f\u6709\u53ef\u80fd\u662f\u57fa\u4e8e\u4e00\u5b9a\u7684\u4ee3\u7801\u62c6\u5206\u7b56\u7565\u5f97\u5230\u7684\u591a\u4e2a\u6587\u4ef6\u3002\n\n\u800c Bundleless \u5219\u662f\u6307\u5bf9\u6bcf\u4e2a\u6e90\u6587\u4ef6\u8fdb\u884c\u7f16\u8bd1\u6784\u5efa\uff0c\u4f46\u662f\u5e76\u4e0d\u5c06\u5b83\u4eec\u6253\u5305\u5728\u4e00\u8d77\u3002\u6bcf\u4e00\u4e2a\u4ea7\u7269\u6587\u4ef6\u90fd\u53ef\u4ee5\u627e\u5230\u4e0e\u4e4b\u76f8\u5bf9\u5e94\u7684\u6e90\u7801\u6587\u4ef6\u3002\n\n\nINPUT \u4e0e SOURCEDIR \u7684\u5173\u7cfb\n\n\n\u6784\u5efa\u8fc7\u7a0b",frontmatter:{sidebar_position:2}},{id:43,title:"\u4e3b\u9898\u914d\u7f6e",routePath:"/module-tools/guide/advance/theme-config",toc:[{id:"\u52a8\u673a\u548c\u539f\u7406-1",text:"\u52a8\u673a\u548c\u539f\u7406",depth:2},{id:"\u4f7f\u7528\u793a\u4f8b-1",text:"\u4f7f\u7528\u793a\u4f8b",depth:2},{id:"tailwindcss-6",text:"tailwindcss",depth:3},{id:"html-\u7c7b\u540d-2",text:"HTML \u7c7b\u540d\u3002",depth:4},{id:"apply-\u6307\u4ee4-1",text:"@apply \u6307\u4ee4",depth:4}],content:"\u4e3b\u9898\u914d\u7f6e\n\n\u6a21\u5757\u5de5\u7a0b\u901a\u8fc7 designSystem API\uff0c\u63d0\u4f9b\u4e86\u914d\u7f6e\u4e3b\u9898\u7684\u80fd\u529b\u3002\n\n\n\u52a8\u673a\u548c\u539f\u7406\n\n\u4e3b\u9898\u914d\u7f6e\u6709\u4e9b\u7c7b\u4f3c\u7ec4\u4ef6\u5e93\u4e2d\u7684\u5b9a\u5236\u4e3b\u9898\u529f\u80fd\uff0c\u4e3b\u8981\u7528\u4e8e\u6837\u5f0f\u5f00\u53d1\u4e2d\u4f7f\u7528\u3002\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 designSystem \u914d\u7f6e\u5728\u4e0d\u540c\u7684\u6837\u5f0f\u5f00\u53d1\u73af\u5883\u4e0b\u4f7f\u7528\u7531\u5b83\u751f\u6210\u7684\ndesignToken\u3002\n\n\u6240\u8c13 designToken \u5728\u4e0d\u540c\u7684\u6837\u5f0f\u5f00\u53d1\u73af\u5883\u4e0b\u5bf9\u5e94\u4e0d\u540c\u7684\u4e1c\u897f\uff1a\n\n * tailwindcss: \u4ee5 designSystem \u4f5c\u4e3a tailwindcss \u7684 theme \u914d\u7f6e\u3002\u56e0\u6b64\u53ef\u4ee5\u4f7f\u7528\uff1a\n   * tailwindcss \u652f\u6301\u7684 HTML \u7c7b\u540d\u3002\n   * \u5728 css/less/sass \u4e0b\u901a\u8fc7 @apply \u81ea\u5b9a\u4e49\u6307\u4ee4\u4f7f\u7528\u4e0e tailwindcss \u652f\u6301\u7684 HTML \u7c7b\u540d\u540c\u540d\u7684\u5b57\u7b26\u4e32\u3002\n * css/less/scss: \u901a\u8fc7 designSystem \u751f\u6210\u5168\u5c40\u7684\u6837\u5f0f\u53d8\u91cf\u3002\n\ndesignSystem API \u7684\u6570\u636e\u7ed3\u6784\u501f\u9274\u4e86 tailwindcss \u914d\u7f6e\u5bf9\u8c61\u4e2d\u7684 theme API\uff0c\u56e0\u6b64\u5b58\u5728\u9ed8\u8ba4\u7684\u4e00\u5957\ndesignToken\u3002\u5173\u4e8e\u9ed8\u8ba4\u503c\uff0c\u53ef\u4ee5\u67e5\u770b designSystem API\u3002\n\n\u76ee\u524d\u6682\u65f6\u8fd8\u672a\u652f\u6301 css/less/sass \u5168\u5c40\u53d8\u91cf\u3002\n\n\n\u4f7f\u7528\u793a\u4f8b\n\n\nTAILWINDCSS\n\n\u5728\u4f7f\u7528 tailwindcss \u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u901a\u8fc7 designSystem \u6765\u8bbe\u7f6e\u5b83\u7684 theme \u914d\u7f6e\u3002\n\n\u4f8b\u5982\u5728\u4e0b\u9762\u7684\u914d\u7f6e\u4e2d\u6269\u5c55\u4e86\u539f\u6709\u7684\u989c\u8272\u914d\u7f6e:\n\nexport default {\n  designSystem: {\n    extend: {\n      colors: {\n        primary: '#1677ff',\n      },\n    },\n  },\n};\n\n\n\u6211\u4eec\u53ef\u4ee5\u5728\u4ee3\u7801\u4e2d\u6709\u4e24\u79cd\u4f7f\u7528 tailwindcss \u7684\u65b9\u5f0f\u3002\n\nHTML \u7c7b\u540d\u3002\n\nimport 'tailwindcss/utilities.css';\n\nexport default () => {\n  return <div className=\"bg-primary\"></div>;\n};\n\n\n@APPLY \u6307\u4ee4\n\n\u5173\u4e8e @apply\u3002\n\n<CH.Code>\n\nimport './index.css';\n\nexport default () => {\n  return <div className=\"btn-primary\"></div>;\n};\n\n\n.btn-primary {\n  @apply bg-primary;\n}\n\n\n</CH.Code>",frontmatter:{sidebar_position:6}},{id:44,title:"\u5f00\u59cb\u4e4b\u524d",routePath:"/module-tools/guide/basic/before-getting-started",toc:[{id:"\u73af\u5883\u51c6\u5907-1",text:"\u73af\u5883\u51c6\u5907",depth:2},{id:"\u521d\u8bc6-npm-1",text:"\u521d\u8bc6 npm",depth:2},{id:"npm-\u5305\u7c7b\u578b\u9879\u76ee-1",text:"npm \u5305\u7c7b\u578b\u9879\u76ee",depth:2},{id:"\u4f7f\u7528\u7b2c\u4e09\u65b9-npm-\u5305-1",text:"\u4f7f\u7528\u7b2c\u4e09\u65b9 npm \u5305",depth:2},{id:"\u8fd8\u9700\u8981\u4e86\u89e3\u7684-npm-\u96f6\u788e\u77e5\u8bc6-1",text:"\u8fd8\u9700\u8981\u4e86\u89e3\u7684 npm \u96f6\u788e\u77e5\u8bc6",depth:2},{id:"npm-\u5305\u7684\u7a0b\u5e8f\u5165\u53e3-1",text:"npm \u5305\u7684\u7a0b\u5e8f\u5165\u53e3",depth:3},{id:"scripts-3",text:'"scripts"',depth:3},{id:"npm-install-3",text:"npm install",depth:4},{id:"npm-publish-3",text:"npm publish",depth:4},{id:"peerdependencies-6",text:"peerDependencies",depth:3},{id:"npm-\u5305\u7ba1\u7406\u5668-1",text:"npm \u5305\u7ba1\u7406\u5668",depth:2},{id:"module-tools-\u914d\u7f6e\u6587\u4ef6-1",text:"Module Tools \u914d\u7f6e\u6587\u4ef6",depth:2}],content:'\u5f00\u59cb\u4e4b\u524d\n\n\n\u73af\u5883\u51c6\u5907\n\n\u4e3a\u4e86\u4f7f\u7528 Modern.js \u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848\uff0c\u9996\u5148\u9700\u8981 NodeJS\uff0c\u6211\u4eec\u63a8\u8350\u6700\u65b0\u7684\u957f\u671f\u7ef4\u62a4\u7248\u672c\uff0c\u5e76\u786e\u4fdd Node \u7248\u672c\u5927\u4e8e\u7b49\u4e8e 14.18.0\u3002\u56e0\u4e3a\u975e\u7a33\u5b9a\u7684\nNodeJS \u65f6\u5e38\u6709\u4e00\u4e9b Bug\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 nvm-windows \u548c nvm\uff08Mac/linux\uff09\u5b89\u88c5\uff0c\u8fd9\u6837\u4f60\u5c31\u53ef\u4ee5\u65b9\u4fbf\u5730\u5207\u6362\u5230\u4e0d\u540c\u7684 NodeJS\n\u7248\u672c\uff0c\u8fd9\u4e9b\u7248\u672c\u53ef\u80fd\u4f1a\u7528\u4e8e\u4e0d\u540c\u7684\u9879\u76ee\u3002\n\n\n\u521d\u8bc6 NPM\n\n\u5f53 NodeJS \u88ab\u5b89\u88c5\u540e\uff0c\u4f60\u4e0d\u4ec5\u53ef\u4ee5\u5728\u547d\u4ee4\u884c\u4e2d\u8bbf\u95ee node \u53ef\u6267\u884c\u7a0b\u5e8f\uff0c\u540c\u65f6\u4f60\u4e5f\u53ef\u4ee5\u6267\u884c npm \u547d\u4ee4\u3002\n\nnpm \u662f NodeJS \u7684\u6807\u51c6\u8f6f\u4ef6\u5305\u7ba1\u7406\u5668\u3002\u5b83\u4e00\u5f00\u59cb\u7684\u7528\u9014\u662f\u7528\u4e8e\u4e0b\u8f7d\u548c\u7ba1\u7406 NodeJS \u5305\u7684\u4f9d\u8d56\u5173\u7cfb\uff0c\u4f46\u540e\u6765\u5b83\u9010\u6e10\u53d8\u6210\u4e3a\u4e00\u4e2a\u7528\u4e8e\u524d\u7aef JavaScript\n\u7684\u5de5\u5177\u3002\n\n\u5982\u679c\u4f60\u5df2\u7ecf\u5bf9 npm \u548c npm \u5305\u7684\u4f7f\u7528\u65b9\u5f0f\u6709\u6240\u4e86\u89e3\uff0c\u90a3\u4e48\u53ef\u4ee5\u76f4\u63a5\u8df3\u5230\u3010npm \u5305\u7ba1\u7406\u5668\u3011\u90e8\u5206\u3002\n\n\nNPM \u5305\u7c7b\u578b\u9879\u76ee\n\n\u90a3\u4e48\u4ec0\u4e48\u662f npm \u5305\u7c7b\u578b\u7684\u9879\u76ee\u5462\uff1f\u5f53\u6211\u4eec\u5728\u4e00\u4e2a\u7a7a\u7684\u9879\u76ee\u76ee\u5f55\u4e0b\u6267\u884c npm init \u547d\u4ee4\u7684\u65f6\u5019\uff0c\u5b83\u4f1a\u5728\u5f53\u524d\u76ee\u5f55\u4e0b\u9762\u521b\u5efa\u4e00\u4e2a\u6587\u4ef6\u540d\u4e3a package.json\n\u7684 JSON \u6587\u4ef6\u3002\u5728\u521b\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u6211\u4eec\u9700\u8981\u586b\u5199\u5305\u62ec\u4f46\u4e0d\u9650\u4e8e npm \u5305\u7684\u540d\u79f0\u3001\u7248\u672c\u53f7\u3001\u63cf\u8ff0\u7b49\u7b49\u5185\u5bb9\uff0c\u8fd9\u4e9b\u586b\u5199\u7684\u5185\u5bb9\u90fd\u4f1a\u5728\u751f\u6210\u7684 package.json\n\u6587\u4ef6\u4e2d\u627e\u5230\uff1a\n\n{\n  "name": "npm-demo",\n  "version": "1.0.0",\n  "description": "",\n  "main": "index.js",\n  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1"\n  },\n  "author": "",\n  "license": "ISC"\n}\n\n\n\u6b64\u65f6\u8fd9\u4e2a\u5305\u542b\u4e86\u521d\u59cb\u5316\u540e\u7684 package.json \u6587\u4ef6\u7684\u9879\u76ee\u5c31\u662f\u4e00\u4e2a npm \u5305\u7c7b\u578b\u7684\u9879\u76ee\uff0c\u4f60\u53ef\u4ee5\u6267\u884c npm publish \u547d\u4ee4\u5c06\u8fd9\u4e2a\u9879\u76ee\u53d1\u5e03\u5230 npm\nRegistry\u3002\n\nnpm Registry \u662f\u4e00\u4e2a npm \u5305\u5b58\u50a8\u7684\u5730\u65b9\uff0c\u5f00\u53d1\u8005\u4eec\u4e0d\u4ec5\u53ef\u4ee5\u5c06\u4ed6\u4eec\u81ea\u5df1\u7684 npm \u5305\u53d1\u5e03\u5230 npm Registry\uff0c\u8fd8\u53ef\u4ee5\u901a\u8fc7 npm\nRegistry \u4f7f\u7528\u5176\u4ed6\u5f00\u53d1\u8005\u53d1\u5e03\u7684 npm \u5305\u3002\n\n\u4f18\u8d28\u7684 npm \u5305\u4f1a\u6709\u66f4\u591a\u7684\u4eba\u53bb\u4f7f\u7528\uff0c\u56e0\u4e3a\u5b83\u4e0d\u4ec5\u8282\u7701\u4e86\u5f88\u591a\u4ee3\u7801\u5b9e\u73b0\u7684\u5de5\u4f5c\uff0c\u540c\u65f6\u4e5f\u4e0d\u5bb9\u6613\u8ba9\u9879\u76ee\u51fa\u73b0\u95ee\u9898\u3002\n\n\n\u4f7f\u7528\u7b2c\u4e09\u65b9 NPM \u5305\n\n\u5f53\u8981\u4e3a\u521d\u59cb\u5316\u7684\u9879\u76ee\u589e\u52a0\u7b2c\u4e09\u65b9\u7684 npm \u5305\u7684\u65f6\u5019\uff0c\u6211\u4eec\u53ef\u4ee5\u628a\u8fd9\u4e00\u8fc7\u7a0b\u53eb\u505a\u201c\u4e3a\u9879\u76ee\u5b89\u88c5\u4f9d\u8d56\u201d\u6216\u662f\u201c\u4e3a\u9879\u76ee\u589e\u52a0\u4f9d\u8d56\u201d\u3002\u5728\u589e\u52a0\u4f9d\u8d56\u4e4b\u524d\uff0c\u9996\u5148\u6211\u4eec\u8981\u7279\u522b\u4e86\u89e3\u4e00\u4ef6\u4e8b\u60c5\n\u2014\u2014 npm \u4f9d\u8d56\u7684\u8f6f\u4ef6\u5305\u7c7b\u578b\uff1a\n\n * "dependencies"\uff1a\u4e00\u79cd\u662f\u4f60\u7684\u5e94\u7528\u7a0b\u5e8f\u5728\u751f\u4ea7\u73af\u5883\u4e2d\u9700\u8981\u7684\u8f6f\u4ef6\u5305\u3002\n * "devDependencies"\uff1a\u53e6\u4e00\u79cd\u662f\u4ec5\u5728\u672c\u5730\u5f00\u53d1\u548c\u6d4b\u8bd5\u4e2d\u9700\u8981\u7684\u8f6f\u4ef6\u5305\u3002\n   \n   > \u8f6f\u4ef6\u5305\u53ef\u4ee5\u7406\u89e3\u4e3a\u662f\u7b2c\u4e09\u65b9\u7684 npm \u5305\u3002\n\n\u4f60\u53ef\u4ee5\u901a\u8fc7\u6267\u884c npm install npm-package-name \u6216\u8005 npm add npm-package-name\n\u7684\u65b9\u5f0f\u6765\u5b89\u88c5\u5728\u751f\u4ea7\u73af\u5883\u4e2d\u9700\u8981\u7684\u8f6f\u4ef6\u5305\uff0c\u6216\u8005\u4e5f\u53ef\u4ee5\u5728 package.json \u6587\u4ef6\u4e2d\u624b\u52a8\u7684\u5c06\u9700\u8981\u5b89\u88c5\u7684\u5305\u548c\u5bf9\u5e94\u7684\u8bed\u4e49\u5316\u7248\u672c\u5199\u5728 "dependencies"\n\u91cc\uff0c\u5e76\u6267\u884c npm install \u547d\u4ee4\uff1a\n\n{\n  "name": "your-npm-project",\n  "dependencies": {\n    "npm-package-name": "0.1.0"\n  }\n}\n\n\n\u540c\u7406\uff0c\u4f60\u4e5f\u53ef\u4ee5\u6267\u884c npm install npm-package-name --save-dev \u6216 npm add npm-package-name\n--save-dev \u7684\u65b9\u5f0f\u6765\u5b89\u88c5\u4ec5\u5728\u672c\u5730\u5f00\u53d1\u548c\u6d4b\u8bd5\u4e2d\u9700\u8981\u7684\u8f6f\u4ef6\u5305\uff0c\u6216\u8005\u4e5f\u53ef\u4ee5\u5728 package.json \u6587\u4ef6\u4e2d\u624b\u52a8\u7684\u5c06\u9700\u8981\u5b89\u88c5\u7684\u5305\u548c\u5bf9\u5e94\u7684\u8bed\u4e49\u5316\u7248\u672c\u5199\u5728\n"devDependencies" \u91cc\uff0c\u5e76\u6267\u884c npm install \u547d\u4ee4\uff1a\n\n{\n  "name": "your-npm-project",\n  "devDependencies": {\n    "npm-package-name": "0.1.0"\n  }\n}\n\n\n\u5728\u5b89\u88c5\u6216\u8005\u4f7f\u7528\u7b2c\u4e09\u65b9 npm \u5305\u7684\u65f6\u5019\u4e00\u5b9a\u8981\u786e\u5b9a\u5b83\u4eec\u7684\u7528\u9014\uff0c\u4ee5\u53ca\u901a\u8fc7\u533a\u5206\u5b83\u4eec\u7684\u7c7b\u578b\u786e\u5b9a\u597d\u5b83\u4eec\u5e94\u8be5\u653e\u5728 "dependencies" \u8fd8\u662f\n"devDependencies" \u4e2d\u3002\n\n\u4e00\u822c\u6765\u8bf4\uff0c\u9700\u8981\u5728\u6e90\u4ee3\u7801\u4e2d\u4f7f\u7528\u5230\u7684\u5305\u90fd\u5c5e\u4e8e dependencies \u4f9d\u8d56\u3002\u9664\u975e\u4f60\u901a\u8fc7\u6253\u5305\u7684\u65b9\u5f0f\u5c06\u4f9d\u8d56\u7684\u4ee3\u7801\u8f93\u51fa\u5230\u672c\u5730\uff0c\u90a3\u4e48\u8fd9\u79cd\u60c5\u51b5\u53ef\u4ee5\u5c06\u5b83\u4f5c\u4e3a\ndevDependencies \u4f9d\u8d56\u3002\n\n\n\u8fd8\u9700\u8981\u4e86\u89e3\u7684 NPM \u96f6\u788e\u77e5\u8bc6\n\n\nNPM \u5305\u7684\u7a0b\u5e8f\u5165\u53e3\n\n\u5728 package.json \u4e2d\u5b58\u5728\u4e00\u4e2a "main" \u5c5e\u6027\uff0c\u5b83\u5bf9\u5e94\u7684\u503c\u662f\u4e00\u4e2a\u6a21\u5757 ID\uff0c\u6216\u8005\u66f4\u76f4\u89c2\u7684\u8bf4\u662f\u4e00\u4e2a NodeJS \u6587\u4ef6\u8def\u5f84\uff0c\u5b83\u662f\u4f60\u7a0b\u5e8f\u7684\u4e3b\u8981\u5165\u53e3\u3002\n\n\u4f8b\u5982\u4f60\u7684\u5305\u540d\u4e3a foo\uff0c\u5e76\u4e14\u7528\u6237\u5b89\u88c5\u4e86\u5b83\uff0c\u7136\u540e\u6267\u884c require("foo") \u4ee3\u7801\uff0c\u90a3\u4e48 foo \u8fd9\u4e2a npm \u5305\u7684 "main"\n\u5b57\u6bb5\u5bf9\u5e94\u7684\u6587\u4ef6\u5c06\u4f1a\u88ab\u5bfc\u51fa\u3002\n\n\u63a8\u8350\u5728\u4f60\u7684 npm \u5305\u91cc\u4e00\u5b9a\u8981\u8bbe\u7f6e "main" \u5b57\u6bb5\u3002\u5982\u679c\u6ca1\u6709\u8bbe\u7f6e "main"\uff0c\u5219\u9ed8\u8ba4\u5165\u53e3\u4e3a\u5305\u7684\u6839\u76ee\u5f55\u4e0b\u7684 index.js \u6587\u4ef6\u3002\n\n\u9664\u4e86\u9700\u8981\u8bbe\u7f6e "main" \u5c5e\u6027\u4ee5\u5916\uff0c\u4e00\u822c\u8fd8\u4f1a\u8bbe\u7f6e "module" \u5c5e\u6027\u3002\u5b83\u4e0e "main" \u5c5e\u6027\u7684\u7528\u9014\u7c7b\u4f3c\uff0c\u5b83\u4e3b\u8981\u662f\u7528\u4e8e\u5728 webpack\n\u573a\u666f\u4e0b\u4f7f\u7528\u3002webpack \u5728\u5927\u591a\u6570\u60c5\u51b5\u4e0b\uff0c\u4f1a\u4ee5 "module" -> "main" \u8fd9\u4e2a\u987a\u5e8f\u8bfb\u53d6 npm \u5305\u7684\u5165\u53e3\uff08\u6587\u4ef6\uff09\u3002\n\n> \u60f3\u8981\u4e86\u89e3\u5173\u4e8e webpack \u5982\u4f55\u505a\u8fd9\u4ef6\u4e8b\uff0c\u53ef\u4ee5\u67e5\u770b\u8fd9\u4e2a\u94fe\u63a5\u3002\n\n\n"SCRIPTS"\n\npackage.json \u6587\u4ef6\u7684 "scripts" \u5c5e\u6027\u652f\u6301\u4e00\u4e9b\u5185\u7f6e\u7684\u811a\u672c\u548c npm \u9884\u8bbe\u7684\u751f\u547d\u5468\u671f\u4e8b\u4ef6\uff0c\u4ee5\u53ca\u4efb\u610f\u7684\u811a\u672c\u3002\n\n\u8fd9\u4e9b\u90fd\u53ef\u4ee5\u901a\u8fc7\u8fd0\u884c npm run-script <stage> \u6216\u7b80\u79f0 npm run <stage> \u6765\u6267\u884c\u3002\n\n\u540d\u79f0\u5339\u914d\u7684\u524d\u7f6e\u547d\u4ee4\u548c\u540e\u7f6e\u547d\u4ee4\u4e5f\u4f1a\u88ab\u8fd0\u884c\uff08\u4f8b\u5982 premyscript\u3001myscript\u3001postmyscript\uff09\u3002\n\n{\n  "scripts": {\n    "premyscript": "",\n    "myscript": "",\n    "postmyscript": ""\n  }\n}\n\n\n\u5f53\u6267\u884c npm run myscripts \u7684\u65f6\u5019\uff0cpremyscripts \u5bf9\u5e94\u7684\u811a\u672c\u4f1a\u5728\u5b83\u4e4b\u524d\u6267\u884c\uff0cpostmyscripts \u5bf9\u5e94\u7684\u811a\u672c\u4f1a\u5728\u5b83\u4e4b\u540e\u6267\u884c\u3002\n\n\u6765\u81ea\u4f9d\u8d56\u7684\u811a\u672c\u547d\u4ee4\u53ef\u4ee5\u7528 npm explore <pkg> -- npm run <stage> \u8fd0\u884c\u3002\n\n\u8fd8\u6709\u4e00\u4e9b\u7279\u6b8a\u7684\u751f\u547d\u5468\u671f\u811a\u672c\uff08Life Scripts\uff09\uff0c\u53ea\u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\u53d1\u751f\u3002\u8fd9\u91cc\u4ecb\u7ecd\u51e0\u4e2a\u901a\u5e38\u9700\u8981\u4e86\u89e3\u7684\u60c5\u51b5\u3002\n\nNPM INSTALL\n\n\u5f53\u4f60\u8fd0\u884c npm install -g <pkg-name> \u65f6\uff0c\u4ee5\u4e0b\u811a\u672c\u4f1a\u8fd0\u884c\u3002\n\n * preinstall\n * install\n * postinstall\n * prepublish\n * preprepare\n * prepare\n * postprepare\n\n\u5982\u679c\u4f60\u7684\u8f6f\u4ef6\u5305\u6839\u76ee\u5f55\u6709\u4e00\u4e2a binding.gyp \u6587\u4ef6\uff0c\u800c\u4f60\u6ca1\u6709\u5b9a\u4e49 install \u6216 preinstall \u811a\u672c\uff0c\u90a3\u4e48 npm \u5c06\u4ee5 node-gyp\nrebuild \u4f5c\u4e3a\u9ed8\u8ba4\u7684 install \u547d\u4ee4\uff0c\u4f7f\u7528 node-gyp \u8fdb\u884c\u7f16\u8bd1\u3002\n\nNPM PUBLISH\n\n\u5f53\u53d1\u5e03\u9879\u76ee\u7684\u65f6\u5019\uff0c\u6267\u884c\u8be5\u547d\u4ee4\u4f1a\u89e6\u53d1\u4ee5\u4e0b\u811a\u672c\uff1a\n\n * prepublishOnly\n * prepack\n * prepare\n * postpack\n * publish\n * postpublish\n\n\u5f53\u4ee5 --dry-run \u6a21\u5f0f\u8fd0\u884c\u7684\u65f6\u5019\uff0cprepare \u5bf9\u5e94\u7684\u811a\u672c\u5c06\u4e0d\u4f1a\u6267\u884c\u3002\n\n\nPEERDEPENDENCIES\n\n\u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\uff0c\u4f60\u7684 npm \u9879\u76ee\u4e0e\u5b83\u7684\u5bbf\u4e3b\u5de5\u5177\u6216\u8005\u5e93\u4e4b\u95f4\u5b58\u5728\u67d0\u79cd\u517c\u5bb9\u5173\u7cfb\uff08\u4f8b\u5982\u4e00\u4e2a webpack \u63d2\u4ef6\u9879\u76ee\u548c webpack\uff09\uff0c\u540c\u65f6\u4f60\u7684 npm\n\u9879\u76ee\u4e0d\u60f3\u5c06\u5bbf\u4e3b\u4f5c\u4e3a\u5fc5\u8981\u7684\u4f9d\u8d56\uff0c\u8fd9\u4e2a\u65f6\u5019\u901a\u5e38\u8bf4\u660e\u4f60\u7684\u9879\u76ee\u53ef\u80fd\u662f\u8fd9\u4e2a\u5bbf\u4e3b\u5de5\u5177\u6216\u8005\u5e93\u7684\u63d2\u4ef6\u3002\u4f60\u7684 npm\n\u9879\u76ee\u4f1a\u5bf9\u5bbf\u4e3b\u5305\u7684\u7248\u672c\u6709\u4e00\u5b9a\u7684\u8981\u6c42\uff0c\u56e0\u4e3a\u53ea\u6709\u5728\u7279\u5b9a\u7684\u7248\u672c\u4e0b\u624d\u4f1a\u66b4\u9732\u51fa npm \u9879\u76ee\u6240\u9700\u8981\u7684 API\u3002\n\n\u5173\u4e8e\u66f4\u591a peerDependencies \u7684\u89e3\u91ca\uff0c\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u7684\u94fe\u63a5\u4e86\u89e3 npm\u3001pnpm\u3001Yarn \u5bf9\u4e8e\u5b83\u7684\u4e0d\u540c\u5904\u7406\u65b9\u5f0f\uff1a\n\n * npm \u5bf9 peerDependencies \u7684\u89e3\u91ca\n * pnpm vs npm VS Yarn\n\n\nNPM \u5305\u7ba1\u7406\u5668\n\n\u9664\u4e86 npm \u8fd9\u79cd\u6807\u51c6\u7684\u5305\u7ba1\u7406\u5668\u4ee5\u5916\uff0c\u76ee\u524d\u4e3b\u6d41\u7684\u8fd8\u6709 pnpm \u548c Yarn\uff0c\u5b83\u4eec\u90fd\u662f\u4e0d\u9519\u7684 npm cli \u66ff\u4ee3\u54c1\u3002\n\n\u63a8\u8350\u4f7f\u7528 pnpm \u6765\u7ba1\u7406\u9879\u76ee\u4f9d\u8d56\uff0c\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u7684\u65b9\u5f0f\u5b89\u88c5\u5b83\uff1a\n\nnpm install -g pnpm\n\n\n\nMODULE TOOLS \u914d\u7f6e\u6587\u4ef6\n\n\u901a\u8fc7@modern-js/create\u521b\u5efa\u7684\u6a21\u5757\u5de5\u7a0b\u9879\u76ee\u76ee\u5f55\u4e0b\u63d0\u4f9b\u4e86 Module Tools \u7684\u914d\u7f6e\u6587\u4ef6 \u2014\u2014 modern.config.(j|t)s\u3002\u4f46\nmodern.config \u914d\u7f6e\u6587\u4ef6\u4e0d\u662f\u5fc5\u987b\u5b58\u5728\u7684\u3002\n\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u751f\u6210\u7684\u914d\u7f6e\u6587\u4ef6\u7684\u5185\u5bb9\u5982\u4e0b\uff1a\n\n// modern.config.ts\n\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildPreset: \'npm-library\',\n});\n\n\n// modern.config.js\n\n\nexport default {\n  plugins: [moduleTools()],\n  buildPreset: \'npm-library\',\n};\n\n\n\u6211\u4eec\u63a8\u8350\u4f7f\u7528 defineConfig \u51fd\u6570\uff0c\u4e0d\u8fc7\u5e76\u4e0d\u5f3a\u5236\u4f7f\u7528\u5b83\u3002\u56e0\u6b64\u4f60\u4e5f\u53ef\u4ee5\u5728\u914d\u7f6e\u6587\u4ef6\u4e2d\u76f4\u63a5\u8fd4\u56de\u4e00\u4e2a\u5bf9\u8c61\uff1a\n\n// modern.config.ts\nexport default {};\n\n\n// modern.config.js\nexport default {};\n',frontmatter:{sidebar_position:1}},{id:45,title:"\u547d\u4ee4\u9884\u89c8",routePath:"/module-tools/guide/basic/command-preview",toc:[{id:"modern-build-3",text:"modern build",depth:2},{id:"modern-new-3",text:"modern new",depth:2},{id:"modern-dev-3",text:"modern dev",depth:2},{id:"modern-test-3",text:"modern test",depth:2},{id:"modern-lint-3",text:"modern lint",depth:2},{id:"modern-change-1",text:"modern change",depth:2},{id:"modern-pre-3",text:"modern pre",depth:2},{id:"modern-bump-3",text:"modern bump",depth:2},{id:"modern-release-3",text:"modern release",depth:2},{id:"modern-gen-release-note-3",text:"modern gen-release-note",depth:2},{id:"modern-upgrade-3",text:"modern upgrade",depth:2}],content:'\u547d\u4ee4\u9884\u89c8\n\n\u6a21\u5757\u5de5\u7a0b\u9879\u76ee\u53ef\u4ee5\u4f7f\u7528\u7684\u547d\u4ee4\uff1a\n\n\nMODERN BUILD\n\nUsage: modern build [options]\n\n\u6784\u5efa\u6a21\u5757\u547d\u4ee4\n\nOptions:\n  -w, --watch            \u4f7f\u7528\u76d1\u542c\u6a21\u5f0f\u6784\u5efa\u4ee3\u7801\n  --tsconfig [tsconfig]  \u6307\u5b9a tsconfig.json \u6587\u4ef6\u7684\u8def\u5f84 (default:\n                         "./tsconfig.json")\n  --platform [platform]  \u6784\u5efa\u6240\u6709\u6216\u8005\u6307\u5b9a\u5e73\u53f0\u7684\u4ea7\u7269\n  --no-dts               \u5173\u95ed DTS \u7c7b\u578b\u6587\u4ef6\u751f\u6210\u548c\u7c7b\u578b\u68c0\u67e5\n  --no-clear             \u5173\u95ed\u81ea\u52a8\u6e05\u9664\u4ea7\u7269\u8f93\u51fa\u76ee\u5f55\u7684\u884c\u4e3a\n  -h, --help             \u5c55\u793a\u5f53\u524d\u547d\u4ee4\u7684\u4fe1\u606f\n\n\n\u5f53\u60f3\u8981\u542f\u52a8\u9879\u76ee\u6784\u5efa\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u6267\u884c modern build \u547d\u4ee4\u3002\u5728\u4f7f\u7528\u8fd9\u4e2a\u547d\u4ee4\u7684\u65f6\u5019\uff0c\u6211\u4eec\u53ef\u4ee5\uff1a\n\n * \u5f53\u60f3\u8981\u4ee5\u89c2\u5bdf\u6a21\u5f0f\u542f\u52a8\u6784\u5efa\u65f6\uff0c\u4f7f\u7528 --watch \u9009\u9879\u3002\n * \u5f53\u60f3\u8981\u6307\u5b9a\u9879\u76ee\u7f16\u8bd1\u8bfb\u53d6\u7684 TypeScript \u914d\u7f6e\u6587\u4ef6\u7684\u8def\u5f84\u65f6\uff0c\u4f7f\u7528 build --tsconfig ./path/config.json\n   \u9009\u9879\u3002\u4f7f\u7528\u8be5\u9009\u9879\u540e\uff0c\u4f1a\u8986\u76d6\u6240\u6709 buildConfig \u91cc dts.tsconfigPath \u914d\u7f6e\u3002\n * \u5f53\u9700\u8981\u5173\u95ed\u9879\u76ee\u7684 DTS \u7c7b\u578b\u6587\u4ef6\u751f\u6210\u548c\u7c7b\u578b\u68c0\u67e5\u884c\u4e3a\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528 --no-dts\n   \u9009\u9879\u3002\u6ce8\u610f\uff1a\u7c7b\u578b\u6587\u4ef6\u7684\u751f\u6210\u4f9d\u8d56\u7c7b\u578b\u68c0\u67e5\u7684\u7ed3\u679c\u3002\u5982\u679c\u5173\u95ed\u4e86\u7c7b\u578b\u68c0\u67e5\uff0c\u90a3\u4e48\u7c7b\u578b\u6587\u4ef6\u4e5f\u4e0d\u4f1a\u751f\u6210\u3002\n * \u5f53\u9700\u8981\u5173\u95ed\u81ea\u52a8\u6e05\u9664\u4ea7\u7269\u8f93\u51fa\u76ee\u5f55\u7684\u884c\u4e3a\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528 --no-clear \u9009\u9879\u3002\n\n\u9664\u4e86\u4ee5\u4e0a\uff0c\u6a21\u5757\u5de5\u7a0b\u8fd8\u652f\u6301 platform \u6784\u5efa\u6a21\u5f0f\uff0c\u53ef\u4ee5\u7528\u4e8e\u6267\u884c\u5176\u4ed6\u5de5\u5177\u7684\u6784\u5efa\u4efb\u52a1\u3002\u4f8b\u5982\uff0c\u76ee\u524d\u5b98\u65b9\u652f\u6301\u5728\u5b89\u88c5\u4e86\n@modern-js/plugin-storybook \u63d2\u4ef6\u540e\uff0c\u53ef\u4ee5\u901a\u8fc7\u6267\u884c modern build --platform \u6216\u8005 modern build\n--platform storybook \u547d\u4ee4\u542f\u52a8 Storybook \u6784\u5efa\u4efb\u52a1\u751f\u6210 Storybook \u4ea7\u7269\u3002\n\n\u5728\u6267\u884c Storybook \u6784\u5efa\u7684\u65f6\u5019\uff0c\u5b83\u9700\u8981\u8bfb\u53d6\u9879\u76ee\u7684\u6784\u5efa\u4ea7\u7269\u3002\u56e0\u6b64\u5728\u6267\u884c modern build --platform \u547d\u4ee4\u542f\u52a8 Storybook\n\u6784\u5efa\u7684\u65f6\u5019\uff0c\u8981\u5148\u6267\u884c\u4e00\u6b21 modern build \u786e\u4fdd\u6e90\u7801\u6784\u5efa\u4ea7\u7269\u7684\u5b58\u5728\u3002\n\n\nMODERN NEW\n\nUsage: modern new [options]\n\n\u6a21\u5757\u5316\u5de5\u7a0b\u65b9\u6848\u4e2d\u6267\u884c\u751f\u6210\u5668\n\nOptions:\n  -d, --debug            \u5f00\u542f Debug \u6a21\u5f0f\uff0c\u6253\u5370\u8c03\u8bd5\u65e5\u5fd7\u4fe1\u606f (default: false)\n  -c, --config <config>  \u751f\u6210\u5668\u8fd0\u884c\u9ed8\u8ba4\u914d\u7f6e(JSON \u5b57\u7b26\u4e32)\n  --dist-tag <tag>       \u751f\u6210\u5668\u4f7f\u7528\u7279\u6b8a\u7684 npm Tag \u7248\u672c\n  --registry             \u751f\u6210\u5668\u8fd0\u884c\u8fc7\u7a0b\u4e2d\u5b9a\u5236 npm Registry\n  -h, --help             display help for command\n\n\nmodern new \u547d\u4ee4\u7528\u4e8e\u542f\u52a8\u5fae\u751f\u6210\u5668\u529f\u80fd\uff0c\u5b83\u53ef\u4ee5\u4e3a\u9879\u76ee\u542f\u7528\u9ed8\u8ba4\u6ca1\u6709\u63d0\u4f9b\u7684\u529f\u80fd\u3002\n\n\u76ee\u524d\u53ef\u4ee5\u5f00\u542f\u7684\u529f\u80fd\u6709\uff1a\n\n * Test \u6d4b\u8bd5\n * Storybook \u8c03\u8bd5\n * Tailwind CSS \u652f\u6301\n * Modern.js Runtime API\n\n\u5173\u4e8e\u8fd9\u4e9b\u529f\u80fd\uff0c\u53ef\u4ee5\u901a\u8fc7\u3010\u4f7f\u7528\u5fae\u751f\u6210\u5668\u3011 \u7ae0\u8282\u4e86\u89e3\u66f4\u591a\u3002\n\n\nMODERN DEV\n\nUsage: modern dev [options]\n\n\u672c\u5730\u5f00\u53d1\u547d\u4ee4\n\nOptions:\n  -h, --help             display help for command\n\nCommands:\n[dev-tools-subCommand]\n\n\n\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848\u63d0\u4f9b\u4e86\u4f7f\u7528\u8c03\u8bd5\u5de5\u5177\u7684\u80fd\u529b\uff0c\u53ef\u4ee5\u901a\u8fc7 modern dev \u547d\u4ee4\u6765\u542f\u52a8\u3002\u4e0d\u8fc7\u8981\u6ce8\u610f\u7684\u662f\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u662f\u6ca1\u6709\u63d0\u4f9b\u8c03\u8bd5\u76f8\u5173\u7684\u63d2\u4ef6\uff0c\u56e0\u6b64\u6b64\u65f6\u6267\u884c\nmodern dev \u4f1a\u63d0\u793a\uff1a "No dev tools found available"\u3002\n\n\u76ee\u524d\u5b98\u65b9\u652f\u6301\u7684\u8c03\u8bd5\u5de5\u5177\u6709 Storybook\uff0c\u56e0\u6b64\u5728\u4f60\u6267\u884c modern new \u547d\u4ee4\u5f00\u542f\u5b83\u540e\uff0c\u5c31\u53ef\u4ee5\u6267\u884c modern dev \u6216\u8005 modern dev\nstorybook \u6267\u884c\u5b83\u3002\n\n\nMODERN TEST\n\nUsage: modern test [options]\n\nOptions:\n  -h, --help  display help for command\n\n\n\u9700\u8981\u5148\u6267\u884c modern new \u5f00\u542f\u6d4b\u8bd5\u529f\u80fd\uff0c\u7136\u540e\u624d\u53ef\u4ee5\u6267\u884c modern test \u547d\u4ee4\u3002 modern test \u547d\u4ee4\u4f1a\u81ea\u52a8\u5c06\nsrc/tests/*.test.(js|ts|jsx|tsx) \u6587\u4ef6\u5f53\u505a\u6d4b\u8bd5\u7528\u4f8b\u8fd0\u884c\u3002\n\n\nMODERN LINT\n\nUsage: modern lint [options] [...files]\n\nlint and fix source files\n\nOptions:\n  --no-fix    disable auto fix source file\n  -h, --help  display help for command\n\n\n\u8fd0\u884c ESLint \u68c0\u67e5\u4ee3\u7801\u8bed\u6cd5\u60c5\u51b5\u3002\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u53ea\u9700\u8981\u5728 git commit \u9636\u6bb5\u901a\u8fc7 lint-staged \u68c0\u67e5\u672c\u6b21\u63d0\u4ea4\u4fee\u6539\u7684\u90e8\u5206\u4ee3\u7801\u3002\n\n * --no-fix \u53c2\u6570\u8bbe\u7f6e\u540e\u53ef\u4ee5\u5173\u95ed\u81ea\u52a8\u4fee\u590d lint \u9519\u8bef\u4ee3\u7801\u7684\u80fd\u529b\u3002\n\n\nMODERN CHANGE\n\nUsage: modern change [options]\n\n\u521b\u5efa\u53d8\u66f4\u96c6\n\nOptions:\n  --empty     \u521b\u5efa\u7a7a\u53d8\u66f4\u96c6 (default: false)\n  --open      \u4f7f\u7528\u7f16\u8f91\u5668\u4e2d\u6253\u5f00\u521b\u5efa\u7684\u53d8\u66f4\u96c6 (default: false)\n  -h, --help  display help for command\n\n\nmodern change \u547d\u4ee4\u7528\u4e8e\u751f\u6210 changesets \u9700\u8981\u7684 Markdown \u6587\u4ef6\u3002\n\n\nMODERN PRE\n\nUsage: modern pre [options] <enter|exit> [tag]\n\n\u8fdb\u5165\u548c\u9000\u51fa\u9884\u53d1\u5e03\u6a21\u5f0f\n\nOptions:\n  -h, --help  display help for command\n\n\n\u53ef\u4ee5\u4f7f\u7528 modern pre \u547d\u4ee4\u5728\u6b63\u5f0f\u53d1\u5e03\u524d\u9884\u53d1\u5e03\u4e00\u4e2a\u7248\u672c\u3002\n\n\nMODERN BUMP\n\nUsage: modern bump [options]\n\n\u4f7f\u7528\u53d8\u66f4\u96c6\u81ea\u52a8\u66f4\u65b0\u53d1\u5e03\u7248\u672c\u548c\u53d8\u66f4\u65e5\u5fd7\n\nOptions:\n  --canary       \u521b\u5efa\u4e00\u4e2a\u9884\u53d1\u5e03\u7248\u672c\u8fdb\u884c\u6d4b\u8bd5 (default: false)\n  --preid <tag>  \u5728\u5bf9\u9884\u53d1\u5e03\u7248\u672c\u8fdb\u884c\u7248\u672c\u63a7\u5236\u65f6\u6307\u5b9a\u6807\u8bc6\u7b26 (default: "next")\n  --snapshot     \u521b\u5efa\u4e00\u4e2a\u7279\u6b8a\u7248\u672c\u8fdb\u884c\u6d4b\u8bd5 (default: false)\n  -h, --help     display help for command\n\n\n\u6309\u7167 changesets \u751f\u6210\u7684\u53d8\u66f4\u8bb0\u5f55\u7684 Markdown \u6587\u4ef6\u4fee\u6539 package.json \u4e2d\u7684\u7248\u672c\u53f7\uff0c \u540c\u65f6\u751f\u6210 CHANGELOG.md \u6587\u4ef6\u3002\n\n\nMODERN RELEASE\n\nUsage: modern release [options]\n\n\u53d1\u5e03 npm \u5305\n\nOptions:\n  --tag <tag>       \u53d1\u5e03 npm \u5305\u4f7f\u7528\u7279\u5b9a\u7684 tag (default: "")\n  --ignore-scripts  \u53d1\u5e03\u65f6\u5ffd\u7565 package.json \u4e2d\u7684 scripts \u547d\u4ee4\uff0c\u4ec5\u652f\u6301\u5728 pnpm monorepo\n                    \u4e2d\u4f7f\u7528 (default: "")\n  -h, --help        display help for command\n\n\nmodern release \u547d\u4ee4\u53ef\u4ee5\u5c06\u6a21\u5757\u53d1\u5e03\u5230 npm Registry \u4e0a\u3002\n\n * --tag \u53c2\u6570\u53ef\u4ee5\u6307\u5b9a\u53d1\u5e03\u65f6\u5177\u4f53\u7684 dist tags\u3002\n\n\nMODERN GEN-RELEASE-NOTE\n\nUsage: modern gen-release-note [options]\n\n\u6839\u636e\u5f53\u524d\u4ed3\u5e93 changeset \u4fe1\u606f\u751f\u6210 Release Note\n\nOptions:\n  --repo <repo>      \u4ed3\u5e93\u540d\u79f0\uff0c\u7528\u4e8e\u751f\u6210 Pull Request \u94fe\u63a5\uff0c \u4f8b\u5982\uff1a modern-js-dev/modern.js\n  --custom <cumtom>  \u81ea\u5b9a\u4e49 Release Note \u751f\u6210\u51fd\u6570\n  -h, --help         display help for command\n\n\n\u6839\u636e\u5f53\u524d\u4ed3\u5e93\u7684 changeset \u4fe1\u606f\u81ea\u52a8\u751f\u6210 Release Note\u3002\n\n\u9700\u8981\u5728 bump \u547d\u4ee4\u4e4b\u524d\u6267\u884c\u3002\n\n\nMODERN UPGRADE\n\nUsage: modern upgrade [options]\n\n\u5347\u7ea7 Modern.js \u5230\u6700\u65b0\u7248\u672c\n\nOptions:\n  --registry <registry>  \u5b9a\u5236 npm registry (default: "")\n  -d,--debug             \u5f00\u542f Debug \u6a21\u5f0f\uff0c\u6253\u5370\u8c03\u8bd5\u65e5\u5fd7\u4fe1\u606f (default: false)\n  --cwd <cwd>            \u9879\u76ee\u8def\u5f84 (default: "")\n  -h, --help             display help for command\n\n\nmodern upgrade \u547d\u4ee4\uff0c\u7528\u4e8e\u5347\u7ea7\u9879\u76ee Modern.js \u76f8\u5173\u4f9d\u8d56\u81f3\u6700\u65b0\u7248\u672c\u3002\n\n\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u6267\u884c\u547d\u4ee4 npx modern upgrade\uff0c\u4f1a\u9ed8\u8ba4\u5c06\u5f53\u524d\u6267\u884c\u547d\u4ee4\u9879\u76ee\u7684 package.json \u4e2d\u7684 Modern.js\n\u76f8\u5173\u4f9d\u8d56\u66f4\u65b0\u81f3\u6700\u65b0\u7248\u672c\u3002',frontmatter:{sidebar_position:2}},{id:46,title:"\u4fee\u6539\u8f93\u51fa\u4ea7\u7269",routePath:"/module-tools/guide/basic/modify-output-product",toc:[{id:"\u9ed8\u8ba4\u8f93\u51fa\u4ea7\u7269-1",text:"\u9ed8\u8ba4\u8f93\u51fa\u4ea7\u7269",depth:2},{id:"\u6784\u5efa\u9884\u8bbe-1",text:"\u6784\u5efa\u9884\u8bbe",depth:2},{id:"\u6784\u5efa\u9884\u8bbe\u7684\u5b57\u7b26\u4e32\u5f62\u5f0f-1",text:"\u6784\u5efa\u9884\u8bbe\u7684\u5b57\u7b26\u4e32\u5f62\u5f0f",depth:3},{id:"\u6784\u5efa\u9884\u8bbe\u7684\u51fd\u6570\u5f62\u5f0f-1",text:"\u6784\u5efa\u9884\u8bbe\u7684\u51fd\u6570\u5f62\u5f0f",depth:3},{id:"\u6784\u5efa\u914d\u7f6e\u5bf9\u8c61-1",text:"\u6784\u5efa\u914d\u7f6e\uff08\u5bf9\u8c61\uff09",depth:2},{id:"\u4ec0\u4e48\u65f6\u5019\u4f7f\u7528-buildconfig-1",text:"\u4ec0\u4e48\u65f6\u5019\u4f7f\u7528 buildConfig",depth:2}],content:'\u4fee\u6539\u8f93\u51fa\u4ea7\u7269\n\n\n\u9ed8\u8ba4\u8f93\u51fa\u4ea7\u7269\n\n\u5f53\u5728\u521d\u59cb\u5316\u7684\u9879\u76ee\u91cc\u4f7f\u7528 modern build \u547d\u4ee4\u7684\u65f6\u5019\uff0c\u4f1a\u6839\u636e Module Tools \u9ed8\u8ba4\u652f\u6301\u7684\u914d\u7f6e\u751f\u6210\u76f8\u5e94\u7684\u4ea7\u7269\u3002\u9ed8\u8ba4\u652f\u6301\u7684\u914d\u7f6e\u5177\u4f53\u5982\u4e0b\uff1a\n\n\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildPreset: \'npm-library\',\n});\n\n\n\u9ed8\u8ba4\u751f\u6210\u4ea7\u7269\u5177\u6709\u4ee5\u4e0b\u7279\u70b9\uff1a\n\n * \u4f1a\u751f\u6210CommonJS\u548cESM\u4e24\u4efd\u4ea7\u7269\u3002\n * \u4ee3\u7801\u8bed\u6cd5\u652f\u6301\u5230 ES6 ,\u66f4\u9ad8\u7ea7\u7684\u8bed\u6cd5\u5c06\u4f1a\u88ab\u8f6c\u6362\u3002\n * \u6240\u6709\u7684\u4ee3\u7801\u7ecf\u8fc7\u6253\u5305\u53d8\u6210\u4e86\u4e00\u4e2a\u6587\u4ef6\uff0c\u5373\u8fdb\u884c\u4e86 bundle \u5904\u7406\u3002\n * \u4ea7\u7269\u8f93\u51fa\u6839\u76ee\u5f55\u4e3a\u9879\u76ee\u4e0b\u7684 dist \u76ee\u5f55\uff0c\u7c7b\u578b\u6587\u4ef6\u8f93\u51fa\u7684\u76ee\u5f55\u4e3a dist/types\u3002\n\n\u770b\u5230\u8fd9\u91cc\u4f60\u53ef\u80fd\u4f1a\u6709\u4ee5\u4e0b\u7591\u95ee\uff1a\n\n 1. buildPreset \u662f\u4ec0\u4e48\uff1f\n 2. \u4ea7\u7269\u7684\u8fd9\u4e9b\u7279\u70b9\u662f\u7531\u4ec0\u4e48\u51b3\u5b9a\u7684\uff1f\n\n\u90a3\u4e48\u63a5\u4e0b\u6765\u9996\u5148\u89e3\u91ca\u4e00\u4e0b buildPreset\u3002\n\n\n\u6784\u5efa\u9884\u8bbe\n\nbuildPreset \u4ee3\u8868\u7740\u63d0\u524d\u51c6\u5907\u597d\u7684\u4e00\u7ec4\u6216\u8005\u591a\u7ec4\u6784\u5efa\u76f8\u5173\u7684\u914d\u7f6e\uff0c\u53ea\u9700\u8981\u4f7f\u7528 buildPreset\n\u5bf9\u5e94\u7684\u9884\u8bbe\u503c\uff0c\u5c31\u53ef\u4ee5\u7701\u53bb\u9ebb\u70e6\u4e14\u590d\u6742\u7684\u914d\u7f6e\u5de5\u4f5c\uff0c\u5f97\u5230\u7b26\u5408\u9884\u671f\u7684\u4ea7\u7269\u3002\n\n\n\u6784\u5efa\u9884\u8bbe\u7684\u5b57\u7b26\u4e32\u5f62\u5f0f\n\n\u6784\u5efa\u9884\u8bbe\u7684\u503c\u53ef\u4ee5\u662f\u5b57\u7b26\u4e32\u5f62\u5f0f\uff0c\u56e0\u6b64\u8fd9\u6837\u5f62\u5f0f\u7684\u6784\u5efa\u9884\u8bbe\u53eb\u505a\u9884\u8bbe\u5b57\u7b26\u4e32\u3002\n\n\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848\u6839\u636e npm \u5305\u4f7f\u7528\u7684\u901a\u7528\u573a\u666f\uff0c\u63d0\u4f9b\u4e86\u901a\u7528\u7684\u6784\u5efa\u9884\u8bbe\u5b57\u7b26\u4e32\u4ee5\u53ca\u76f8\u5e94\u7684\u53d8\u4f53\u3002\u76ee\u524d\u652f\u6301\u7684\u6240\u6709\u9884\u8bbe\u5b57\u7b26\u4e32\u53ef\u4ee5\u901a\u8fc7 BuildPreset API\n\u67e5\u770b\u3002\u8fd9\u91cc\u8bb2\u89e3\u4e00\u4e0b\u5173\u4e8e\u901a\u7528\u7684\u9884\u8bbe\u5b57\u7b26\u4e32\u4e0e\u53d8\u4f53\u4e4b\u95f4\u7684\u5173\u7cfb\u3002\n\n\u5728\u901a\u7528\u7684\u9884\u8bbe\u5b57\u7b26\u4e32\u4e2d\uff0c"npm-library" \u53ef\u4ee5\u7528\u4e8e\u5728\u5f00\u53d1\u5e93\u7c7b\u578b\u7684 npm \u5305\u7684\u573a\u666f\u4e0b\u4f7f\u7528\uff0c\u5b83\u9002\u5408\u5927\u591a\u6570\u666e\u901a\u7684\u6a21\u5757\u7c7b\u578b\u9879\u76ee\u3002\u5f53\u8bbe\u7f6e\n"npm-library" \u7684\u65f6\u5019\uff0c\u9879\u76ee\u7684\u8f93\u51fa\u4ea7\u7269\u4f1a\u6709\u4ee5\u4e0b\u7279\u70b9\uff1a\n\n * \u5728 dist/lib \u76ee\u5f55\u4e0b\u4f1a\u5f97\u5230\u4ee3\u7801\u683c\u5f0f\u4e3a cjs\u3001\u8bed\u6cd5\u652f\u6301\u5230 es6 \u4e14\u7ecf\u8fc7\u6253\u5305\u5904\u7406\u540e\u7684\u4ea7\u7269\u3002\n * \u5728 dist/es \u76ee\u5f55\u4e0b\u4f1a\u5f97\u5230\u4ee3\u7801\u683c\u5f0f\u4e3a esm\u3001\u8bed\u6cd5\u652f\u6301\u4e3a es6 \u4e14\u7ecf\u8fc7\u6253\u5305\u5904\u7406\u540e\u7684\u4ea7\u7269\u3002\n * \u5728 dist/types \u76ee\u5f55\u4e0b\u4f1a\u5f97\u5230\u7c7b\u578b\u6587\u4ef6\u3002\u5982\u679c\u4e0d\u662f TypeScript \u9879\u76ee\uff0c\u5219\u6ca1\u6709\u8be5\u76ee\u5f55\u3002\n\n\u800c\u9884\u8bbe\u5b57\u7b26\u4e32 "npm-library" \u5bf9\u5e94\u7684\u53d8\u4f53\u5219\u662f\u5728\u539f\u672c\u4ea7\u7269\u7684\u57fa\u7840\u4e0a\u4fee\u6539\u4e86\u4ee3\u7801\u8bed\u6cd5\u652f\u6301\u8fd9\u4e00\u7279\u70b9\uff0c\u540c\u65f6\u5728\u5b57\u7b26\u4e32\u547d\u540d\u4e0a\u4e5f\u53d8\u4e3a\u4e86\n"npm-library-[es5 | es2016...es2020 | esnext]" \u8fd9\u6837\u7684\u5f62\u5f0f\u3002\n\n\u4f8b\u5982\uff0c\u5982\u679c\u5728\u9884\u8bbe\u5b57\u7b26\u4e32 "npm-library" \u5bf9\u5e94\u7684\u8f93\u51fa\u4ea7\u7269\u57fa\u7840\u4e0a\uff0c\u8ba9\u4ea7\u7269\u4ee3\u7801\u652f\u6301\u7684\u8bed\u6cd5\u53d8\u4e3a es5 \u7684\u8bdd\uff0c\u90a3\u4e48\u53ea\u9700\u8981\u5c06 "npm-library"\n\u6539\u53d8\u4e3a "npm-library-es5" \u5c31\u53ef\u4ee5\u4e86\u3002\n\n\n\u6784\u5efa\u9884\u8bbe\u7684\u51fd\u6570\u5f62\u5f0f\n\n\u9664\u4e86\u5b57\u7b26\u4e32\u5f62\u5f0f\u4ee5\u5916\uff0c\u6784\u5efa\u9884\u8bbe\u7684\u503c\u4e5f\u53ef\u4ee5\u662f\u51fd\u6570\u5f62\u5f0f\uff0c\u5728\u51fd\u6570\u4e2d\u53ef\u4ee5\u6253\u5370\u6216\u8005\u4fee\u6539\u67d0\u4e2a\u9884\u8bbe\u503c\u5bf9\u5e94\u7684\u5177\u4f53\u914d\u7f6e\u3002\n\n\u4f8b\u5982\uff0c\u5982\u679c\u4f7f\u7528\u9884\u8bbe\u51fd\u6570\u7684\u5f62\u5f0f\u8fbe\u5230\u9884\u8bbe\u5b57\u7b26\u4e32 "npm-library-es5" \u540c\u6837\u7684\u6548\u679c\uff0c\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u7684\u65b9\u5f0f\uff1a\n\n\n\nexport default defineConfig({\n  buildPreset({ preset }) {\n    return preset.NPM_LIBRARY.map(config => {\n      return { ...config, target: \'es5\' };\n    });\n  },\n});\n\n\n\u5728\u4e0a\u9762\u7684\u4ee3\u7801\u5b9e\u73b0\u4e2d\uff0cpreset.NPM_LIBRARY \u4e0e\u9884\u8bbe\u5b57\u7b26\u4e32 "npm-library" \u662f\u76f8\u5bf9\u5e94\u7684\uff0c\u5b83\u4ee3\u8868\u7740 "npm-library"\n\u7b49\u4ef7\u7684\u591a\u7ec4\u6784\u5efa\u76f8\u5173\u7684\u914d\u7f6e\u3002\u6211\u4eec\u901a\u8fc7 map \u65b9\u6cd5\u904d\u5386\u4e86 NPM_LIBRARY \u8fd9\u4e2a\u6570\u7ec4\uff0c\u5728\u8fd9\u4e2a\u6570\u7ec4\u4e2d\u5305\u542b\u4e86\u591a\u4e2a buildConfig \u5bf9\u8c61\u3002\u6211\u4eec\u5c06\u539f\u672c\u7684\nbuildConfig \u5bf9\u8c61\u8fdb\u884c\u4e86\u6d45\u62f7\u8d1d\u5e76\u4fee\u6539\u4e86\u6d45\u62f7\u8d1d\u540e\u5f97\u5230 buildConfig.target\uff0c\u5c06\u5b83\u6307\u5b9a\u4e3a es5\u3002\n\n> \u5173\u4e8e preset.NPM_LIBRARY \u5177\u4f53\u5bf9\u5e94\u7684\u503c\uff0c\u53ef\u4ee5\u901a\u8fc7 BuildPreset API \u67e5\u770b\u3002\u5728 preset \u5bf9\u8c61\u4e0b\u4e0d\u4ec5\u5305\u542b\u4e86\n> NPM_LIBRARY\uff0c\u8fd8\u5305\u542b\u4e86\u5176\u4ed6\u7c7b\u4f3c\u7684\u5e38\u91cf\u3002\n\n\u90a3\u4e48\u8fd9\u91cc\u7684 buildConfig \u5bf9\u8c61\u662f\u4ec0\u4e48\u5462\uff1f\u4e4b\u524d\u63d0\u5230\u7684\u6784\u5efa\u4ea7\u7269\u7279\u70b9\u53c8\u662f\u6839\u636e\u4ec0\u4e48\u5462\uff1f\n\n\u63a5\u4e0b\u6765\u6211\u4eec\u89e3\u91ca\u4e00\u4e0b\u3002\n\n\n\u6784\u5efa\u914d\u7f6e\uff08\u5bf9\u8c61\uff09\n\nbuildConfig \u662f\u4e00\u4e2a\u7528\u6765\u63cf\u8ff0\u5982\u4f55\u7f16\u8bd1\u3001\u751f\u6210\u6784\u5efa\u4ea7\u7269\u7684\u914d\u7f6e\u5bf9\u8c61\u3002\u5728\u6700\u5f00\u59cb\u63d0\u5230\u7684\u5173\u4e8e\u201c\u6784\u5efa\u4ea7\u7269\u7684\u7279\u70b9\u201d\uff0c\u5176\u5b9e\u90fd\u662f buildConfig\n\u6240\u652f\u6301\u7684\u5c5e\u6027\u3002\u76ee\u524d\u6240\u652f\u6301\u7684\u5c5e\u6027\u8986\u76d6\u4e86\u5927\u90e8\u5206\u6a21\u5757\u7c7b\u578b\u9879\u76ee\u5728\u6784\u5efa\u4ea7\u7269\u65f6\u7684\u9700\u6c42\uff0cbuildConfig\n\u4e0d\u4ec5\u5305\u542b\u4e00\u4e9b\u4ea7\u7269\u6240\u5177\u5907\u7684\u5c5e\u6027\uff0c\u4e5f\u5305\u542b\u4e86\u6784\u5efa\u4ea7\u7269\u6240\u9700\u8981\u7684\u4e00\u4e9b\u7279\u6027\u529f\u80fd\u3002\u63a5\u4e0b\u6765\u4ece\u5206\u7c7b\u7684\u89d2\u5ea6\u7b80\u5355\u7f57\u5217\u4e00\u4e0b\uff1a\n\n\u6784\u5efa\u4ea7\u7269\u7684\u57fa\u672c\u5c5e\u6027\u5305\u62ec\uff1a\n\n * \u4ea7\u7269\u662f\u5426\u88ab\u6253\u5305\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.buildType\u3002\n * \u4ea7\u7269\u5bf9\u4e8e\u8bed\u6cd5\u7684\u652f\u6301\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.target\u3002\n * \u4ea7\u7269\u683c\u5f0f\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.format\u3002\n * \u4ea7\u7269\u7c7b\u578b\u6587\u4ef6\u5982\u4f55\u5904\u7406\uff0c\u5bf9\u5e94\u7684 API \u662f buildConfig.dts\u3002\n * \u4ea7\u7269\u7684 sourceMap \u5982\u4f55\u5904\u7406\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.sourceMap\u3002\n * \u4ea7\u7269\u5bf9\u5e94\u7684\u8f93\u5165\uff08\u6216\u8005\u662f\u6e90\u6587\u4ef6\uff09\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.input\u3002\n * \u4ea7\u7269\u8f93\u51fa\u7684\u76ee\u5f55\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.outDir\u3002\n * \u6784\u5efa\u7684\u6e90\u7801\u76ee\u5f55\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.sourceDir\u3002\n\n\u6784\u5efa\u4ea7\u7269\u6240\u9700\u7684\u5e38\u7528\u529f\u80fd\u5305\u62ec\uff1a\n\n * \u522b\u540d\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.alias\u3002\n * \u9759\u6001\u8d44\u6e90\u5904\u7406\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.asset\u3002\n * \u7b2c\u4e09\u65b9\u4f9d\u8d56\u5904\u7406\uff1a\u5bf9\u5e94\u7684 API \u6709\uff1a\n   * buildConfig.autoExternal\u3002\n   * buildConfig.externals\u3002\n * \u62f7\u8d1d\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.copy\u3002\n * \u5168\u5c40\u53d8\u91cf\u66ff\u6362\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.define\u3002\n * \u6307\u5b9a JSX \u7f16\u8bd1\u65b9\u5f0f\uff0c\u5bf9\u5e94\u7684 API \u662f buildConfig.jsx\u3002\n\n\u4e00\u4e9b\u9ad8\u7ea7\u5c5e\u6027\u6216\u8005\u4f7f\u7528\u9891\u7387\u4e0d\u9ad8\u7684\u529f\u80fd\uff1a\n\n * \u4ea7\u7269\u4ee3\u7801\u538b\u7f29\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.minify\u3002\n * \u4ee3\u7801\u5206\u5272\uff1abuildConfig.spitting\n * \u6307\u5b9a\u6784\u5efa\u4ea7\u7269\u7528\u4e8e NodeJS \u73af\u5883\u8fd8\u662f\u6d4f\u89c8\u5668\u73af\u5883\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.platform\u3002\n * umd \u4ea7\u7269\u76f8\u5173\uff1a\n   * \u6307\u5b9a umd \u4ea7\u7269\u5916\u90e8\u5bfc\u5165\u7684\u5168\u5c40\u53d8\u91cf\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.umdGlobals\u3002\n   * \u6307\u5b9a umd \u4ea7\u7269\u7684\u6a21\u5757\u540d\uff1a\u5bf9\u5e94\u7684 API \u662f buildConfig.umdModuleName\u3002\n\n\u9664\u4e86\u4ee5\u4e0a\u5206\u7c7b\u4ee5\u5916\uff0c\u5173\u4e8e\u8fd9\u4e9b API \u7684\u5e38\u89c1\u95ee\u9898\u548c\u6700\u4f73\u5b9e\u8df5\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u7684\u94fe\u63a5\u6765\u4e86\u89e3\n\n * \u4ec0\u4e48\u662f bundle \u548c bundleless?\n * input \u4e0e sourceDir \u7684\u5173\u7cfb\u3002\n * \u4ea7\u7269\u4e2d\u7c7b\u578b\u6587\u4ef6\u7684\u591a\u79cd\u751f\u6210\u65b9\u5f0f\u3002\n * buildConfig.define \u4e0d\u540c\u573a\u666f\u7684\u4f7f\u7528\u65b9\u5f0f\u3002\n * \u5982\u4f55\u5904\u7406\u7b2c\u4e09\u65b9\u4f9d\u8d56\uff1f\n * \u5982\u4f55\u4f7f\u7528\u62f7\u8d1d\uff1f\n * \u5982\u4f55\u6784\u5efa umd \u4ea7\u7269\uff1f\n * \u9759\u6001\u8d44\u6e90\u76ee\u524d\u6240\u652f\u6301\u7684\u80fd\u529b\u3002\n\n\n\u4ec0\u4e48\u65f6\u5019\u4f7f\u7528 BUILDCONFIG\n\nbuildConfig \u662f\u7528\u4e8e\u4fee\u6539\u4ea7\u7269\u7684\u65b9\u5f0f\u4e4b\u4e00\uff0c\u5f53\u4e0e buildPreset \u914d\u7f6e\u540c\u65f6\u5b58\u5728\u7684\u65f6\u5019\uff0c\u53ea\u6709 buildConfig\n\u624d\u4f1a\u751f\u6548\u3002\u56e0\u6b64\u5982\u679c\u6309\u7167\u5982\u4e0b\u65b9\u5f0f\u914d\u7f6e\uff1a\n\n\n\nexport default defineConfig({\n  buildConfig: {\n    format: \'umd\',\n  },\n  buildPreset: \'npm-library\',\n});\n\n\n\u90a3\u4e48\u6b64\u65f6\u5c31\u4f1a\u770b\u5230\u5982\u4e0b\u63d0\u793a\uff1a\n\n\u56e0\u4e3a\u540c\u65f6\u51fa\u73b0 \'buildConfig\' \u548c \'buildPreset\' \u914d\u7f6e\uff0c\u56e0\u6b64\u4ec5 \'buildConfig\' \u914d\u7f6e\u751f\u6548\n\n\nbuildPreset \u4ee3\u8868\u7684\u4e00\u7ec4\u6216\u8005\u591a\u7ec4\u6784\u5efa\u76f8\u5173\u7684\u914d\u7f6e\u90fd\u662f\u7531 buildConfig \u7ec4\u6210\uff0c\u5f53\u4f7f\u7528 buildPreset\n\u65e0\u6cd5\u6ee1\u8db3\u5f53\u524d\u9879\u76ee\u9700\u6c42\u7684\u65f6\u5019\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528 buildConfig \u6765\u81ea\u5b9a\u4e49\u8f93\u51fa\u4ea7\u7269\u3002\n\n\u5728\u4f7f\u7528 buildConfig \u7684\u8fc7\u7a0b\uff0c\u5c31\u662f\u5bf9\u83b7\u5f97\u600e\u6837\u7684\u6784\u5efa\u4ea7\u7269\u7684\u601d\u8003\u8fc7\u7a0b\u3002',frontmatter:{sidebar_position:3}},{id:47,title:"\u7248\u672c\u7ba1\u7406\u4e0e\u53d1\u5e03",routePath:"/module-tools/guide/basic/publish-your-project",toc:[{id:"\u8ddf\u8e2a\u53d8\u66f4-1",text:"\u8ddf\u8e2a\u53d8\u66f4",depth:2},{id:"\u7248\u672c\u66f4\u65b0-1",text:"\u7248\u672c\u66f4\u65b0",depth:2},{id:"\u53d1\u5e03-1",text:"\u53d1\u5e03",depth:2},{id:"\u9884\u53d1\u5e03-1",text:"\u9884\u53d1\u5e03",depth:2}],content:"\u7248\u672c\u7ba1\u7406\u4e0e\u53d1\u5e03\n\n\u4e00\u4e2a npm \u7c7b\u578b\u7684\u6a21\u5757\u9879\u76ee\u53d1\u5e03\u6d41\u7a0b\u5305\u542b\u4e86\u4e24\u4e2a\u9636\u6bb5\uff1a\n\n * \u7b2c\u4e00\u9636\u6bb5\u662f\u5728\u5f00\u53d1\u671f\u95f4\uff0c\u5f00\u53d1\u8005\u9700\u8981\u63d0\u4f9b\u4e00\u4e2a\u53d8\u66f4\u6587\u4ef6\u6765\u8bb0\u5f55\u9700\u8981\u53d1\u5e03\u7684\u53d8\u52a8\uff1b\n * \u7b2c\u4e8c\u9636\u6bb5\u662f\u5728\u53d1\u5e03\u671f\u95f4\uff0cModule Tools \u53ef\u4ee5\u6536\u96c6\u6240\u6709\u7684\u53d8\u66f4\u6587\u4ef6\u6765\u66f4\u65b0\u7248\u672c\u3001\u66f4\u65b0\u53d1\u5e03\u65e5\u5fd7\uff0c\u5e76\u53d1\u5e03\u65b0\u7684\u5305\u5230 npm Registry \u4e0a\u3002\n\n\n\u8ddf\u8e2a\u53d8\u66f4\n\n\u5f53\u9879\u76ee\u53d1\u751f\u53d8\u5316\u7684\u65f6\u5019\u9700\u8981\u5c06\u53d8\u5316\u7684\u5185\u5bb9\u8bb0\u5f55\u4e0b\u6765\u3002\u9879\u76ee\u53d1\u751f\u7684\u53d8\u5316\u4e00\u822c\u662f\u6307\uff1a\n\n * \u65b0\u529f\u80fd\n * \u4fee\u590d\u95ee\u9898\n * \u914d\u7f6e\u6587\u4ef6\u4fee\u6539\n * ...\n\n\u5f53\u8fd9\u4e9b\u53d8\u5316\u4e00\u65e6\u5b8c\u6210\u540e\uff0c\u9700\u8981\u901a\u8fc7\u4ee5\u4e0b\u547d\u4ee4\u6765\u5bf9\u5f53\u524d\u7684\u53d8\u5316\u8fdb\u884c\u8bb0\u5f55\uff1a\n\n * modern change\n\n\u6267\u884c modern change \u547d\u4ee4\u540e\u4f1a\u5411\u5f00\u53d1\u8005\u63d0\u51fa\u51e0\u4e2a\u95ee\u9898\uff0c\u5e76\u6839\u636e\u5f00\u53d1\u8005\u7684\u56de\u7b54\u751f\u6210\u53d8\u66f4\u8bb0\u5f55\u3002\u53d8\u66f4\u8bb0\u5f55\u6587\u4ef6\u5305\u542b\u4e86\u7248\u672c\u53d8\u5316\u7684\u7c7b\u578b\u548c\u5176\u63cf\u8ff0\uff0c\u8be5\u6587\u4ef6\u4f1a\u88ab\u63d0\u4ea4\u5230\ngit \u4ed3\u5e93\u4e2d\u3002\n\n$ npx modern change\n\ud83e\udd8b  What kind of change is this for module-example? (current version is 0.1.0) \xb7 patch\n\ud83e\udd8b  Please enter a summary for this change (this will be in the changelogs). Submit empty line to open external editor\n\ud83e\udd8b  Summary \xb7 publish test\n\ud83e\udd8b  === Releasing the following packages ===\n\ud83e\udd8b  [Patch]\n\ud83e\udd8b    module\n\ud83e\udd8b  Is this your desired changeset? (Y/n) \xb7 true\n\ud83e\udd8b  Changeset added! - you can now commit it\n\ud83e\udd8b\n\ud83e\udd8b  If you want to modify or expand on the changeset summary, you can find it here\n\ud83e\udd8b  info /xxxxxx/module/.changeset/brave-dryers-agree.md\n\n\n\u5f53\u6267\u884c\u6210\u529f\u540e\uff0c\u751f\u6210\u7684\u5305\u542b\u53d8\u66f4\u8bb0\u5f55\u7684 Markdown \u6587\u4ef6\u4f1a\u4fdd\u5b58\u5728\u9879\u76ee\u7684 .changeset \u76ee\u5f55\u4e0b\u9762\u3002\u5176\u5185\u5bb9\u7c7b\u4f3c\u4e0b\u9762\u8fd9\u6837\uff1a\n\n---\n'module-example': patch\n---\n\npublish test\n\n\n\n\u7248\u672c\u66f4\u65b0\n\n\u5f53\u9700\u8981\u66f4\u65b0\u9879\u76ee\u7248\u672c\u7684\u65f6\u5019\uff0c\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a\n\n * modern bump\n\n\u6267\u884c modern bump \u5c06\u4f1a\u57fa\u4e8e .changeset/ \u76ee\u5f55\u4e0b\u8bb0\u5f55\u4e86\u53d8\u66f4\u7684 Markdown \u6587\u4ef6\u5185\u5bb9\u6765\u4fee\u6539 package.json\n\u4e2d\u7684\u7248\u672c\u53f7\uff0c\u540c\u65f6\u751f\u6210 CHANGELOG.md \u6587\u4ef6\u3002\u800c\u5f53\u7248\u672c\u66f4\u65b0\u5b8c\u6210\u540e\uff0c\u8fd9\u4e9b\u8bb0\u5f55\u53d8\u66f4\u7684 Markdown \u6587\u4ef6\u4e5f\u4f1a\u88ab\u5220\u9664\uff0c\u4e5f\u53ef\u8bf4\u8fd9\u4e9b Markdown\n\u6587\u4ef6\u88ab\u201c\u6d88\u8017\u201d\u6389\u4e86\u3002\n\n# module\n\n## 0.1.1\n\n### Patch Changes\n\n- publish test\n\n\n\n\u53d1\u5e03\n\n\u53d1\u5e03\u9879\u76ee\u53ef\u4ee5\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a\n\n * modern publish\n\nmodern release \u547d\u4ee4\u53ef\u4ee5\u5c06\u9879\u76ee\u53d1\u5e03\u5230 npm Registry\u3002\n\n\u6b64\u65f6\u53d1\u5e03\u7684\u662f latest \u7248\u672c\uff0c\u4e5f\u53ef\u4ee5\u8bf4\u662f\u6b63\u5f0f\u7248\u672c\u3002\u5982\u679c\u60f3\u8981\u4fee\u6539 dist-tag\uff0c\u53ef\u4ee5\u901a\u8fc7 modern release --tag \u547d\u4ee4\u6765\u6307\u5b9a\u3002\u4f8b\u5982\uff1a\n\nmodern release --tag beta\n\n\n\u4f46\u662f\u5982\u679c\u5e0c\u671b\u5c06\u5f53\u524d\u9879\u76ee\u7684\u7248\u672c\u53f7\u4e5f\u4fee\u6539\u4e3a\u9884\u53d1\u5e03\u7684\u7248\u672c\u53f7\uff0c\u5219\u9700\u8981\u4f7f\u7528 modern pre \u547d\u4ee4\u3002\n\n> \u6240\u8c13 dist-tag\uff0c\u53ef\u4ee5\u7406\u89e3\uff1a\u4e3a\u5f53\u524d\u53d1\u5e03\u7684\u7248\u672c\u6253\u6807\u7b7e\u3002\u4e00\u822c\u6765\u8bf4\uff0c\u9ed8\u8ba4\u53d1\u5e03\u7684\u7248\u672c\u5bf9\u5e94\u7684 dist-tag \u4e3a latest\uff0c\u56e0\u6b64\u53ef\u4ee5\u628a latest\n> \u8ba4\u4e3a\u662f\u6b63\u5f0f\u7248\u672c\u7684 dist-tag\u3002\n\n\n\u9884\u53d1\u5e03\n\n\u5f53\u9700\u8981\u5728\u6b63\u5f0f\u53d1\u5e03\u4e4b\u524d\u8fdb\u884c\u9884\u53d1\u5e03\uff0c\u5219\u9700\u8981\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a\n\n * modern pre\n\n\u9996\u5148 modern pre enter <tag> \u8fdb\u5165\u9884\u53d1\u5e03\u6a21\u5f0f\uff0c<tag> \u53ef\u4ee5\u4e0e\u53d1\u5e03\u9879\u76ee\u7684\u65f6\u5019\u4f7f\u7528 modern release --tag \u547d\u4ee4\u6307\u5b9a\u7684\ntag \u4e00\u81f4\u3002\n\n$ npx modern pre enter next\n\ud83e\udd8b  success Entered pre mode with tag next\n\ud83e\udd8b  info Run `changeset version` to version packages with prerelease versions\n\u2728  Done in 5.30s.\n\n\n\u63a5\u7740\u53ef\u4ee5\u4f7f\u7528 modern bump \u547d\u4ee4\u66f4\u65b0\u5177\u4f53\u7684\u7248\u672c\u53f7\uff0c\u6b64\u65f6\u4e0d\u4f1a\u771f\u6b63\u7684\u201c\u6d88\u8017\u201d\u8bb0\u5f55\u53d8\u66f4\u7684 Markdown \u6587\u4ef6\uff1a\n\n$ npx modern bump\n\ud83e\udd8b  warn ===============================IMPORTANT!===============================\n\ud83e\udd8b  warn You are in prerelease mode\n\ud83e\udd8b  warn If you meant to do a normal release you should revert these changes and run `changeset pre exit`\n\ud83e\udd8b  warn You can then run `changeset version` again to do a normal release\n\ud83e\udd8b  warn ----------------------------------------------------------------------\n\ud83e\udd8b  All files have been updated. Review them and commit at your leisure\n\n\n\u7136\u540e\u53ef\u4ee5\u770b\u5230 package.json \u4e2d\u66f4\u65b0\u7684\u7248\u672c\u53f7\u4f1a\u7c7b\u4f3c\u8fd9\u6837\uff1a0.1.2-next.0\u3002\n\n\u6700\u540e\uff0c\u5982\u679c\u4e0d\u9700\u8981\u518d\u8fdb\u884c\u9884\u53d1\u5e03\uff0c\u5219\u4e00\u5b9a\u8981\u6267\u884c modern pre exit \u547d\u4ee4\uff0c\u8fd9\u6837\u53ef\u4ee5\u9000\u51fa\u9884\u53d1\u5e03\u72b6\u6001\uff0c\u5e76\u4e14\u5f53\u518d\u6b21\u6267\u884c modern bump\n\u547d\u4ee4\u7684\u65f6\u5019\uff0c\u5c31\u53ef\u4ee5\u53d1\u5e03\u6b63\u5f0f\u7684\u7248\u672c\u3002",frontmatter:{sidebar_position:7}},{id:48,title:"\u6d4b\u8bd5\u9879\u76ee",routePath:"/module-tools/guide/basic/test-your-project",toc:[{id:"\u5148\u51b3\u6761\u4ef6\u548c\u7ea6\u5b9a-1",text:"\u5148\u51b3\u6761\u4ef6\u548c\u7ea6\u5b9a",depth:2},{id:"\u8fd0\u884c\u6d4b\u8bd5-1",text:"\u8fd0\u884c\u6d4b\u8bd5",depth:2},{id:"\u4f7f\u7528\u914d\u7f6e-1",text:"\u4f7f\u7528\u914d\u7f6e",depth:2},{id:"\u6d4b\u8bd5\u793a\u4f8b-1",text:"\u6d4b\u8bd5\u793a\u4f8b",depth:2},{id:"\u666e\u901a\u6a21\u5757-1",text:"\u666e\u901a\u6a21\u5757",depth:3},{id:"\u7ec4\u4ef6-1",text:"\u7ec4\u4ef6",depth:3}],content:"\u6d4b\u8bd5\u9879\u76ee\n\n\u672c\u7ae0\u5c06\u8981\u4ecb\u7ecd\u5982\u4f55\u6d4b\u8bd5\u53ef\u590d\u7528\u6a21\u5757\u3002\n\n\n\u5148\u51b3\u6761\u4ef6\u548c\u7ea6\u5b9a\n\n\u60f3\u8981\u4f7f\u7528\u9879\u76ee\u7684\u6d4b\u8bd5\u529f\u80fd\uff0c\u9700\u8981\u786e\u4fdd\u9879\u76ee\u4e2d\u5305\u542b\u4f9d\u8d56\uff1a\"@modern-js/plugin-testing\" ,\u53ef\u4ee5\u901a\u8fc7modern new\u6765\u5b8c\u6210\u3002\n\n\u5728\u6a21\u5757\u5de5\u7a0b\u65b9\u6848\u4e2d\uff0c\u5bf9\u4e8e\u6d4b\u8bd5\u7528\u4f8b\u6216\u8005\u8bf4\u7f16\u5199\u6d4b\u8bd5\u7684\u6587\u4ef6\u6709\u5982\u4e0b\u7ea6\u5b9a\uff1a\n\n * \u9879\u76ee\u76ee\u5f55\u4e0b\u7684 tests \u76ee\u5f55\u4e3a\u6d4b\u8bd5\u7528\u4f8b\u548c\u6d4b\u8bd5\u6587\u4ef6\u7684\u76ee\u5f55\uff0c\u4e0d\u652f\u6301\u66f4\u6539\u8fd0\u884c\u6d4b\u8bd5\u7528\u4f8b\u7684\u76ee\u5f55\u3002\n * \u9ed8\u8ba4\u4f1a\u81ea\u52a8\u5c06\u540e\u7f00\u4e3a .test.[tj]sx? \u7684\u6587\u4ef6\u8bc6\u522b\u4e3a\u6d4b\u8bd5\u6587\u4ef6\u3002\n * \u5176\u4ed6\u7684 .[tj]sx? \u540e\u7f00\u7684\u6587\u4ef6\u88ab\u8bc6\u522b\u4e3a\u666e\u901a\u7684\u6587\u4ef6\uff0c\u53ef\u4ee5\u7528\u4e8e\u6d4b\u8bd5\u7684 utils \u6587\u4ef6\u6216\u8005\u5176\u4ed6\u7528\u9014\u3002\n\n\n\u8fd0\u884c\u6d4b\u8bd5\n\n\u5f53\u51c6\u5907\u597d\u4e86\u4f9d\u8d56\u4ee5\u53ca\u4e86\u89e3\u4e86\u6d4b\u8bd5\u7528\u4f8b\u5728\u54ea\u91cc\u7f16\u5199\u540e\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u547d\u4ee4\u6765\u6267\u884c\u6d4b\u8bd5\uff1a\n\nmodern test\n\n// \u66f4\u65b0 snapshot\nmodern test --updateSnapshot\n\n\n\u6267\u884c\u4e4b\u540e\uff0c\u4f1a\u770b\u5230\u6d4b\u8bd5\u7684\u7ed3\u679c\uff1a\n\n\n\n\n\u4f7f\u7528\u914d\u7f6e\n\n/obj/eden-cn/uhbfnupenuhf/test-result.png \u6a21\u5757\u5de5\u7a0b\u65b9\u6848\u5bf9\u6d4b\u8bd5\u63d0\u4f9b\u4e86\u4ee5\u4e0b\u914d\u7f6e\uff1a\n\n * testing\n\n\u53ef\u4ee5\u5728 modern.config.(j|t)s \u4e2d\u589e\u52a0\u5b83\u3002\n\n\n\u6d4b\u8bd5\u793a\u4f8b\n\n\n\u666e\u901a\u6a21\u5757\n\n\u5bf9\u4e8e\u666e\u901a\u7684\u6a21\u5757\uff0c\u6211\u4eec\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u65b9\u5f0f\u4f7f\u7528\u6d4b\u8bd5\u529f\u80fd\uff1a\n\n<CH.Spotlight>\n\nexport default function () {\n  return 'hello world';\n}\n\n\n--------------------------------------------------------------------------------\n\n\u9996\u5148\u662f\u6a21\u5757\u7684\u4ee3\u7801\u3002\n\nexport default function () {\n  return 'hello world';\n}\n\n\n--------------------------------------------------------------------------------\n\n\u7136\u540e\u5728\u6d4b\u8bd5\u6587\u4ef6\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u8fd9\u6837\u3002\n\n\u5176\u4e2d @ \u6307\u5411\u4e86\u6e90\u7801\u76ee\u5f55\uff0c\u5728\u521d\u59cb\u5316\u9879\u76ee\u7684 tests/tsconfig.json \u4e2d\u5b9a\u4e49\u4e86\u3002\n\n\n\ndescribe('\u9ed8\u8ba4\u503c cases', () => {\n  test('Have returns', () => {\n    const drink = jest.fn(main);\n    drink();\n    expect(drink).toHaveReturned();\n  });\n});\n\n\n--------------------------------------------------------------------------------\n\n\u6700\u540e\u6211\u4eec\u53ef\u4ee5\u6267\u884c modern test\u3002\n\npnpm test\n## or\nyarn test\n## or\nnpm run test\n\n\n</CH.Spotlight>\n\n\n\u7ec4\u4ef6\n\n{/* \u94fe\u63a5\u5f85\u8865\u5145 */}\n\n\u5bf9\u4e8e\u7ec4\u4ef6\uff0cModern.js \u7684 Runtime API \u63d0\u4f9b\u4e86\u7528\u4e8e\u6d4b\u8bd5 UI \u7ec4\u4ef6\u7684\u529f\u80fd\uff0c\u5176\u529f\u80fd\u7531 @modern-js/runtime/testing\n\u63d0\u4f9b\u3002\n\n\u5982\u679c\u9700\u8981\u4f7f\u7528 Runtime API\uff0c\u90a3\u4e48\u53ef\u4ee5\u901a\u8fc7 \u5fae\u751f\u6210\u5668 \u5f00\u542f\u3002\n\n<CH.Spotlight>\n\nexport const default () {\n  return (\n    <div>This is a UI Component</div>\n  );\n}\n\n\n--------------------------------------------------------------------------------\n\n\u9996\u5148\u662f\u7ec4\u4ef6\u7684\u4ee3\u7801\u3002\n\nexport const default () {\n  return (\n    <div>This is a UI Component</div>\n  );\n}\n\n\n--------------------------------------------------------------------------------\n\n\u7136\u540e\u5728\u6d4b\u8bd5\u6587\u4ef6\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u8fd9\u6837\u3002\n\n\u5176\u4e2d @ \u6307\u5411\u4e86\u6e90\u7801\u76ee\u5f55\uff0c\u5728\u521d\u59cb\u5316\u9879\u76ee\u7684 tests/tsconfig.json \u4e2d\u5b9a\u4e49\u4e86\u3002\n\n\n\n\n\ndescribe('\u9ed8\u8ba4\u503c cases', () => {\n  test('Rendered', () => {\n    render(<Component />);\n    expect(screen.getByText('This is a UI Component')).toBeInTheDocument();\n  });\n});\n\n\n--------------------------------------------------------------------------------\n\n\u6700\u540e\u6211\u4eec\u53ef\u4ee5\u6267\u884c modern test\u3002\n\npnpm test\n## or\nyarn test\n## or\nnpm run test\n\n\n</CH.Spotlight>",frontmatter:{sidebar_position:6}},{id:49,title:"\u4f7f\u7528\u5fae\u751f\u6210\u5668",routePath:"/module-tools/guide/basic/use-micro-generator",toc:[{id:"test-\u6d4b\u8bd5-1",text:"Test \u6d4b\u8bd5",depth:2},{id:"storybook-\u8c03\u8bd5-1",text:"Storybook \u8c03\u8bd5",depth:2},{id:"tailwind-css-\u652f\u6301-1",text:"Tailwind CSS \u652f\u6301",depth:2},{id:"\u542f\u52a8-modernjs-runtime-api-1",text:"\u542f\u52a8 Modern.js Runtime API",depth:2}],content:'\u4f7f\u7528\u5fae\u751f\u6210\u5668\n\n\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848\u63d0\u4f9b\u4e86\u5fae\u751f\u6210\u5668\u5de5\u5177\uff0c\u5b83\u53ef\u4ee5\u4e3a\u5f53\u524d\u9879\u76ee\uff1a\n\n * \u65b0\u589e\u76ee\u5f55\u548c\u6587\u4ef6\n * \u4fee\u6539 package.json \u6587\u4ef6\u5185\u5bb9\n * \u6267\u884c\u547d\u4ee4\n\n\u56e0\u6b64\u901a\u8fc7\u8fd9\u4e9b\u80fd\u529b\uff0c\u5fae\u751f\u6210\u5668\u53ef\u4ee5\u4e3a\u9879\u76ee\u5f00\u542f\u989d\u5916\u7684\u7279\u6027\u529f\u80fd\u3002\n\n\u53ef\u4ee5\u901a\u8fc7 modern new \u542f\u52a8\u5fae\u751f\u6210\u5668\u3002\u76ee\u524d\u6a21\u5757\u5de5\u7a0b\u65b9\u6848\u652f\u6301\u7684\u5fae\u751f\u6210\u5668\u529f\u80fd\u6709\uff1a\n\n\nTEST \u6d4b\u8bd5\n\n\u5f53\u6211\u4eec\u60f3\u8981\u5bf9\u4e00\u4e9b\u6a21\u5757\u8fdb\u884c\u6d4b\u8bd5\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u542f\u7528 test \u6d4b\u8bd5\u529f\u80fd\u3002\u542f\u52a8\u8be5\u529f\u80fd\u540e\uff0c\u4f1a\u5728\u9879\u76ee\u76ee\u5f55\u4e0b\u521b\u5efa tests \u76ee\u5f55\u4ee5\u53ca\u76f8\u5173\u6587\u4ef6\uff0c\u5728 package.json\n\u4e2d\u65b0\u589e "@modern-js/plugin-testing" \u4f9d\u8d56\u3002\n\n\nSTORYBOOK \u8c03\u8bd5\n\n\u5f53\u6211\u4eec\u60f3\u8981\u5bf9\u7ec4\u4ef6\u6216\u8005\u666e\u901a\u6a21\u5757\u8fdb\u884c\u8c03\u8bd5\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u542f\u7528 Storybook \u8c03\u8bd5\u529f\u80fd\u3002\u542f\u52a8\u8be5\u529f\u80fd\u540e\uff0c\u4f1a\u5728\u9879\u76ee\u76ee\u5f55\u4e0b\u521b\u5efa stories \u76ee\u5f55\u4ee5\u53ca\u76f8\u5173\u6587\u4ef6\uff0c\u5728\npackage.json \u4e2d\u65b0\u589e "@modern-js/plugin-storybook" \u4f9d\u8d56\u3002\n\n\u5173\u4e8e\u5982\u4f55\u542f\u52a8 Storybook \u4ee5\u53ca\u5982\u4f55\u4f7f\u7528 Storybook\uff0c\u53ef\u4ee5\u67e5\u770b\u4e0b\u9762\u7684\u94fe\u63a5\uff1a\n\n * modern dev\n * \u4f7f\u7528 Storybook\n\n\nTAILWIND CSS \u652f\u6301\n\n\u5f53\u6211\u4eec\u60f3\u8981\u4e3a\u9879\u76ee\u589e\u52a0 Tailwind CSS \u652f\u6301\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u542f\u52a8\u8fd9\u4e2a\u529f\u80fd\u3002Tailwind CSS \u662f\u4e00\u4e2a CSS \u5e93\uff0c\u63d0\u4f9b\u5f00\u7bb1\u5373\u7528\u7684\u6837\u5f0f\u3002\n\n\u5173\u4e8e\u5982\u4f55\u5728\u6a21\u5757\u5de5\u7a0b\u91cc\u4f7f\u7528 Tailwind CSS\uff0c\u53ef\u4ee5\u67e5\u770b\uff1a\n\n * \u4f7f\u7528 Tailwind CSS\n\n\n\u542f\u52a8 MODERN.JS RUNTIME API\n\nModern.js \u63d0\u4f9b\u4e86 Runtime API \u80fd\u529b\uff0c\u8fd9\u4e9b API \u53ea\u80fd\u5728 Modern.js \u7684\u5e94\u7528\u9879\u76ee\u73af\u5883\u4e2d\u4f7f\u7528\u3002\u5982\u679c\u4f60\u9700\u8981\u5f00\u53d1\u4e00\u4e2a Modern.js\n\u5e94\u7528\u73af\u5883\u4e2d\u4f7f\u7528\u7684\u7ec4\u4ef6\uff0c\u90a3\u4e48\u4f60\u53ef\u4ee5\u5f00\u542f\u8be5\u7279\u6027\uff0c\u5fae\u751f\u6210\u5668\u4f1a\u589e\u52a0 "@modern-js/runtime"\u4f9d\u8d56\u3002\n\n\u53e6\u5916\uff0cStorybook \u8c03\u8bd5\u5de5\u5177\u4e5f\u4f1a\u901a\u8fc7\u68c0\u6d4b\u9879\u76ee\u7684\u4f9d\u8d56\u786e\u5b9a\u9879\u76ee\u662f\u5426\u9700\u8981\u4f7f\u7528 Runtime API\uff0c\u5e76\u4e14\u63d0\u4f9b\u4e0e Modern.js \u5e94\u7528\u9879\u76ee\u4e00\u6837\u7684\nRuntime API \u8fd0\u884c\u73af\u5883\u3002',frontmatter:{sidebar_position:4}},{id:50,title:"\u4f7f\u7528 Storybook",routePath:"/module-tools/guide/basic/using-storybook",toc:[{id:"\u8c03\u8bd5\u4ee3\u7801-1",text:"\u8c03\u8bd5\u4ee3\u7801",depth:2},{id:"\u5f15\u7528\u7ec4\u4ef6\u4ea7\u7269-1",text:"\u5f15\u7528\u7ec4\u4ef6\u4ea7\u7269",depth:3},{id:"\u5f15\u7528\u7ec4\u4ef6\u6e90\u7801-1",text:"\u5f15\u7528\u7ec4\u4ef6\u6e90\u7801",depth:3},{id:"\u914d\u7f6e-storybook-1",text:"\u914d\u7f6e Storybook",depth:2},{id:"\u6784\u5efa-storybook-\u4ea7\u7269-1",text:"\u6784\u5efa Storybook \u4ea7\u7269",depth:2}],content:'\u4f7f\u7528 STORYBOOK\n\n\u9996\u5148\u5982\u679c\u6ca1\u6709\u770b\u8fc7\u4ee5\u4e0b\u5185\u5bb9\u7684\u8bdd\uff0c\u53ef\u4ee5\u5148\u82b1\u51e0\u5206\u949f\u5148\u4e86\u89e3\u4e00\u4e0b\uff1a\n\n * \u4f7f\u7528\u5fae\u751f\u6210\u5668\u5f00\u542f Storybook \u8c03\u8bd5\n * modern dev\n\nStorybook \u662f\u4e00\u4e2a\u4e13\u95e8\u7528\u4e8e\u7ec4\u4ef6\u8c03\u8bd5\u7684\u5de5\u5177\uff0c\u56f4\u7ed5\u7740\u7ec4\u4ef6\u5f00\u53d1\u63d0\u4f9b\u4e86\uff1a\n\n * \u4e30\u5bcc\u591a\u6837\u7684\u8c03\u8bd5\u80fd\u529b\n * \u53ef\u4e0e\u4e00\u4e9b\u6d4b\u8bd5\u5de5\u5177\u7ed3\u5408\u4f7f\u7528\n * \u53ef\u91cd\u590d\u4f7f\u7528\u7684\u6587\u6863\u5185\u5bb9\n * \u53ef\u5206\u4eab\u80fd\u529b\n * \u5de5\u4f5c\u6d41\u7a0b\u81ea\u52a8\u5316\n\n\u56e0\u6b64\u5b83\u662f\u4e00\u4e2a\u590d\u6742\u4e14\u529f\u80fd\u5f3a\u5927\u7684\u5de5\u5177\u3002\n\n\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848\u96c6\u6210\u4e86 Storybook ,\u56e0\u6b64\u4f60\u51e0\u4e4e\u53ef\u4ee5\u6309\u7167 Storybook \u5b98\u65b9\u6587\u6863\u7684\u5185\u5bb9\u8fdb\u884c\u4f7f\u7528\u3002\u4e0d\u8fc7\u4f9d\u7136\u6709\u4e00\u4e9b\u5730\u65b9\u9700\u8981\u6ce8\u610f\uff0c\u63a5\u4e0b\u6765\u8bb2\u89e3\u4e00\u4e0b\uff1a\n\n\n\u8c03\u8bd5\u4ee3\u7801\n\n\u5728\u8c03\u8bd5\u4ee3\u7801\u8fc7\u7a0b\u4e2d\u9700\u8981\u5f15\u5165\u7ec4\u4ef6\u4ee3\u7801\uff0c\u76ee\u524d\u53ef\u4ee5\u901a\u8fc7\u4e24\u79cd\u65b9\u5f0f\u5f15\u5165\u7ec4\u4ef6\u4ee3\u7801\uff1a\n\n * \u5f15\u7528\u7ec4\u4ef6\u4ea7\u7269\n * \u5f15\u7528\u7ec4\u4ef6\u6e90\u7801\n\n\u6211\u4eec\u66f4\u63a8\u8350\u4f7f\u7528\u7b2c\u4e00\u79cd\u201c\u5f15\u7528\u7ec4\u4ef6\u4ea7\u7269\u201d\u7684\u65b9\u5f0f\u3002\u56e0\u4e3a\u5b83\u51e0\u4e4e\u63a5\u8fd1\u771f\u5b9e\u7684\u4f7f\u7528\u573a\u666f\uff0c\u4e0d\u4ec5\u53ef\u4ee5\u5bf9\u7ec4\u4ef6\u529f\u80fd\u8fdb\u884c\u8c03\u8bd5\uff0c\u540c\u65f6\u4e5f\u5bf9\u6784\u5efa\u4ea7\u7269\u7684\u6b63\u786e\u6027\u8fdb\u884c\u4e86\u9a8c\u8bc1\u3002\n\n\u63a5\u4e0b\u6765\u6211\u4eec\u5206\u522b\u8bb2\u4e00\u4e0b\u8fd9\u4e24\u79cd\u65b9\u5f0f\u5177\u4f53\u5982\u4f55\u4f7f\u7528\u3002\n\n\n\u5f15\u7528\u7ec4\u4ef6\u4ea7\u7269\n\n\u5047\u5982\u5b58\u5728 TypeScript \u9879\u76ee foo\uff1a\n\n<CH.Spotlight>\n\n{\n  "name": "foo",\n  "main": "./dist/index.js",\n  "types": "./dist/types/index.d.ts"\n}\n\n\n--------------------------------------------------------------------------------\n\n\u786e\u4fdd package.json \u7684 main \u548c types \u7684\u503c\u4e3a\u771f\u5b9e\u7684\u8def\u5f84\u3002\n\n{\n  "name": "foo",\n  "main": "./dist/index.js",\n  "types": "./dist/types/index.d.ts"\n}\n\n\n--------------------------------------------------------------------------------\n\nfoo \u9879\u76ee\u7684\u6e90\u7801\u3002\n\nexport const content = \'hello world\';\n\n\n--------------------------------------------------------------------------------\n\n\u786e\u4fdd\u5728 stories/tsconfig.json \u4e2d\u8bbe\u7f6e\u4e86\u6307\u5411\u9879\u76ee\u6839\u76ee\u5f55\u7684 paths \u914d\u7f6e\u3002 paths \u7684 key \u4e0e\u9879\u76ee\u540d\u79f0\u76f8\u540c\u3002\n\n{\n  "extends": "../tsconfig.json",\n  "compilerOptions": {\n    "baseUrl": "../",\n    "paths": {\n      "foo": ["."]\n    }\n  },\n  "include": [\n    "**/*"\n  ]\n}\n\n\n--------------------------------------------------------------------------------\n\n\u6700\u540e\u5728 Story \u4ee3\u7801\u4e2d\u76f4\u63a5\u4ee5\u9879\u76ee\u540d\u79f0\u7684\u65b9\u5f0f\u5f15\u7528\u3002\n\n\n\nconst Component = () => <div>this is a Story Component {content}</div>;\n\nexport const YourStory = () => <Component />;\n\nexport default {\n  title: \'Your Stories\',\n};\n\n\n</CH.Spotlight>\n\n\u5982\u679c\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\uff0c\u9047\u5230\u65e0\u6cd5\u5b9e\u65f6\u83b7\u5f97\u7c7b\u578b\u5b9a\u4e49\u7684\u60c5\u51b5\uff0c\u6b64\u65f6\uff1a\n\n\u5bf9\u4e8e pnpm \u7684\u9879\u76ee\uff0c\u53ef\u4ee5\u6309\u7167\u4e0b\u9762\u7684\u5185\u5bb9\u5bf9 package.json \u8fdb\u884c\u4fee\u6539\uff1a\n\n{\n    "name": "foo",\n    "main": "./dist/index.js",\n    "types": "./src/index.ts",\n    "publishConfig": {\n      "types": "./dist/index.d.ts",\n    }\n}\n\n\n> \u5173\u4e8e pnpm \u7684 publishConfig \u7684\u4f7f\u7528\uff0c\u53ef\u4ee5\u9605\u8bfb\u4e0b\u9762\u8fd9\u4e2a\u94fe\u63a5\u3002\n\n\u800c\u5bf9\u4e8e npm \u548c Yarn \u7684\u9879\u76ee\uff0c\u5219\u53ea\u80fd\u901a\u8fc7\u624b\u52a8\u7684\u65b9\u5f0f\u5728\u5f00\u53d1\u9636\u6bb5\u548c\u53d1\u5e03\u9636\u6bb5\u5bf9 package.json \u7684 types \u7684\u503c\u8fdb\u884c\u4fee\u6539\u3002\n\n\u90a3\u4e48\u4e3a\u4ec0\u4e48\u53ef\u4ee5\u76f4\u63a5\u5f15\u7528\u4ea7\u7269\u5462\uff1f\n\n 1. \u5728\u6267\u884c modern dev storybook \u547d\u4ee4\u4e4b\u524d\uff0c\u4f1a\u81ea\u52a8\u6267\u884c modern build \u547d\u4ee4\uff0c\u4fdd\u8bc1\u9879\u76ee\u6784\u5efa\u4ea7\u7269\u7684\u5b58\u5728\u3002\n 2. \u5728 Storybook \u5185\u90e8\u589e\u52a0\u4e86\u4ee5\u9879\u76ee\u540d\u79f0\u4f5c\u4e3a\u522b\u540d\u7684\u5904\u7406\uff0c\u4fdd\u8bc1\u80fd\u591f\u6839\u636e package.json \u89e3\u6790\u51fa\u9879\u76ee\u7684\u4ea7\u7269\u8def\u5f84\u3002\n\n\n\u5f15\u7528\u7ec4\u4ef6\u6e90\u7801\n\n\u5f15\u7528\u7ec4\u4ef6\u7684\u6e90\u7801\u53ef\u4ee5\u901a\u8fc7\u76f8\u5bf9\u8def\u5f84\u7684\u65b9\u5f0f\uff1a\n\n\n\nconst Component = () => <div>this is a Story Component {content}</div>;\n\nexport const YourStory = () => <Component />;\n\nexport default {\n  title: \'Your Stories\',\n};\n\n\n\u90a3\u4e48\u4e3a\u4ec0\u4e48\u4e0d\u63a8\u8350\u4f7f\u7528\u6e90\u7801\u7684\u65b9\u5f0f\u5462\uff1f\n\n\u4e0d\u4ec5\u4ec5\u662f\u56e0\u4e3a\u4f7f\u7528\u7ec4\u4ef6\u6e90\u7801\u65e0\u6cd5\u9a8c\u8bc1\u7ec4\u4ef6\u4ea7\u7269\u662f\u5426\u6b63\u786e\uff0c\u540c\u65f6\u6a21\u5757\u5de5\u7a0b\u5bf9\u4e8e\u6784\u5efa\u4ea7\u7269\u652f\u6301\u7684\u4e00\u4e9b\u914d\u7f6e\u65e0\u6cd5\u5b8c\u5168\u8f6c\u6362\u4e3a Storybook\n\u5185\u90e8\u7684\u914d\u7f6e\u3002\u5982\u679c\u67d0\u4e9b\u914d\u7f6e\u65e0\u6cd5\u8fdb\u884c\u76f8\u4e92\u8f6c\u6362\u7684\u8bdd\uff0c\u5c31\u4f1a\u5728 Storybook \u8c03\u8bd5\u8fc7\u7a0b\u4e2d\u51fa\u73b0\u4e0d\u7b26\u5408\u9884\u671f\u7684\u7ed3\u679c\u3002\n\n\n\u914d\u7f6e STORYBOOK\n\nStorybook \u5b98\u65b9\u901a\u8fc7\u4e00\u4e2a\u540d\u4e3a .storybook \u7684\u6587\u4ef6\u5939\u6765\u8fdb\u884c\u9879\u76ee\u914d\u7f6e\uff0c\u5176\u4e2d\u5305\u542b\u5404\u79cd\u914d\u7f6e\u6587\u4ef6\u3002\u5728\u6a21\u5757\u5de5\u7a0b\u65b9\u6848\u4e2d\uff0c\u53ef\u4ee5\u5728\u9879\u76ee\u7684\nconfig/storybook \u76ee\u5f55\u4e0b\u589e\u52a0 Storybook \u914d\u7f6e\u6587\u4ef6\u3002\n\n\u5173\u4e8e Storybook \u5404\u79cd\u914d\u7f6e\u6587\u4ef6\u7684\u4f7f\u7528\u65b9\u5f0f\uff0c\u53ef\u4ee5\u67e5\u770b\u4e0b\u9762\u7684\u94fe\u63a5\uff1a\n\n * Configure Storybook\n\n\u4e0d\u8fc7\u5728\u6a21\u5757\u9879\u76ee\u91cc\u8fdb\u884c Storybook \u5b58\u5728\u4e00\u4e9b\u9650\u5236\uff1a\n\n * \u76ee\u524d\u4e0d\u80fd\u4fee\u6539 Story \u6587\u4ef6\u5b58\u653e\u7684\u4f4d\u7f6e\uff0c\u5373\u65e0\u6cd5\u5728 main.js \u6587\u4ef6\u91cc\u4fee\u6539 stories \u914d\u7f6e\u3002\n * \u76ee\u524d\u4e0d\u80fd\u4fee\u6539 Webpack \u548c Babel \u76f8\u5173\u7684\u914d\u7f6e\uff0c\u5373\u65e0\u6cd5\u5728 main.js \u6587\u4ef6\u91cc\u4fee\u6539 webpackFinal \u548c babel \u914d\u7f6e\u3002\n\n\u5728\u672a\u6765\u6211\u4eec\u4f1a\u8003\u8651\u8fd9\u4e9b\u914d\u7f6e\u662f\u5426\u53ef\u4ee5\u5141\u8bb8\u4fee\u6539\uff0c\u4e0d\u8fc7\u76ee\u524d\u4e3a\u4e86\u51cf\u5c11\u4e0d\u53ef\u9884\u77e5\u7684\u95ee\u9898\u6682\u65f6\u9650\u5236\u4f7f\u7528\u8fd9\u4e9b\u914d\u7f6e\u3002\n\n\n\u6784\u5efa STORYBOOK \u4ea7\u7269\n\n\u9664\u4e86\u53ef\u4ee5\u5bf9\u7ec4\u4ef6\u6216\u8005\u666e\u901a\u7684\u6a21\u5757\u8fdb\u884c Storybook \u8c03\u8bd5\uff0c\u8fd8\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u7684\u547d\u4ee4\u6765\u6267\u884c Storybook \u7684\u6784\u5efa\u4efb\u52a1\u3002\n\nmodern build --platform storybook\n\n\n\u5173\u4e8e modern build --platform \u547d\u4ee4\u53ef\u4ee5\u67e5\u770b\uff1a\n\n * modern build\n\n\u6784\u5efa\u5b8c\u6210\u540e\uff0c\u53ef\u4ee5\u5728 dist/storybook-static \u76ee\u5f55\u770b\u5230\u6784\u5efa\u4ea7\u7269\u6587\u4ef6\u3002',frontmatter:{sidebar_position:5}},{id:51,title:"\u5f00\u53d1\u7ec4\u4ef6",routePath:"/module-tools/guide/best-practices/components",toc:[{id:"\u521d\u59cb\u5316\u9879\u76ee-1",text:"\u521d\u59cb\u5316\u9879\u76ee",depth:2},{id:"\u4f7f\u7528-storybook-\u8c03\u8bd5\u4ee3\u7801-1",text:"\u4f7f\u7528 Storybook \u8c03\u8bd5\u4ee3\u7801",depth:2},{id:"\u5f00\u53d1\u6837\u5f0f-1",text:"\u5f00\u53d1\u6837\u5f0f",depth:2},{id:"csspostcss-3",text:"CSS/PostCSS",depth:3},{id:"less-6",text:"Less",depth:3},{id:"sassscss-3",text:"Sass/Scss",depth:3},{id:"tailwind-css-3",text:"Tailwind CSS",depth:3},{id:"html-\u7c7b\u540d-3",text:"HTML \u7c7b\u540d",depth:4},{id:"apply-3",text:"@apply",depth:4},{id:"\u63a8\u8350\u65b9\u5f0f-1",text:"\u63a8\u8350\u65b9\u5f0f",depth:4},{id:"bundle-\u548c-bundleless-\u6784\u5efa\u4ea7\u7269\u533a\u522b-1",text:"bundle \u548c bundleless \u6784\u5efa\u4ea7\u7269\u533a\u522b",depth:4},{id:"css-modules-3",text:"CSS Modules",depth:3},{id:"\u914d\u7f6e\u6784\u5efa\u4ea7\u7269-1",text:"\u914d\u7f6e\u6784\u5efa\u4ea7\u7269",depth:2},{id:"\u6d4b\u8bd5\u7ec4\u4ef6-1",text:"\u6d4b\u8bd5\u7ec4\u4ef6",depth:2},{id:"\u53d1\u5e03\u7ec4\u4ef6-1",text:"\u53d1\u5e03\u7ec4\u4ef6",depth:2}],content:'\u5f00\u53d1\u7ec4\u4ef6\n\n\u672c\u7ae0\u5c06\u8981\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848\u5f00\u53d1\u7ec4\u4ef6\u9879\u76ee\u3002\n\n\n\u521d\u59cb\u5316\u9879\u76ee\n\n<CH.Spotlight>\n\nnpx @modern-js/create components-project\n\n? \u8bf7\u9009\u62e9\u4f60\u60f3\u521b\u5efa\u7684\u5de5\u7a0b\u7c7b\u578b \u6a21\u5757\n? \u8bf7\u586b\u5199\u9879\u76ee\u540d\u79f0 components-demo\n? \u8bf7\u9009\u62e9\u5f00\u53d1\u8bed\u8a00 TS\n? \u8bf7\u9009\u62e9\u5305\u7ba1\u7406\u5de5\u5177 pnpm\n\n\n--------------------------------------------------------------------------------\n\n\u63a8\u8350\u4f7f\u7528 @modern-js/create \u547d\u4ee4\u6765\u521d\u59cb\u5316\u4e00\u4e2a npm \u9879\u76ee\u3002\n\nnpx @modern-js/create components-project\n\n? \u8bf7\u9009\u62e9\u4f60\u60f3\u521b\u5efa\u7684\u5de5\u7a0b\u7c7b\u578b \u6a21\u5757\n? \u8bf7\u586b\u5199\u9879\u76ee\u540d\u79f0 components-demo\n? \u8bf7\u9009\u62e9\u5f00\u53d1\u8bed\u8a00 TS\n? \u8bf7\u9009\u62e9\u5305\u7ba1\u7406\u5de5\u5177 pnpm\n\n\n--------------------------------------------------------------------------------\n\n\u521d\u59cb\u5316\u7684\u76ee\u5f55\u7ed3\u6784\u3002\n\n.\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 node_modules/\n\u251c\u2500\u2500 dist/\n\u251c\u2500\u2500 modern.config.ts\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 pnpm-lock.yaml\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 index.ts\n\u2502   \u2514\u2500\u2500 modern-app-env.d.ts\n\u2514\u2500\u2500 tsconfig.json\n\n\n--------------------------------------------------------------------------------\n\n\u4fee\u6539 ./src/index.ts \u6587\u4ef6\u540e\u7f00\u548c\u5185\u5bb9\u3002\n\n\u6b64\u65f6\u5c31\u521d\u59cb\u5316\u4e86\u4e00\u4e2a\u7ec4\u4ef6\u9879\u76ee\u3002\n\nexport default () => {\n  return <div>hello world</div>;\n};\n\n\n</CH.Spotlight>\n\n\n\u4f7f\u7528 STORYBOOK \u8c03\u8bd5\u4ee3\u7801\n\n<CH.Spotlight>\n\npnpm run new\n\n? \u8bf7\u9009\u62e9\u4f60\u60f3\u8981\u7684\u64cd\u4f5c \u542f\u7528\u53ef\u9009\u529f\u80fd\n? \u542f\u7528\u53ef\u9009\u529f\u80fd \u542f\u7528\u300cStorybook\u300d\n\n\n--------------------------------------------------------------------------------\n\n\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u6267\u884c new \u547d\u4ee4\uff0c\u53ef\u4ee5\u5f00\u542f Storybook \u529f\u80fd\u3002\n\npnpm run new\n\n? \u8bf7\u9009\u62e9\u4f60\u60f3\u8981\u7684\u64cd\u4f5c \u542f\u7528\u53ef\u9009\u529f\u80fd\n? \u542f\u7528\u53ef\u9009\u529f\u80fd \u542f\u7528\u300cStorybook\u300d\n\n\n--------------------------------------------------------------------------------\n\n\u6210\u529f\u5f00\u542f\u540e\uff0c\u4f1a\u770b\u5230 package.json \u4e2d\u65b0\u589e\u4e86\u4f9d\u8d56\u3002\u540c\u65f6\u521b\u5efa\u4e86 stories \u76ee\u5f55\u548c\u76f8\u5173\u7684\u521d\u59cb\u5316\u6587\u4ef6\u3002\n\n<CH.Code>\n\n{\n  "name": "components-demo",\n  "devDependencies": {\n    "@modern-js/plugin-storybook": "x.y.z",\n    "@modern-js/runtime": "x.y.z",\n    "react": "^17",\n    "react-dom": "^17"\n  }\n}\n\n\n.\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 index.ts\n\u2502   \u2514\u2500\u2500 modern-app-env.d.ts\n\u251c\u2500\u2500 stories\n\u2502   \u251c\u2500\u2500 .eslintrc.js\n\u2502   \u251c\u2500\u2500 index.stories.tsx\n\u2502   \u2514\u2500\u2500 tsconfig.json\n\n\n</CH.Code>\n\n--------------------------------------------------------------------------------\n\n\u521d\u59cb\u5316\u540e\uff0c\u5728 ./stories \u76ee\u5f55\u4e0b\u7684 tsconfig.json \u6587\u4ef6\u4e2d\u9ed8\u8ba4\u8bbe\u7f6e\u4e86\u4e0e\u9879\u76ee\u540c\u540d\u7684 paths \u914d\u7f6e\u3002\n\n{\n  "extends": "../tsconfig.json",\n  "compilerOptions": {\n    "baseUrl": "../",\n    "paths": {\n      "components-demo": ["./"],\n      "components-demo/*": ["./*"]\n    }\n  },\n  "include": ["**/*"]\n}\n\n\n--------------------------------------------------------------------------------\n\n\u8fd9\u6837\u7684\u914d\u7f6e\u53ef\u4ee5\u8ba9\u4f60\u5728 Story \u4ee3\u7801\u4e2d\u76f4\u63a5\u4f7f\u7528\u9879\u76ee\u7684\u540d\u79f0\u5f15\u5165\u4ee3\u7801\u3002\n\n<CH.Code>\n\n\n\nexport const YourStory = () => <Component />;\n\nexport default {\n  title: \'Your Stories\',\n};\n\n\n--------------------------------------------------------------------------------\n\nexport default () => {\n  return <div>hello world</div>;\n};\n\n\n</CH.Code>\n\n--------------------------------------------------------------------------------\n\n\u6b64\u65f6 Storybook \u4f1a\u6839\u636e\u9879\u76ee\u7684 package.json \u6587\u4ef6\u4e2d\u7684 main\u3001exports \u8fd9\u6837\u7684\u5b57\u6bb5\u786e\u8ba4\u5bfc\u5165\u4ee3\u7801\u7684\u5165\u53e3\uff1b \u6839\u636e types\n\u5b57\u6bb5\u786e\u5b9a\u7c7b\u578b\u6587\u4ef6\u7684\u4f4d\u7f6e\u3002\n\n{\n  "name": "components-demo",\n  "main": "./dist/esm/index.js",\n  "types": "./dist/types/index.d.ts"\n}\n\n\n--------------------------------------------------------------------------------\n\n\u867d\u7136\u4e5f\u652f\u6301\u5bfc\u5165\u6e90\u4ee3\u7801\u8fdb\u884c\u8c03\u8bd5\uff0c\u4e0d\u8fc7\u4f7f\u7528\u9879\u76ee\u4ea7\u7269\u8c03\u8bd5\u66f4\u52a0\u53ef\u9760\u3002\n\n\u4f7f\u7528\u6e90\u4ee3\u7801\u8c03\u8bd5\u5b58\u5728\u5c40\u9650\u6027\uff1a\u67d0\u4e9b\u914d\u7f6e\u65e0\u6cd5\u5728 Storybook \u548c\u539f\u672c\u6784\u5efa\u652f\u6301\u7684\u914d\u7f6e\u7b49\u4ef7\u4f7f\u7528\u3002\n\n\u56e0\u6b64\u66f4\u63a8\u8350\u4f7f\u7528\u4ea7\u7269\u8fdb\u884c\u8c03\u8bd5\u3002\n\n\n\nexport const YourStory = () => <Component />;\n\nexport default {\n  title: \'Your Stories\',\n};\n\n\n</CH.Spotlight>\n\n\n\u5f00\u53d1\u6837\u5f0f\n\n\u63a5\u4e0b\u6765\u6211\u4eec\u53ef\u4ee5\u7ed9\u7ec4\u4ef6\u6dfb\u52a0\u6837\u5f0f\u3002\n\n\u76ee\u524d\u652f\u6301\u5f00\u53d1\u6837\u5f0f\u7684\u80fd\u529b\u6709\uff1a\n\n * CSS/PostCSS\n * Less\n * Scss/Sass\n * Tailwind CSS\n * CSS Modules\n\n\nCSS/POSTCSS\n\n\u6a21\u5757\u5de5\u7a0b\u652f\u6301 PostCSS\uff0c\u5e76\u4e14\u5185\u7f6e\u4e86\u4ee5\u4e0b postcss \u63d2\u4ef6\uff1a\n\n * flexbugs-fixes\n * custom-properties\n * initial\n * page-break\n * font-variant\n * media-minmax\n * nesting\n\n\u56e0\u6b64\u6211\u4eec\u53ef\u4ee5\u5728\u9879\u76ee\u4e2d\u521b\u5efa .css \u6587\u4ef6\uff0c\u5e76\u4e14\u53ef\u4ee5\u76f4\u63a5\u5728 css \u6587\u4ef6\u4e2d\u4f7f\u7528\u8fd9\u4e9b\u63d2\u4ef6\u63d0\u4f9b\u7684\u8bed\u6cd5\u652f\u6301\u548c\u80fd\u529b\u3002\n\n<CH.Spotlight>\n\na,\nb {\n  color: red;\n\n  /* "&" comes first */\n  & c,\n  & d {\n    color: white;\n  }\n\n  /* "&" comes later, requiring "@nest" */\n  @nest e & {\n    color: yellow;\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\n\u6e90\u4ee3\u7801\u3002\n\n\n\n--------------------------------------------------------------------------------\n\ncss \u4ea7\u7269\u3002\n\na,\nb {\n  color: red;\n}\na c,\nb c,\na d,\nb d {\n  color: white;\n}\ne a,\ne b {\n  color: yellow;\n}\n\n\n</CH.Spotlight>\n\n\nLESS\n\n\u6a21\u5757\u5de5\u7a0b\u652f\u6301\u4f7f\u7528 Less \u5f00\u53d1\u6837\u5f0f\u3002\n\n> \u76ee\u524d\u652f\u6301\u7684\u7248\u672c\u4e3a 4.1.3\n\n<CH.Spotlight>\n\n@bg: black;\n@bg-light: boolean(luma(@bg) > 50%);\n\ndiv {\n  background: @bg;\n  color: if(@bg-light, black, white);\n}\n\n\n--------------------------------------------------------------------------------\n\n\u6e90\u4ee3\u7801\u3002\n\n\n\n--------------------------------------------------------------------------------\n\nLess \u4ea7\u7269\u3002\n\ndiv {\n  background: black;\n  color: white;\n}\n\n\n</CH.Spotlight>\n\n\nSASS/SCSS\n\n\u6a21\u5757\u5de5\u7a0b\u652f\u6301\u4f7f\u7528 Scss/Sass \u5f00\u53d1\u6837\u5f0f\u3002\n\n> \u76ee\u524d\u652f\u6301\u7684\u7248\u672c\u4e3a 1.54.4\n\n<CH.Spotlight>\n\n$font-stack: Helvetica, sans-serif;\n$primary-color: #333;\n\nbody {\n  font: 100% $font-stack;\n  color: $primary-color;\n}\n\n\n--------------------------------------------------------------------------------\n\n\u6e90\u4ee3\u7801\u3002\n\n\n\n--------------------------------------------------------------------------------\n\nLess \u4ea7\u7269\u3002\n\nbody {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}\n\n\n</CH.Spotlight>\n\n\nTAILWIND CSS\n\n\u6a21\u5757\u5de5\u7a0b\u652f\u6301\u4f7f\u7528 Tailwind CSS \u5f00\u53d1\u7ec4\u4ef6\u6837\u5f0f\u3002\n\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6a21\u5757\u5de5\u7a0b\u6ca1\u6709\u5f00\u542f\u8be5\u529f\u80fd\uff0c\u9700\u8981\u6309\u7167\u4e0b\u9762\u7684\u65b9\u5f0f\u5f00\u542f\u5b83\u3002\n\n<CH.Spotlight>\n\npnpm run new\n\n? \u8bf7\u9009\u62e9\u4f60\u60f3\u8981\u7684\u64cd\u4f5c \u542f\u7528\u53ef\u9009\u529f\u80fd\n? \u542f\u7528\u53ef\u9009\u529f\u80fd \u542f\u7528\u300cStorybook\u300d\n\n\n--------------------------------------------------------------------------------\n\n\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u6267\u884c new \u547d\u4ee4\uff0c\u53ef\u4ee5\u5f00\u542f Tailwind CSS \u529f\u80fd\u3002\n\npnpm run new\n\n? \u8bf7\u9009\u62e9\u4f60\u60f3\u8981\u7684\u64cd\u4f5c \u542f\u7528\u53ef\u9009\u529f\u80fd\n? \u542f\u7528\u53ef\u9009\u529f\u80fd \u542f\u7528 Tailwind CSS \u652f\u6301\n\n\n--------------------------------------------------------------------------------\n\n\u6210\u529f\u5f00\u542f\u540e\uff0c\u4f1a\u770b\u5230 package.json \u4e2d\u65b0\u589e\u4e86\u4f9d\u8d56\u3002\n\n{\n  "devDependencies": {\n    "@modern-js/plugin-tailwindcss": "x.y.z"\n  }\n}\n\n\n</CH.Spotlight>\n\nTailwind CSS \u63d0\u4f9b\u4e86\u4e24\u79cd\u4f7f\u7528\u65b9\u5f0f\uff1a\n\nHTML \u7c7b\u540d\n\n<CH.Spotlight>\n\nimport \'tailwindcss/utilities.css\';\n\nexport default () => {\n  return <div className="bg-black text-white">hello world</div>;\n};\n\n\n--------------------------------------------------------------------------------\n\nTailwind CSS \u652f\u6301\u5728 HTML \u6807\u7b7e\u4e0a\u4f7f\u7528\u7c7b\u540d\u7684\u65b9\u5f0f\u589e\u52a0\u6837\u5f0f\u3002\n\n\n\n--------------------------------------------------------------------------------\n\n\u5f53\u4f7f\u7528 HTML \u7c7b\u540d\u7684\u65f6\u5019\uff0c\u4e00\u5b9a\u8981\u6ce8\u610f\u5bfc\u5165 Tailwind CSS \u76f8\u5e94\u7684 css \u6587\u4ef6\u3002\n\n\n\n--------------------------------------------------------------------------------\n\n\u6837\u5f0f\u4ea7\u7269\u3002\n\n> \u6b64\u65f6\u662f bundle \u6784\u5efa\u3002\n\n/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */\n.table {\n  display: table;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes ping {\n  75%,\n  100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes bounce {\n  0%,\n  100% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n  50% {\n    transform: none;\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n*,\n::before,\n::after {\n  --tw-shadow: 0 0 #0000;\n}\n*,\n::before,\n::after {\n  --tw-ring-inset: var(--tw-empty);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n}\n@media (min-width: 640px) {\n}\n@media (min-width: 768px) {\n}\n@media (min-width: 1024px) {\n}\n@media (min-width: 1280px) {\n}\n@media (min-width: 1536px) {\n}\n\n\n</CH.Spotlight>\n\n@APPLY\n\nTailwind CSS \u63d0\u4f9b\u4e86 @apply \u6307\u4ee4\uff0c\u53ef\u4ee5\u901a\u8fc7\u5b83\u5c06 Tailwind CSS \u63d0\u4f9b\u7684\u6837\u5f0f\u5185\u8054\u5230\u6211\u4eec\u7f16\u5199\u7684\u6837\u5f0f\u4e2d\u3002\n\n@apply \u53ef\u4ee5\u7528\u4e8e CSS\u3001Less\u3001Sass \u4e2d\u3002\n\n.btn {\n  @apply font-bold py-2 px-4 rounded;\n}\n\n\n\u4f46\u662f\u4f7f\u7528\u8fc7\u7a0b\u4e2d\uff0c\u5bf9\u4e8e Less \u548c Sass \u6709\u4e9b\u60c5\u51b5\u9700\u8981\u6ce8\u610f\uff1a\n\nSASS\n\n\u5f53\u5c06 Tailwind \u4e0e Sass \u4e00\u8d77\u4f7f\u7528\u65f6\uff0c@apply \u540e\u9762\u5b58\u5728 !important \u7684\u65f6\u5019\uff0c\u9700\u8981\u4f7f\u7528\u63d2\u503c\u6765\u8ba9 Sass \u6b63\u786e\u7f16\u8bd1\u3002\n\n<CH.Spotlight>\n\n.alert {\n  @apply bg-red-500 !important;\n}\n\n\n--------------------------------------------------------------------------------\n\n\u4e0d\u80fd\u6b63\u5e38\u5de5\u4f5c\u3002\n\n\n\n--------------------------------------------------------------------------------\n\n\u80fd\u591f\u6b63\u5e38\u5de5\u4f5c\u3002\n\n.alert {\n  @apply bg-red-500 #{!important};\n}\n\n\n</CH.Spotlight>\n\nLESS\n\n\u5728\u4e0e Less \u4e00\u8d77\u4f7f\u7528 Tailwind \u65f6\uff0c\u4f60\u4e0d\u80fd\u5d4c\u5957 Tailwind \u7684 @screen \u6307\u4ee4\u3002\n\n<CH.Spotlight>\n\n.card {\n  @apply rounded-none;\n\n  @screen sm {\n    @apply rounded-lg;\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\n\u4e0d\u80fd\u6b63\u5e38\u5de5\u4f5c\u3002\n\n\n\n--------------------------------------------------------------------------------\n\n\u76f8\u53cd\uff0c\u4f7f\u7528\u5e38\u89c4\u7684\u5a92\u4f53\u67e5\u8be2\u548c theme() \u51fd\u6570\u6765\u5f15\u7528\u4f60\u7684\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u6216\u8005\u5e72\u8106\u4e0d\u8981\u5d4c\u5957\u4f60\u7684 @screen \u6307\u4ee4\u3002\n\n<CH.Code>\n\n// Use a regular media query and theme()\n.card {\n  @apply rounded-none;\n\n  @media (min-width: theme(\'screens.sm\')) {\n    @apply rounded-lg;\n  }\n}\n\n\n--------------------------------------------------------------------------------\n\n// Use the @screen directive at the top-level\n.card {\n  @apply rounded-none;\n\n  @media (min-width: theme(\'screens.sm\')) {\n    @apply rounded-lg;\n  }\n}\n\n\n</CH.Code>\n\n</CH.Spotlight>\n\n\u63a8\u8350\u65b9\u5f0f\n\n\u63a8\u8350\u4f7f\u7528 @apply \u6307\u5b9a\u7684\u65b9\u5f0f\u5f00\u53d1\u6837\u5f0f\uff0c\u8fd9\u6837\u5728\u6837\u5f0f\u4ea7\u7269\u4e2d\u4ec5\u5305\u542b\u901a\u8fc7\u6307\u4ee4\u5185\u8054\u7684\u6837\u5f0f\u3002\n\n\u5f53\u4f7f\u7528 HTML \u7c7b\u540d\u7684\u65b9\u5f0f\u6dfb\u52a0\u6837\u5f0f\u7684\u65f6\u5019\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b Tailwind\n\u4e0d\u4ec5\u4f1a\u5c06\u672c\u8eab\u7c7b\u540d\u5bf9\u5e94\u7684\u6837\u5f0f\u52a0\u5165\u4ea7\u7269\u4e2d\uff0c\u540c\u65f6\u8fd8\u4f1a\u6709\u989d\u5916\u7684\u6837\u5f0f\u4ee3\u7801\u5b58\u5728\uff0c\u867d\u7136\u8fd9\u4e9b\u4ee3\u7801\u53ef\u80fd\u4e0d\u4f1a\u5bf9\u672c\u8eab\u7684\u6837\u5f0f\u4ea7\u751f\u5f71\u54cd\u3002\n\nBUNDLE \u548c BUNDLELESS \u6784\u5efa\u4ea7\u7269\u533a\u522b\n\n\u5bf9\u4e8e\u4ee5\u4e0b\u4ee3\u7801\uff0c\u5728 bundle \u548c bundleless \u4e24\u79cd\u6a21\u5f0f\u4e0b\uff0c\u6784\u5efa\u4ea7\u7269\u4f1a\u6709\u5f88\u5927\u533a\u522b\u3002\n\n> \u6240\u8c13 bundle \u548c bundleless \u53ef\u4ee5\u67e5\u770b \u3010Bundle \u548c Bundleless\u3011\n\nimport \'tailwindcss/utilities.css\';\n\nexport default () => {\n  return <div className="bg-black text-white">hello world11</div>;\n};\n\n\nBundle \u6a21\u5f0f\u4e0b\uff0c\u4f1a\u5c06\u7b2c\u4e09\u65b9\u4f9d\u8d56\u6253\u5305\u8fdb\u6765\u3002\n\n\u5bf9\u4e8e\u6837\u5f0f\u5219\u4f1a\u751f\u6210\u4e00\u4efd\u5355\u72ec\u7684\u4ea7\u7269\u6587\u4ef6\uff0c\u5e76\u4e14\u5728 Js \u4ea7\u7269\u6587\u4ef6\u4e2d\u5e76\u4e0d\u4f1a\u5b58\u5728\u5bfc\u5165\u6837\u5f0f\u7684\u76f8\u5173\u4ee3\u7801\u3002\n\n\u5982\u679c\u9700\u8981\u5c06\u6837\u5f0f\u6ce8\u5165 Js \u4ea7\u7269\u4e2d\uff0c\u53ef\u4ee5\u5f00\u542f style.inject API\u3002\n\n<CH.Code>\n\n/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */\n.table {\n  display: table;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: .5;\n  }\n}\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n  50% {\n    transform: none;\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n*,\n::before,\n::after {\n  --tw-shadow: 0 0 #0000 ;\n}\n*,\n::before,\n::after {\n  --tw-ring-inset: var(--tw-empty, );\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000 ;\n}\n@media (min-width: 640px) {\n}\n@media (min-width: 768px) {\n}\n@media (min-width: 1024px) {\n}\n@media (min-width: 1280px) {\n}\n@media (min-width: 1536px) {\n}\n\n\n--------------------------------------------------------------------------------\n\n// src/index.tsx\n\nvar src_default = () => {\n  return /* @__PURE__ */ jsx("div", {\n    className: "bg-black text-white",\n    children: "hello world11"\n  });\n};\nexport {\n  src_default as default\n};\n\n\n</CH.Code>\n\nBundleless \u6a21\u5f0f\u4e0b\uff0c\u5e76\u4e0d\u4f1a\u5c06\u7b2c\u4e09\u65b9\u4f9d\u8d56\u6253\u5305\u8fdb\u6765\uff0c\u6b64\u65f6\u4e0d\u4f1a\u6709\u6837\u5f0f\u4ea7\u7269\u751f\u6210\u3002\n\n\nimport \'tailwindcss/utilities.css\';\nvar src_default = () => {\n  return /* @__PURE__ */ jsx(\'div\', {\n    className: \'bg-black text-white\',\n    children: \'hello world11\',\n  });\n};\nexport { src_default as default };\n\n\n\nCSS MODULES\n\n\u6a21\u5757\u5de5\u7a0b\u652f\u6301\u4f7f\u7528 CSS Module \u5f00\u53d1\u6837\u5f0f\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u4f1a\u5c06\u4ee5\u4e0b\u6587\u4ef6\u8bc6\u522b\u4e3a CSS Module \u6587\u4ef6\uff1a\n\n * .module.css\n * .module.less\n * .module.scss\n * .module.sass\n\n\u5982\u679c\u9700\u8981\u5bf9 CSS Modules \u8fdb\u884c\u914d\u7f6e\uff0c\u53ef\u4ee5\u67e5\u770b\u4e00\u4e0b API\uff1a\n\n * autoModules\n * modules\n\n\u4e0b\u9762\u662f\u4e00\u4e2a\u4ee3\u7801\u793a\u4f8b\uff1a\n\n<CH.Code>\n\n\n\nexport default () => {\n  return <div className={style.btn}>hello world</div>;\n};\n\n\n.btn {\n  color: blue;\n}\n\n\n</CH.Code>\n\n\n\u914d\u7f6e\u6784\u5efa\u4ea7\u7269\n\n\u6839\u636e\u7ec4\u4ef6\u9879\u76ee\u4f7f\u7528\u7684\u591a\u6570\u573a\u666f\uff0c\u63a8\u8350\u4f7f\u7528 npm-component \u6784\u5efa\u9884\u8bbe\u3002\u8be5\u9884\u8bbe\u5f97\u5230\u7684\u4ea7\u7269\u76ee\u5f55\u7ed3\u6784\u4e3a\uff1a\n\n.\n\u251c\u2500\u2500 dist\n\u2502   \u251c\u2500\u2500 es\n\u2502   \u251c\u2500\u2500 lib\n\u2502   \u2514\u2500\u2500 types\n\n\n * ./dist/es: \u5305\u542b\u4e86\u652f\u6301 es6 \u8bed\u6cd5\u7684 ES modules \u683c\u5f0f\u7684 bundleless \u4ea7\u7269\u3002\n * ./dist/lib: \u5305\u542b\u4e86\u652f\u6301 es6 \u8bed\u6cd5\u7684 CommonJS \u683c\u5f0f\u7684 bundleless \u4ea7\u7269\u3002\n * ./dist/types: \u5305\u542b\u4e86\u7c7b\u578b\u6587\u4ef6\u3002\n\n\u5982\u679c\u5bf9\u4f7f\u7528\u8bed\u6cd5\u652f\u6301\u6709\u8981\u6c42\uff0c\u53ef\u4ee5\u624b\u52a8\u914d\u7f6e buildPreset\uff0c\u5e76\u4e14\u652f\u6301\u5728 npm-component \u57fa\u7840\u4e0a\u589e\u52a0\u540e\u7f00\u7684\u65b9\u5f0f\u4fee\u6539\u652f\u6301\u7684\u8bed\u6cd5\uff1a\n\nexport default defineConfig({\n  buildPreset: \'npm-component-es2019\',\n});\n\n\n\u5982\u679c\u5bf9\u6784\u5efa\u4ea7\u7269\u76ee\u5f55\u7ed3\u6784\u6709\u7279\u6b8a\u9700\u6c42\uff0c\u5219\u53ef\u4ee5\u4f7f\u7528 buildConfig API\uff0c\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u6587\u6863\u6765\u4e86\u89e3\u4f7f\u7528\u65b9\u5f0f\uff1a\n\n * \u4fee\u6539\u8f93\u51fa\u4ea7\u7269\n * \u6df1\u5165\u7406\u89e3\u6784\u5efa\n\n\n\u6d4b\u8bd5\u7ec4\u4ef6\n\n\u5173\u4e8e\u5982\u4f55\u5bf9\u7ec4\u4ef6\u8fdb\u884c\u6d4b\u8bd5\uff0c\u53ef\u4ee5\u53c2\u8003 \u3010\u6d4b\u8bd5\u9879\u76ee\u3011\u3002\n\n\n\u53d1\u5e03\u7ec4\u4ef6\n\n\u63a8\u8350\u4f7f\u7528\u6a21\u5757\u5de5\u7a0b\u63d0\u4f9b\u7248\u672c\u53d1\u5e03\u529f\u80fd\uff0c\u53ef\u4ee5\u53c2\u8003 \u3010\u7248\u672c\u7ba1\u7406\u4e0e\u53d1\u5e03\u3011\u3002',frontmatter:{sidebar_position:1}},{id:52,title:"\u5feb\u901f\u5f00\u59cb",routePath:"/module-tools/guide/intro/getting-started",toc:[{id:"\u4e09\u5206\u949f\u5feb\u901f\u4e0a\u624b-1",text:"\u4e09\u5206\u949f\u5feb\u901f\u4e0a\u624b",depth:2},{id:"\u8ba9\u6211\u4eec\u5f00\u59cb\u5427-1",text:"\u8ba9\u6211\u4eec\u5f00\u59cb\u5427",depth:2}],content:'\u5feb\u901f\u5f00\u59cb\n\n\n\u4e09\u5206\u949f\u5feb\u901f\u4e0a\u624b\n\n\u60f3\u8981\u5b9e\u9645\u4f53\u9a8c Module Tools\uff1f\u9996\u5148\u9700\u8981\u5b89\u88c5 Node.js LTS\uff0c\u5e76\u786e\u4fdd Node \u7248\u672c\u5927\u4e8e\u7b49\u4e8e 14.18.0\u3002\n\n\u7136\u540e\u5728\u4f60\u7684\u9879\u76ee\u91cc\u5b89\u88c5\u4ee5\u4e0b\u4f9d\u8d56\uff1a\n\n * @modern-js/module-tools\n * @modern-js/plugin-testing\n\n> \u5982\u679c\u662f\u4e00\u4e2a TypeScript \u9879\u76ee\uff0c\u5219\u9700\u8981\u589e\u52a0 "typescript" \u4f9d\u8d56\u3002\n\nnpm install -D @modern-js/module-tools @modern-js/plugin-testing\n\n\n> \u5bf9\u4e8e\u4f7f\u7528 pnpm \u6216\u8005 Yarn \u5305\u7ba1\u7406\u5668\u7684\u9879\u76ee\uff0c\u53ea\u9700\u8981\u66ff\u6362 npm \u5c31\u53ef\u4ee5\u4e86\u3002\u63a8\u8350\u4f7f\u7528 pnpm\u3002\n\n\u63a5\u7740\u5728\u9879\u76ee\u7684 package.json \u6587\u4ef6\u91cc\u589e\u52a0\u547d\u4ee4 "build": "modern build"\uff1a\n\n{\n  "scripts": {\n    "build": "modern build"\n  }\n}\n\n\n\u5982\u679c\u4f60\u7684\u9879\u76ee\u5b58\u5728 src/index.(js|jsx) \u6587\u4ef6\u6216\u8005\u540c\u65f6\u5b58\u5728 src/index.(ts|tsx) \u548c tsconfig.json\n\u6587\u4ef6\uff0c\u90a3\u4e48\u606d\u559c\u4f60\u53ef\u4ee5\u8fd0\u884c\u76f4\u63a5\u8fd0\u884c npm run build \u6765\u4f7f\u7528 Module Tools \u6784\u5efa\u4f60\u7684\u9879\u76ee\u4e86\u3002\n\n\u5982\u679c\u4f60\u60f3\u8981\u770b\u770b\u4f7f\u7528\u4e86\u6a21\u5757\u5de5\u7a0b\u65b9\u6848\u7684\u771f\u5b9e\u9879\u76ee\uff0c\u53ef\u4ee5\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a\n\ngit clone https://github.com/modern-js-dev/module-tools-examples\ncd module-tools-example\n\n## \u6267\u884c\u6784\u5efa\uff1a\npnpm build\n\n## \u76d1\u542c\u6a21\u5f0f\u6267\u884c\u6784\u5efa\uff1a\npnpm build --watch\n\n## \u542f\u52a8 Storybook\npnpm dev storybook\n\n## \u6d4b\u8bd5\npnpm test\n\n\n> \u4e0a\u9762\u7684\u94fe\u63a5\u5bf9\u5e94\u7684\u5185\u5bb9\u5f85\u8865\u5145\n\n\u5982\u679c\u4f60\u60f3\u8981\u521b\u5efa\u4e00\u4e2a\u5b8c\u6574\u7684\u6a21\u5757\u5de5\u7a0b\u9879\u76ee\uff0c\u53ef\u4ee5\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a\n\nnpx @modern-js/create your-project-dir-name\n\n\n\u63a5\u7740\u5728\u95ee\u9898\u4ea4\u4e92\u4e2d\uff0c\u6309\u7167\u5982\u4e0b\u9009\u62e9\uff1a\n\n? \u8bf7\u9009\u62e9\u4f60\u60f3\u521b\u5efa\u7684\u5de5\u7a0b\u7c7b\u578b \u6a21\u5757\n? \u8bf7\u586b\u5199\u9879\u76ee\u540d\u79f0 library\n? \u8bf7\u9009\u62e9\u5f00\u53d1\u8bed\u8a00 TS\n? \u8bf7\u9009\u62e9\u5305\u7ba1\u7406\u5de5\u5177 pnpm\n\n\n> \u9879\u76ee\u540d\u79f0\u4e3a package.json \u4e2d\u7684 "name" \u5b57\u6bb5\u503c\u3002\n\n\u63a5\u7740\u5c31\u4f1a\u5f00\u59cb\u521d\u59cb\u5316\u9879\u76ee\u7684\u6d41\u7a0b\u3002\u5728\u9879\u76ee\u76ee\u5f55\u548c\u6587\u4ef6\u751f\u6210\u4ee5\u53ca\u4f9d\u8d56\u5b89\u88c5\u5b8c\u6bd5\u540e\uff0c\u6b64\u65f6\u5c31\u521b\u5efa\u4e86\u4e00\u4e2a\u5b8c\u6574\u7684\u6a21\u5757\u5de5\u7a0b\u9879\u76ee\u3002\n\n\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u6267\u884c pnpm build \u547d\u4ee4\u542f\u52a8\u9879\u76ee\u7684\u6784\u5efa\uff0c\u6267\u884c pnpm build --watch \u547d\u4ee4\u5f00\u542f\u6784\u5efa\u7684\u89c2\u5bdf\u6a21\u5f0f\u3002\n\n\n\u8ba9\u6211\u4eec\u5f00\u59cb\u5427\n\n\u9009\u62e9\u9002\u5408\u4f60\u7684\u6559\u7a0b\uff1a\n\n * \u6211\u662f\u521d\u5b66\u8005\uff0c\u9700\u8981\u5b66\u4e60 Module Tools \u7684\u57fa\u7840\u4f7f\u7528\u3002\n * \u6211\u5df2\u7ecf\u521d\u6b65\u638c\u63e1\u4e86 Module Tools \u7684\u4f7f\u7528\uff0c\u53ef\u4ee5\u5b66\u4e60 Module Tools \u7684\u9ad8\u7ea7\u4f7f\u7528\u3002\n * \u6211\u662f\u9879\u76ee\u7684\u7ef4\u62a4\u8005\uff0c\u9700\u8981\u5b66\u4e60\u5982\u4f55\u5f00\u53d1 Module Tools \u7684\u63d2\u4ef6\u4ee5\u53ca\u4e86\u89e3\u66f4\u591a\u5173\u4e8e Module Tools \u8fdb\u9636\u7684\u5185\u5bb9\u3002',frontmatter:{sidebar_position:3}},{id:53,title:"\u6b22\u8fce\u4f7f\u7528",routePath:"/module-tools/guide/intro/welcome",toc:[],content:"\u6b22\u8fce\u4f7f\u7528\n\nModule Tools \u662f Modern.js\n\u7684\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848\uff0c\u540c\u65f6\u4e5f\u662f\u6838\u5fc3\u4f9d\u8d56\u3002\u5b83\u53ef\u4ee5\u8ba9\u5f00\u53d1\u8005\u66f4\u8f7b\u677e\u5730\u6784\u5efa\u3001\u8c03\u8bd5\u3001\u53d1\u5e03\u6a21\u5757\u7c7b\u578b\u7684\u9879\u76ee\u3002\u6a21\u5757\u7c7b\u578b\u7684\u9879\u76ee\u5927\u591a\u6570\u60c5\u51b5\u53ef\u4ee5\u8ba4\u4e3a\u662f npm\n\u5305\u7c7b\u578b\u7684\u9879\u76ee\uff0c\u5b83\u53ef\u80fd\u662f\u4e00\u4e2a\u7ec4\u4ef6\u3001\u7ec4\u4ef6\u5e93\u6216\u8005\u5de5\u5177\u5e93\u9879\u76ee\u3002\n\n\u5982\u679c\u4f60\u6b63\u6253\u7b97\u5f00\u53d1\u4e00\u4e2a npm \u5305\u7c7b\u578b\u7684\u9879\u76ee\uff0c\u90a3\u4e48\u4f60\u5c31\u6765\u5bf9\u5730\u65b9\u4e86\uff01Modern.js \u63d0\u4f9b\u4e86\u4e13\u4e1a\u7684\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848\u3002\u5b83\u5e26\u6765\u4e86\uff1a\n\n * \u7b80\u5355\u7684\u9879\u76ee\u521d\u59cb\u5316\uff1a\u4ec5\u9700\u6267\u884c npx @modern-js/create project-dir\n   \u547d\u4ee4\uff0c\u7136\u540e\u8fdb\u884c\u51e0\u4e2a\u4ea4\u4e92\u95ee\u9898\uff0c\u5c31\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u5b8c\u6574\u7684\u6a21\u5757\u7c7b\u578b\u9879\u76ee\u3002\u521b\u5efa\u7684\u9879\u76ee\u8fd8\u652f\u6301\u9009\u62e9 pnpm\u3001Yarn \u4e24\u79cd\u5305\u7ba1\u7406\u5668\u3002\n * \u4ee3\u7801\u683c\u5f0f\u5316\uff1a\u5728\u6a21\u5757\u5de5\u7a0b\u9879\u76ee\u4e2d\uff0c\u4f60\u53ef\u4ee5\u6267\u884c modern lint \u6765\u5bf9\u4ee3\u7801\u8fdb\u884c\u683c\u5f0f\u5316\u3002\u540c\u65f6\u521d\u59cb\u5316\u7684\u6a21\u5757\u5de5\u7a0b\u9879\u76ee\u91cc\u5305\u542b\u4e86 Modern.js \u7684\n   ESLint \u89c4\u5219\u96c6\uff0c\u53ef\u4ee5\u6ee1\u8db3\u5927\u90e8\u5206\u573a\u666f\u4e0b\u7684\u9700\u6c42\u3002\n * \u5168\u9762\u7684\u6784\u5efa\u80fd\u529b\u548c\u66f4\u5feb\u7684\u6784\u5efa\u901f\u5ea6\uff1aModule Tools \u57fa\u4e8e esbuild \u548c SWC\n   \u63d0\u4f9b\u4e86\u9ad8\u6027\u80fd\u7684\u6784\u5efa\u80fd\u529b\uff0c\u5e76\u4e14\u4e3a\u4e0d\u540c\u6784\u5efa\u6a21\u5757\u7684\u573a\u666f\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u914d\u7f6e\u3002\n * Storybook \u8c03\u8bd5\u5de5\u5177\uff1aModule Tools \u4e3a\u8c03\u8bd5\u6a21\u5757\u9879\u76ee\u63d0\u4f9b\u4e86 Storybook \u8c03\u8bd5\u5de5\u5177\u3002\u5728\u5b89\u88c5\u4e86 Module Tools \u7684\n   Storybook \u63d2\u4ef6\u540e\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 modern dev storybook \u547d\u4ee4\u6765\u542f\u52a8\u5b83\u3002\u4f60\u4e0d\u4ec5\u53ef\u4ee5\u4f7f\u7528 Storybook\n   \u5bf9\u7ec4\u4ef6\u8fdb\u884c\u8c03\u8bd5\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u5728\u5176\u4ed6\u7c7b\u578b\u7684\u6a21\u5757\u4e0a\u3002\n * \u96c6\u6210 Jest \u7684\u6d4b\u8bd5\u80fd\u529b\uff1a\u5728\u9700\u8981\u5bf9\u6a21\u5757\u6d4b\u8bd5\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u4f7f\u7528 Module Tools \u7684 modern test \u547d\u4ee4\u3002Module Tools\n   \u4e0d\u4ec5\u96c6\u6210\u4e86 Jest\uff0c\u540c\u65f6\u4e5f\u63d0\u4f9b\u4e86\u914d\u7f6e Jest \u7684 API\u3002\n * \u57fa\u4e8e Changesets \u5b9e\u73b0\u7684\u7248\u672c\u7ba1\u7406\uff1a\u5f53\u9700\u8981\u5bf9\u9879\u76ee\u8bb0\u5f55\u53d8\u66f4\u5185\u5bb9\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u4f7f\u7528 modern change \u547d\u4ee4\u751f\u6210\u5305\u542b\u53d8\u66f4\u5185\u5bb9\u7684 Markdown\n   \u6587\u4ef6\uff1b\u5f53\u9700\u8981\u5bf9\u9879\u76ee\u8fdb\u884c\u7248\u672c\u5347\u7ea7\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u4f7f\u7528 modern bump \u547d\u4ee4\u901a\u8fc7 Markdown \u6587\u4ef6\u5206\u6790\u5e76\u5347\u7ea7\u7248\u672c\uff1b\u5f53\u9700\u8981\u53d1\u5e03\u9879\u76ee\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u4f7f\u7528\n   modern release \u547d\u4ee4\u5bf9\u9879\u76ee\u8fdb\u884c\u53d1\u5e03\u3002Module Tools \u57fa\u4e8e Changesets \u5b9e\u73b0\u4e86\u8fd9\u4e9b\u547d\u4ee4\u3002\n * \u53ef\u6269\u5c55\u6027\u7684\u63d2\u4ef6\u673a\u5236\uff1a\u60f3\u8981\u4e3a\u9879\u76ee\u96c6\u6210\u5176\u4ed6\u7684\u8c03\u8bd5\u5de5\u5177\uff1f\u53c8\u6216\u8005\u662f\u60f3\u8981\u5728\u6784\u5efa\u8fc7\u7a0b\u4e2d\u505a\u4e00\u4e9b\u989d\u5916\u5904\u7406\uff1fModule Tools\n   \u63d0\u4f9b\u4e86\u63d2\u4ef6\u673a\u5236\u548c\u63d2\u4ef6\u94a9\u5b50\uff0c\u63d2\u4ef6\u94a9\u5b50\u8986\u76d6\u4e86 dev \u547d\u4ee4\u548c build \u547d\u4ee4\u4e24\u4e2a\u6d41\u7a0b\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7\u5b83\u4eec\u4e3a\u9879\u76ee\u8fdb\u884c\u80fd\u529b\u7684\u6269\u5c55\u3002\n * \u8fd8\u6709\u66f4\u591a\uff1aModule Tools\n   \u5728\u672a\u6765\u8fd8\u4f1a\u4e0d\u65ad\u7684\u5728\u6784\u5efa\u3001\u8c03\u8bd5\u529f\u80fd\u4e0a\u8fdb\u884c\u4f18\u5316\u3002\u5982\u679c\u5728\u6a21\u5757\u9879\u76ee\u6784\u5efa\u4e0a\u5b58\u5728\u9700\u8981\u89e3\u51b3\u7684\u91cd\u8981\u95ee\u9898\uff0c\u53c8\u6216\u8005\u662f\u67d0\u4e2a\u4e3b\u6d41\u7684\u6a21\u5757\u9879\u76ee\u8c03\u8bd5\u5de5\u5177\u3001\u6a21\u5f0f\u51fa\u73b0\u7684\u65f6\u5019\uff0c\u90a3\u4e48\u5b83\u4eec\u5f88\u53ef\u80fd\n   \u6210\u4e3a Module Tools \u5c06\u8981\u652f\u6301\u529f\u80fd\u3002",frontmatter:{sidebar_position:1}},{id:54,title:"\u4e3a\u4ec0\u4e48\u9700\u8981\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848",routePath:"/module-tools/guide/intro/why-module-engineering-solution",toc:[],content:"\u4e3a\u4ec0\u4e48\u9700\u8981\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848\n\n\u5927\u5bb6\u53ef\u80fd\u90fd\u7ecf\u5386\u8fc7\uff1a\u4ece\u96f6\u5f00\u59cb\u5f00\u53d1\u4e00\u4e2a\u7ec4\u4ef6\u5e93\u6216\u8005\u5de5\u5177\u5e93\u7684\u8fc7\u7a0b\u4e2d\uff0c\u6211\u4eec\u4e0d\u4ec5\u8981\u8003\u8651\u9879\u76ee\u672c\u8eab\u7684\u4ee3\u7801\u903b\u8f91\u5982\u4f55\u7f16\u5199\uff0c\u8fd8\u8981\u8003\u8651\u9879\u76ee\u7684\u6784\u5efa\u3001\u8c03\u8bd5\u3001\u6d4b\u8bd5\u3001\u4ee3\u7801\u683c\u5f0f\u5316\u7b49\u7b49\u548c\u4ee3\u7801\u903b\u8f91\u65e0\n\u5173\u7684\u4e8b\u60c5\u3002\n\n\u6bd4\u5982\u8bf4\uff0c\u5f53\u6211\u4eec\u8003\u8651\u6784\u5efa\u6a21\u5757\u9879\u76ee\u7684\u4ee3\u7801\u662f\u4f7f\u7528\u4ec0\u4e48\u6784\u5efa\u5de5\u5177\u7684\u65f6\u5019\uff0c\u5728\u4e4b\u524d\u6211\u4eec\u53ef\u80fd\u4f1a\u8003\u8651\u4f7f\u7528 webpack \u8fd8\u662f Rollup\uff0c\u7136\u800c\u73b0\u5728\u7684\u8bdd\uff0c\u4e5f\u8bb8\u8fd8\u4f1a\u8003\u8651\u662f\u4f7f\u7528\nesbuild \u8fd8\u662f SWC\u3002\n\n\u65e0\u8bba\u9009\u62e9\u54ea\u4e2a\u6784\u5efa\u5de5\u5177\uff0c\u8fd9\u5bf9\u4e8e\u6ca1\u6709\u719f\u7ec3\u638c\u63e1\u8fd9\u4e9b\u6784\u5efa\u5de5\u5177\u4f7f\u7528\u65b9\u5f0f\u7684\u5f00\u53d1\u8005\u6765\u8bf4\uff0c\u662f\u9700\u8981\u4e00\u5b9a\u7684\u6210\u672c\u53bb\u5b66\u4e60\u7684\u3002\u5373\u4f7f\u60f3\u8981\u5feb\u901f\u4f7f\u7528\uff0c\u4e5f\u4f1a\u9700\u8981\u82b1\u8d39\u5927\u91cf\u7684\u65f6\u95f4\u548c\u7cbe\u529b\u3002\n\n\u800c\u9664\u4e86\u6784\u5efa\u8fd9\u4ef6\u4e8b\u60c5\u4ee5\u5916\uff0c\u50cf\u4e3a\u9879\u76ee\u63d0\u4f9b\u8c03\u8bd5\u5de5\u5177\u3001\u652f\u6301\u6d4b\u8bd5\u80fd\u529b\u3001\u589e\u52a0\u4ee3\u7801\u683c\u5f0f\u6821\u9a8c\u7b49\u7b49\uff0c\u5bf9\u4e8e\u4e00\u4e2a\u65b0\u624b\u6765\u8bf4\u90fd\u6709\u53ef\u80fd\u9700\u8981\u82b1\u8d39\u5f88\u957f\u7684\u65f6\u95f4\u548c\u7cbe\u529b\u4e86\u89e3\u6216\u8005\u638c\u63e1\u5b83\u4eec\uff0c\u5e76\u4e14\u771f\u6b63\u7684\u670d\n\u52a1\u4e8e\u5f53\u524d\u7684\u9879\u76ee\u4e2d\u3002\n\n\u800c\u4e3a\u4e86\u4fdd\u8bc1\u4ee3\u7801\u8d28\u91cf\u4ee5\u53ca\u9879\u76ee\u7684\u5b8c\u6574\u6027\uff0c\u6211\u4eec\u5f80\u5f80\u662f\u9700\u8981\u505a\u8fd9\u4e9b\u4e0e\u4ee3\u7801\u903b\u8f91\u5b9e\u73b0\u65e0\u5173\u7684\u4e8b\u60c5\u3002\u7136\u800c\u8fd9\u4e9b\u4e8b\u60c5\u5f88\u6709\u53ef\u80fd\u4f1a\u5f71\u54cd\u6574\u4f53\u7684\u9879\u76ee\u5f00\u53d1\u8fdb\u5ea6\uff0c\u964d\u4f4e\u5f00\u53d1\u8005\u7684\u5f00\u53d1\u4f53\u9a8c\uff0c\u4f1a\u8ba9\u5f00\u53d1\u8005\n\u611f\u89c9\u6a21\u5757\u9879\u76ee\u7684\u5f00\u53d1\u95e8\u69db\u5f88\u9ad8\u3002\n\n\u5982\u679c\u8bf4\u6bcf\u6b21\u5f00\u53d1\u4e00\u4e2a\u6a21\u5757\u7c7b\u578b\u7684\u9879\u76ee\u90fd\u9700\u8981\u7ecf\u5386\u4e00\u904d\u8fd9\u4e9b\u5de5\u4f5c\u51c6\u5907\u7684\u8bdd\uff0c\u90a3\u4e48\u57fa\u672c\u4e0a\u521a\u5f00\u59cb\u5f00\u53d1\u7684\u65f6\u95f4\u4f1a\u5927\u90e8\u5206\u82b1\u8d39\u5728\u8fd9\u4e9b\u4e0e\u4ee3\u7801\u5b9e\u73b0\u65e0\u5173\u7684\u4e8b\u60c5\u4e0a\u3002\u5982\u679c\u80fd\u591f\u63d0\u4f9b\u4e00\u4e2a\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\n\u65b9\u6848\uff0c\u5b83\u80fd\u591f\u5e2e\u52a9\u5f00\u53d1\u8005\u89e3\u51b3\u9879\u76ee\u5de5\u7a0b\u4e0a\u7684\u4e8b\u60c5\uff0c\u8ba9\u5f00\u53d1\u8005\u53ef\u4ee5\u66f4\u4e13\u6ce8\u4e8e\u4ee3\u7801\u7684\u5b9e\u73b0\u4e0a\uff0c\u90a3\u4e48\u8fd9\u5c06\u4f1a\u5927\u5927\u63d0\u5347\u6a21\u5757\u7c7b\u578b\u9879\u76ee\u7684\u5f00\u53d1\u4f53\u9a8c\u3002\n\n\n\nModern.js \u4e3a\u4e86\u8ba9\u5f00\u53d1\u6a21\u5757\u7c7b\u578b\u7684\u9879\u76ee\u66f4\u7b80\u5355\uff0c\u4e3a\u4e86\u89e3\u51b3\u4e0a\u8ff0\u63d0\u5230\u7684\u95ee\u9898\u63d0\u4f9b\u4e86\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848\uff0c\u5e76\u4e14\u4f7f\u7528 Module Tools\n\u63d0\u4f9b\u4e86\u4e3b\u8981\u7684\u529f\u80fd\u3002Module-tools \u53ef\u4ee5\u7406\u89e3\u4e3a\u662f\u4e00\u4e2a\u4e13\u95e8\u7528\u4e8e\u6a21\u5757\u7c7b\u578b\u9879\u76ee\u5f00\u53d1\u7684\u5de5\u5177\u3002",frontmatter:{sidebar_position:2}},{id:55,title:"index",routePath:"/module-tools/",toc:[],content:"INDEX",frontmatter:{pageType:"home",hero:{name:"Module Tools",text:"\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848",tagline:"\u7b80\u5355\u3001\u5f3a\u5927\u3001\u9ad8\u6027\u80fd\u7684\u73b0\u4ee3\u5316npm\u5305\u5f00\u53d1\u65b9\u6848",actions:[{theme:"brand",text:"\u6b22\u8fce\u4f7f\u7528",link:"/guide/intro/welcome"}]},features:[{title:"Esbuild: \u9ad8\u6027\u80fd\u7684JS Bundler",details:"\u57fa\u4e8e Esbuild \u6784\u5efa\uff0c\u6784\u5efa\u901f\u5ea6\u6781\u5feb\uff0c\u5e26\u7ed9\u4f60\u6781\u81f4\u7684\u5f00\u53d1\u4f53\u9a8c\u3002",icon:"\ud83d\ude80"},{title:"Storybook: \u793e\u533a\u6d41\u884c\u7684UI\u5f00\u53d1\u5de5\u5177",details:"\u96c6\u6210\u4e86Storybook\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528\u5b83\u8c03\u8bd5UI\u3002",icon:"\ud83d\udce6"},{title:"transform + bundle",details:"\u652f\u6301bundle\u548cbundleless\u4e24\u79cd\u6784\u5efa\u6a21\u5f0f\u3002",icon:"\u2728"},{title:"\u96f6\u914d\u7f6e",details:"\u65e0\u9700\u4efb\u4f55\u914d\u7f6e\u5373\u53ef\u5f00\u53d1\u4f60\u7684npm\u5305\uff0c\u5185\u7f6e\u9884\u8bbe\u8986\u76d6\u591a\u79cd\u573a\u666f\u3002",icon:"\ud83d\udee0\ufe0f"},{title:"\u6269\u5c55\u6027\u5f3a: \u63d0\u4f9b\u5f3a\u5927\u7684\u63d2\u4ef6\u673a\u5236",details:"\u901a\u8fc7\u5176\u63d2\u4ef6\u6269\u5c55\u673a\u5236\uff0c\u4f60\u53ef\u4ee5\u8f7b\u677e\u7684\u6269\u5c55Module tools\u7684\u5404\u9879\u80fd\u529b\u3002",icon:"\ud83c\udfa8"}]}},{id:56,title:"\u5feb\u901f\u5f00\u59cb",routePath:"/module-tools/plugins/guide/getting-started",toc:[],content:"\u5feb\u901f\u5f00\u59cb\n\n\u6a21\u5757\u5de5\u7a0b\u89e3\u51b3\u65b9\u6848\u4e0d\u4ec5\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u529f\u80fd\uff0c\u540c\u65f6\u4e5f\u652f\u6301\u901a\u8fc7\u63d2\u4ef6\u7684\u65b9\u5f0f\u4e3a\u5f53\u524d\u9879\u76ee\u6269\u5c55\u80fd\u529b\u3002\n\n\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u7684\u4f8b\u5b50\u6765\u5feb\u901f\u4e86\u89e3\u5982\u679c\u7f16\u5199\u4e00\u4e2a module-tools \u63d2\u4ef6\uff1a\n\n<CH.Spotlight>\n\n./\n\u251c\u2500\u2500 plugins\n\u2502 \u2514\u2500\u2500 example.ts\n\u251c\u2500\u2500 src/\n\u2514\u2500\u2500 modern.config.ts\n\n\n--------------------------------------------------------------------------------\n\n\u9996\u5148\u6211\u4eec\u5728\u521d\u59cb\u5316\u7684\u9879\u76ee\u4e0b\u521b\u5efa ./plugins/example.ts \u6587\u4ef6\u3002\n\n\n\n--------------------------------------------------------------------------------\n\n\u63a5\u7740\u5728 example.ts \u6587\u4ef6\u4e2d\u589e\u52a0\u63d2\u4ef6\u7684\u4ee3\u7801\u3002\n\n\n\nexport const ExamplePlugin = (): CliPlugin<ModuleTools> => {\n  return {\n    name: 'example',\n    setup() {\n      console.info('this is example plugin');\n      return {\n        // use hooks\n        afterBuild() {\n          console.info('build over');\n        }\n      };\n    };\n  };\n};\n\n\n--------------------------------------------------------------------------------\n\n\u7136\u540e\u6211\u4eec\u901a\u8fc7 plugins API\uff0c\u5c06\u521a\u521a\u5199\u597d\u7684\u63d2\u4ef6\u8fdb\u884c\u6ce8\u518c\u3002\n\n\nexport default defineConfig({\n  plugins: [examplePlugin()],\n});\n\n\n--------------------------------------------------------------------------------\n\n\u6700\u540e\u8fd0\u884c modern build\uff0c\u5c31\u53ef\u4ee5\u770b\u5230\u3002\n\nthis is example plugin\nBuild succeed: 510.684ms\nbuild over\n\n\n</CH.Spotlight>\n\n\u901a\u8fc7\u4e0a\u9762\u8fd9\u4e2a\u4f8b\u5b50\uff0c\u6211\u4eec\u4e86\u89e3\u5230\u4e86\u4e0b\u9762\u51e0\u4ef6\u4e8b\uff1a\n\n * \u63a8\u8350\u7684\u63d2\u4ef6\u76ee\u5f55\u7ed3\u6784\n * \u63d2\u4ef6\u7684\u521d\u59cb\u5316\u4ee3\u7801\n * \u63d2\u4ef6\u7684\u6ce8\u518c\n\n\u9664\u4e86\u4ee5\u4e0a\u5185\u5bb9\u4ee5\u5916\uff0c\u6211\u4eec\u8fd8\u9700\u8981\u4e86\u89e3\uff1a\n\n * \u63d2\u4ef6\u5bf9\u8c61\u3001\u7c7b\u578b\u5b9a\u4e49\u4e0e\u63a8\u8350\u914d\u7f6e\u9879\n * setup \u51fd\u6570\u3001api \u5bf9\u8c61\u53c2\u6570\u3001\u751f\u547d\u5468\u671f\u94a9\u5b50",frontmatter:{sidebar_position:1}},{id:57,title:"\u63d2\u4ef6\u5bf9\u8c61",routePath:"/module-tools/plugins/guide/plugin-object",toc:[{id:"\u63d2\u4ef6\u7c7b\u578b\u5b9a\u4e49-1",text:"\u63d2\u4ef6\u7c7b\u578b\u5b9a\u4e49",depth:2},{id:"\u63d2\u4ef6\u914d\u7f6e\u9879-1",text:"\u63d2\u4ef6\u914d\u7f6e\u9879",depth:2}],content:"\u63d2\u4ef6\u5bf9\u8c61\n\nModule-tools \u63d2\u4ef6\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5bf9\u8c61\u5305\u542b\u4ee5\u4e0b\u5c5e\u6027\uff1a\n\n * name\uff1a\u63d2\u4ef6\u7684\u540d\u79f0\uff0c\u552f\u4e00\u6807\u8bc6\u7b26\u3002\n * setup\uff1a\u63d2\u4ef6\u521d\u59cb\u5316\u51fd\u6570\uff0c\u53ea\u4f1a\u6267\u884c\u4e00\u6b21\u3002setup \u51fd\u6570\u53ef\u4ee5\u8fd4\u56de\u4e00\u4e2a Hooks \u5bf9\u8c61\uff0cmodule-tools \u4f1a\u5728\u7279\u5b9a\u7684\u65f6\u673a\u6267\u884c Hooks\n   \u5bf9\u8c61\u4e0a\u5b9a\u4e49\u7684 Hook \u5bf9\u5e94\u7684\u51fd\u6570\u3002\n\n\u4f8b\u5982\u5728\u4e0b\u9762\u7684\u63d2\u4ef6\u4ee3\u7801\u793a\u4f8b\u4e2d\uff0c\u5728\u9879\u76ee\u5f00\u59cb\u6267\u884c\u6784\u5efa\u4efb\u52a1\u4e4b\u524d\u4f1a\u89e6\u53d1 beforeBuild \u51fd\u6570\u7684\u6267\u884c\uff0c\u5e76\u6253\u5370 build start \u7684 log \u5185\u5bb9\u3002\n\n<CH.Code>\n\n\n\nconst myPlugin: CliPlugin<ModuleTools> = {\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      // this is hook\n      beforeBuild: () => {\n        console.info('build start');\n      },\n    };\n  },\n};\n\n\n--------------------------------------------------------------------------------\n\n\nexport default {\n  plugins: [myPlugin()],\n};\n\n\n</CH.Code>\n\n\n\u63d2\u4ef6\u7c7b\u578b\u5b9a\u4e49\n\n\u4f7f\u7528 TypeScript \u65f6\uff0c\u53ef\u4ee5\u5f15\u5165\u5185\u7f6e\u7684 CliPlugin \u548c ModuleTools \u7c7b\u578b\uff0c\u4e3a\u63d2\u4ef6\u63d0\u4f9b\u6b63\u786e\u7684\u7c7b\u578b\u63a8\u5bfc\uff1a\n\n\n\nconst myPlugin: CliPlugin<ModuleTools> = {\n  name: 'my-plugin',\n\n  setup() {\n    const foo = '1';\n\n    return {\n      // this is hook\n      afterBuild: () => {\n        //...\n      },\n    };\n  },\n};\n\n\n\n\u63d2\u4ef6\u914d\u7f6e\u9879\n\n\u5efa\u8bae\u5c06\u63d2\u4ef6\u5199\u6210\u51fd\u6570\u7684\u5f62\u5f0f\uff0c\u4f7f\u63d2\u4ef6\u80fd\u901a\u8fc7\u51fd\u6570\u5165\u53c2\u6765\u63a5\u6536\u914d\u7f6e\u9879\uff1a\n\n\n\ntype MyPluginOptions = {\n  foo: string;\n};\n\nconst myPlugin = (options: MyPluginOptions): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    console.log(options.foo);\n  },\n});\n",frontmatter:{sidebar_position:2}},{id:58,title:"Setup \u51fd\u6570",routePath:"/module-tools/plugins/guide/setup-function",toc:[{id:"\u63d2\u4ef6-api-\u5bf9\u8c61-1",text:"\u63d2\u4ef6 API \u5bf9\u8c61",depth:2},{id:"apiuseappcontext-2",text:"api.useAppContext",depth:3},{id:"apiuseresolvedconfigcontext-2",text:"api.useResolvedConfigContext",depth:3},{id:"apiusehookrunners-2",text:"api.useHookRunners",depth:3},{id:"\u5f02\u6b65-setup-1",text:"\u5f02\u6b65 setup",depth:2},{id:"\u751f\u547d\u5468\u671f\u94a9\u5b50-1",text:"\u751f\u547d\u5468\u671f\u94a9\u5b50",depth:2}],content:"SETUP \u51fd\u6570\n\n\u5728\u3010\u63d2\u4ef6\u5bf9\u8c61\u3011 \u90e8\u5206\u6211\u4eec\u77e5\u9053\u63d2\u4ef6\u5bf9\u8c61\u5305\u542b\u4e86\u4e00\u4e2a setup \u51fd\u6570\uff0c\u8be5\u51fd\u6570\u4e0d\u4ec5\u5305\u542b\u4e86\u4e00\u4e2a api \u5bf9\u8c61\u53c2\u6570\uff0c\u540c\u65f6\u8fd8\u53ef\u4ee5\u8fd4\u56de\u4e00\u4e2a Hooks \u5bf9\u8c61\u3002\n\n\n\u63d2\u4ef6 API \u5bf9\u8c61\n\n\u63d2\u4ef6\u7684 setup \u51fd\u6570\u4f1a\u63d0\u4f9b\u4e00\u4e2a api \u5bf9\u8c61\u53c2\u6570\uff0c\u4f60\u53ef\u4ee5\u8c03\u7528\u8be5\u5bf9\u8c61\u4e0a\u63d0\u4f9b\u7684\u4e00\u4e9b\u65b9\u6cd5\u6765\u83b7\u53d6\u5230\u914d\u7f6e\u3001\u9879\u76ee\u4e0a\u4e0b\u6587\u7b49\u4fe1\u606f\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup(api) {\n    // \u83b7\u53d6\u5e94\u7528\u539f\u59cb\u914d\u7f6e\n    const config = api.useConfigContext();\n    // \u83b7\u53d6\u5e94\u7528\u8fd0\u884c\u4e0a\u4e0b\u6587\n    const appContext = api.useAppContext();\n    // \u83b7\u53d6\u89e3\u6790\u4e4b\u540e\u7684\u6700\u7ec8\u914d\u7f6e\n    const resolvedConfig = api.useResolvedConfigContext();\n  },\n});\n\n\n\nAPI.USEAPPCONTEXT\n\n\u7528\u4e8e\u83b7\u53d6\u9879\u76ee\u4e0a\u4e0b\u6587\u4fe1\u606f\u3002\n\nconst useAppContext: () => IAppContext;\n\ninterface IAppContext {\n  appDirectory: string;\n  configFile: string | false;\n  packageName: string;\n  nodeModulesDirectory: string;\n  internalDirectory: string;\n  plugins: {\n    cli?: any;\n    server?: any;\n  }[];\n}\n\n\n\u901a\u8fc7\u5b9e\u9645\u7684\u7c7b\u578b\u6587\u4ef6\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u8fd8\u5b58\u5728\u7740\u5176\u4ed6\u7684\u5b57\u6bb5\uff0c\u4e0d\u8fc7\u76ee\u524d\u5bf9\u4e8e\u6a21\u5757\u5de5\u7a0b\u6709\u610f\u4e49\u7684\u5b57\u6bb5\u53ea\u6709\u4ee5\u4e0a\u5185\u5bb9\u3002api \u5bf9\u8c61\u5176\u4ed6\u7684\u65b9\u6cd5\u4e5f\u662f\u5982\u6b64\u3002\n\n\nAPI.USERESOLVEDCONFIGCONTEXT\n\n\u7528\u4e8e\u83b7\u53d6\u89e3\u6790\u4e4b\u540e\u7684\u6700\u7ec8\u914d\u7f6e\u3002\n\n\u5982\u679c\u9700\u8981\u83b7\u53d6\u6784\u5efa\u76f8\u5173\u7684\u6700\u7ec8\u914d\u7f6e\uff0c\u9700\u8981\u4f7f\u7528 beforeBuild Hook\u3002\n\nconst useResolvedConfigContext: () => NormalizedConfig;\n\ninterface NormalizedConfig {\n  buildConfig: PartialBuildConfig;\n  buildPreset: BuildPreset;\n  designSystem?: Record<string, any>;\n  dev: Dev;\n  plugins: PluginConfig;\n  runtime: RuntimeConfig;\n  runtimeByEntries?: RuntimeByEntriesConfig;\n  _raw: UserConfig;\n}\n\n\n\nAPI.USEHOOKRUNNERS\n\n\u7528\u4e8e\u83b7\u53d6 Hooks \u7684\u6267\u884c\u5668\uff0c\u5e76\u89e6\u53d1\u7279\u5b9a\u7684 Hook \u6267\u884c\u3002\n\n\n\nexport default (): CliPlugin => ({\n  name: 'my-plugin',\n\n  async setup(api) {\n    const hookRunners = api.useHookRunners();\n    // \u89e6\u53d1 afterBuild Hook\n    await hookRunners.afterBuild();\n  },\n});\n\n\n\n\u5f02\u6b65 SETUP\n\nCLI \u63d2\u4ef6\u7684 setup \u53ef\u4ee5\u662f\u4e00\u4e2a\u5f02\u6b65\u51fd\u6570\uff0c\u5728\u521d\u59cb\u5316\u8fc7\u7a0b\u4e2d\u6267\u884c\u5f02\u6b65\u903b\u8f91\u3002\n\nexport default (): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  async setup(api) {\n    await doSomething();\n  },\n});\n\n\n\n\u751f\u547d\u5468\u671f\u94a9\u5b50\n\n\u6211\u4eec\u77e5\u9053 setup \u51fd\u6570\u4f1a\u8fd4\u56de\u4e00\u4e2a Hooks \u5bf9\u8c61\uff0c\u6240\u8c13 Hooks \u5bf9\u8c61\u4e5f\u53ef\u4ee5\u7406\u89e3\u662f\u5177\u6709 module-tools \u751f\u547d\u5468\u671f\u94a9\u5b50\u7684\u5bf9\u8c61\u3002\n\n\u76ee\u524d\u4e3b\u8981\u5305\u542b\u4e24\u7c7b\u94a9\u5b50\uff1a\n\n * \u6784\u5efa\u94a9\u5b50\uff1a\u4ec5\u5728\u6267\u884c build \u547d\u4ee4\u6784\u5efa\u6e90\u7801\u4ea7\u7269\u65f6\u89e6\u53d1\u3002\n * buildPlatform \u94a9\u5b50\uff1a\u4ec5\u5728\u6267\u884c build --platform \u547d\u4ee4\u751f\u6210\u5176\u4ed6\u6784\u5efa\u4ea7\u7269\u65f6\u89e6\u53d1\u3002\n * \u8c03\u8bd5\u94a9\u5b50\uff1a\u8fd0\u884c dev \u547d\u4ee4\u65f6\u4f1a\u89e6\u53d1\u7684\u94a9\u5b50\u3002\n\n\u5173\u4e8e\u751f\u547d\u5468\u671f\u94a9\u5b50\u7684\u5b8c\u6574\u5217\u8868\u53c2\u8003 API \u6587\u6863\u3002",frontmatter:{sidebar_position:3}},{id:59,title:"\u603b\u89c8",routePath:"/module-tools/plugins/official-list/overview",toc:[{id:"\u5b98\u65b9\u63d2\u4ef6-1",text:"\u5b98\u65b9\u63d2\u4ef6",depth:2}],content:"\u603b\u89c8\n\n\n\u5b98\u65b9\u63d2\u4ef6\n\n\uff08\u5efa\u8bbe\u4e2d\uff09",frontmatter:{}}]}},63610:function(n,e,t){"use strict";t.d(e,{_:function(){return cn}});var o=t(52983),i=t(19515);const s=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(5654)]).then(t.bind(t,79513)))),r=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(8782)]).then(t.bind(t,44640)))),a=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(9220)]).then(t.bind(t,26950)))),d=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(2097)]).then(t.bind(t,6697)))),l=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(2556)]).then(t.bind(t,61363)))),u=(0,i.kz)((()=>t.e(1085).then(t.bind(t,32994)))),p=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(1677)]).then(t.bind(t,42874)))),c=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(8230)]).then(t.bind(t,3227)))),m=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(4663)]).then(t.bind(t,58785)))),f=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(5057)]).then(t.bind(t,50333)))),h=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(4260)]).then(t.bind(t,94107)))),g=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(8927)]).then(t.bind(t,14489)))),b=(0,i.kz)((()=>t.e(9826).then(t.bind(t,34793)))),y=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(6098)]).then(t.bind(t,5855)))),x=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(2678)]).then(t.bind(t,34208)))),w=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(7571)]).then(t.bind(t,53970)))),v=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(5578)]).then(t.bind(t,13355)))),S=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(3032)]).then(t.bind(t,70967)))),C=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(3741)]).then(t.bind(t,71423)))),T=(0,i.kz)((()=>t.e(2532).then(t.bind(t,84703)))),k=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(9675)]).then(t.bind(t,95070)))),P=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(7401)]).then(t.bind(t,49913)))),j=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(229)]).then(t.bind(t,99888)))),E=(0,i.kz)((()=>t.e(2033).then(t.bind(t,54122)))),I=(0,i.kz)((()=>t.e(7512).then(t.bind(t,79713)))),D=(0,i.kz)((()=>t.e(315).then(t.bind(t,4969)))),R=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(8687)]).then(t.bind(t,71841)))),O=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(5300)]).then(t.bind(t,36098)))),N=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(4749)]).then(t.bind(t,38209)))),M=(0,i.kz)((()=>t.e(9479).then(t.bind(t,90955)))),A=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(237)]).then(t.bind(t,69228)))),B=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(7241)]).then(t.bind(t,74991)))),U=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(4695)]).then(t.bind(t,9563)))),L=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(3806)]).then(t.bind(t,78156)))),H=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(421)]).then(t.bind(t,32454)))),_=(0,i.kz)((()=>t.e(1189).then(t.bind(t,31095)))),F=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(1178)]).then(t.bind(t,64950)))),G=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(5723)]).then(t.bind(t,46526)))),z=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(4837)]).then(t.bind(t,65310)))),W=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(2611)]).then(t.bind(t,58458)))),Y=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(5532)]).then(t.bind(t,52319)))),q=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(727)]).then(t.bind(t,26775)))),J=(0,i.kz)((()=>t.e(2540).then(t.bind(t,41834)))),V=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(1180)]).then(t.bind(t,86253)))),$=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(775)]).then(t.bind(t,93141)))),K=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(1756)]).then(t.bind(t,7765)))),X=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(2821)]).then(t.bind(t,43319)))),Q=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(2020)]).then(t.bind(t,21415)))),Z=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(5966)]).then(t.bind(t,83703)))),nn=(0,i.kz)((()=>t.e(7294).then(t.bind(t,20778)))),en=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(5107)]).then(t.bind(t,75468)))),tn=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(2013)]).then(t.bind(t,42600)))),on=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(2633)]).then(t.bind(t,94255)))),sn=(0,i.kz)((()=>t.e(2034).then(t.bind(t,18190)))),rn=(0,i.kz)((()=>t.e(1108).then(t.bind(t,63197)))),an=(0,i.kz)((()=>t.e(1895).then(t.bind(t,20548)))),dn=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(9868)]).then(t.bind(t,94644)))),ln=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(5284)]).then(t.bind(t,75511)))),un=(0,i.kz)((()=>Promise.all([t.e(3799),t.e(2892)]).then(t.bind(t,14568)))),pn=(0,i.kz)((()=>t.e(4390).then(t.bind(t,2423)))),cn=[{path:"/module-tools/en/api/config/build-config",element:o.createElement(s),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/api/config/build-config.md",preload:async()=>(await s.preload(),Promise.all([t.e(3799),t.e(5654)]).then(t.bind(t,79513)))},{path:"/module-tools/en/api/config/build-preset",element:o.createElement(r),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/api/config/build-preset.md",preload:async()=>(await r.preload(),Promise.all([t.e(3799),t.e(8782)]).then(t.bind(t,44640)))},{path:"/module-tools/en/api/config/design-system",element:o.createElement(a),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/api/config/design-system.md",preload:async()=>(await a.preload(),Promise.all([t.e(3799),t.e(9220)]).then(t.bind(t,26950)))},{path:"/module-tools/en/api/config/plugins",element:o.createElement(d),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/api/config/plugins.md",preload:async()=>(await d.preload(),Promise.all([t.e(3799),t.e(2097)]).then(t.bind(t,6697)))},{path:"/module-tools/en/api/config/testing",element:o.createElement(l),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/api/config/testing.md",preload:async()=>(await l.preload(),Promise.all([t.e(3799),t.e(2556)]).then(t.bind(t,61363)))},{path:"/module-tools/en/api/",element:o.createElement(u),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/api/index.md",preload:async()=>(await u.preload(),t.e(1085).then(t.bind(t,32994)))},{path:"/module-tools/en/api/plugin-api/plugin-hooks",element:o.createElement(p),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/api/plugin-api/plugin-hooks.md",preload:async()=>(await p.preload(),Promise.all([t.e(3799),t.e(1677)]).then(t.bind(t,42874)))},{path:"/module-tools/en/guide/advance/asset",element:o.createElement(c),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/advance/asset.mdx",preload:async()=>(await c.preload(),Promise.all([t.e(3799),t.e(8230)]).then(t.bind(t,3227)))},{path:"/module-tools/en/guide/advance/build-umd",element:o.createElement(m),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/advance/build-umd.mdx",preload:async()=>(await m.preload(),Promise.all([t.e(3799),t.e(4663)]).then(t.bind(t,58785)))},{path:"/module-tools/en/guide/advance/copy",element:o.createElement(f),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/advance/copy.md",preload:async()=>(await f.preload(),Promise.all([t.e(3799),t.e(5057)]).then(t.bind(t,50333)))},{path:"/module-tools/en/guide/advance/external-dependency",element:o.createElement(h),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/advance/external-dependency.mdx",preload:async()=>(await h.preload(),Promise.all([t.e(3799),t.e(4260)]).then(t.bind(t,94107)))},{path:"/module-tools/en/guide/advance/in-depth-about-build",element:o.createElement(g),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/advance/in-depth-about-build.md",preload:async()=>(await g.preload(),Promise.all([t.e(3799),t.e(8927)]).then(t.bind(t,14489)))},{path:"/module-tools/en/guide/advance/in-depth-about-dev-command",element:o.createElement(b),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/advance/in-depth-about-dev-command.md",preload:async()=>(await b.preload(),t.e(9826).then(t.bind(t,34793)))},{path:"/module-tools/en/guide/advance/theme-config",element:o.createElement(y),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/advance/theme-config.mdx",preload:async()=>(await y.preload(),Promise.all([t.e(3799),t.e(6098)]).then(t.bind(t,5855)))},{path:"/module-tools/en/guide/basic/before-getting-started",element:o.createElement(x),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/before-getting-started.md",preload:async()=>(await x.preload(),Promise.all([t.e(3799),t.e(2678)]).then(t.bind(t,34208)))},{path:"/module-tools/en/guide/basic/command-preview",element:o.createElement(w),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/command-preview.md",preload:async()=>(await w.preload(),Promise.all([t.e(3799),t.e(7571)]).then(t.bind(t,53970)))},{path:"/module-tools/en/guide/basic/modify-output-product",element:o.createElement(v),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/modify-output-product.md",preload:async()=>(await v.preload(),Promise.all([t.e(3799),t.e(5578)]).then(t.bind(t,13355)))},{path:"/module-tools/en/guide/basic/publish-your-project",element:o.createElement(S),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/publish-your-project.md",preload:async()=>(await S.preload(),Promise.all([t.e(3799),t.e(3032)]).then(t.bind(t,70967)))},{path:"/module-tools/en/guide/basic/test-your-project",element:o.createElement(C),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/test-your-project.mdx",preload:async()=>(await C.preload(),Promise.all([t.e(3799),t.e(3741)]).then(t.bind(t,71423)))},{path:"/module-tools/en/guide/basic/use-micro-generator",element:o.createElement(T),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/use-micro-generator.md",preload:async()=>(await T.preload(),t.e(2532).then(t.bind(t,84703)))},{path:"/module-tools/en/guide/basic/using-storybook",element:o.createElement(k),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/using-storybook.mdx",preload:async()=>(await k.preload(),Promise.all([t.e(3799),t.e(9675)]).then(t.bind(t,95070)))},{path:"/module-tools/en/guide/best-practices/components",element:o.createElement(P),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/best-practices/components.mdx",preload:async()=>(await P.preload(),Promise.all([t.e(3799),t.e(7401)]).then(t.bind(t,49913)))},{path:"/module-tools/en/guide/intro/getting-started",element:o.createElement(j),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/intro/getting-started.md",preload:async()=>(await j.preload(),Promise.all([t.e(3799),t.e(229)]).then(t.bind(t,99888)))},{path:"/module-tools/en/guide/intro/welcome",element:o.createElement(E),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/intro/welcome.md",preload:async()=>(await E.preload(),t.e(2033).then(t.bind(t,54122)))},{path:"/module-tools/en/guide/intro/why-module-engineering-solution",element:o.createElement(I),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/intro/why-module-engineering-solution.md",preload:async()=>(await I.preload(),t.e(7512).then(t.bind(t,79713)))},{path:"/module-tools/en/",element:o.createElement(D),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/index.md",preload:async()=>(await D.preload(),t.e(315).then(t.bind(t,4969)))},{path:"/module-tools/en/plugins/guide/getting-started",element:o.createElement(R),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/plugins/guide/getting-started.mdx",preload:async()=>(await R.preload(),Promise.all([t.e(3799),t.e(8687)]).then(t.bind(t,71841)))},{path:"/module-tools/en/plugins/guide/plugin-object",element:o.createElement(O),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/plugins/guide/plugin-object.mdx",preload:async()=>(await O.preload(),Promise.all([t.e(3799),t.e(5300)]).then(t.bind(t,36098)))},{path:"/module-tools/en/plugins/guide/setup-function",element:o.createElement(N),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/plugins/guide/setup-function.mdx",preload:async()=>(await N.preload(),Promise.all([t.e(3799),t.e(4749)]).then(t.bind(t,38209)))},{path:"/module-tools/en/plugins/official-list/overview",element:o.createElement(M),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/en/plugins/official-list/overview.md",preload:async()=>(await M.preload(),t.e(9479).then(t.bind(t,90955)))},{path:"/module-tools/api/config/build-config",element:o.createElement(A),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/api/config/build-config.md",preload:async()=>(await A.preload(),Promise.all([t.e(3799),t.e(237)]).then(t.bind(t,69228)))},{path:"/module-tools/api/config/build-preset",element:o.createElement(B),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/api/config/build-preset.md",preload:async()=>(await B.preload(),Promise.all([t.e(3799),t.e(7241)]).then(t.bind(t,74991)))},{path:"/module-tools/api/config/design-system",element:o.createElement(U),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/api/config/design-system.md",preload:async()=>(await U.preload(),Promise.all([t.e(3799),t.e(4695)]).then(t.bind(t,9563)))},{path:"/module-tools/api/config/plugins",element:o.createElement(L),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/api/config/plugins.md",preload:async()=>(await L.preload(),Promise.all([t.e(3799),t.e(3806)]).then(t.bind(t,78156)))},{path:"/module-tools/api/config/testing",element:o.createElement(H),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/api/config/testing.md",preload:async()=>(await H.preload(),Promise.all([t.e(3799),t.e(421)]).then(t.bind(t,32454)))},{path:"/module-tools/api/",element:o.createElement(_),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/api/index.md",preload:async()=>(await _.preload(),t.e(1189).then(t.bind(t,31095)))},{path:"/module-tools/api/plugin-api/plugin-hooks",element:o.createElement(F),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/api/plugin-api/plugin-hooks.md",preload:async()=>(await F.preload(),Promise.all([t.e(3799),t.e(1178)]).then(t.bind(t,64950)))},{path:"/module-tools/guide/advance/asset",element:o.createElement(G),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/advance/asset.mdx",preload:async()=>(await G.preload(),Promise.all([t.e(3799),t.e(5723)]).then(t.bind(t,46526)))},{path:"/module-tools/guide/advance/build-umd",element:o.createElement(z),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/advance/build-umd.mdx",preload:async()=>(await z.preload(),Promise.all([t.e(3799),t.e(4837)]).then(t.bind(t,65310)))},{path:"/module-tools/guide/advance/copy",element:o.createElement(W),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/advance/copy.md",preload:async()=>(await W.preload(),Promise.all([t.e(3799),t.e(2611)]).then(t.bind(t,58458)))},{path:"/module-tools/guide/advance/external-dependency",element:o.createElement(Y),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/advance/external-dependency.mdx",preload:async()=>(await Y.preload(),Promise.all([t.e(3799),t.e(5532)]).then(t.bind(t,52319)))},{path:"/module-tools/guide/advance/in-depth-about-build",element:o.createElement(q),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/advance/in-depth-about-build.md",preload:async()=>(await q.preload(),Promise.all([t.e(3799),t.e(727)]).then(t.bind(t,26775)))},{path:"/module-tools/guide/advance/in-depth-about-dev-command",element:o.createElement(J),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/advance/in-depth-about-dev-command.md",preload:async()=>(await J.preload(),t.e(2540).then(t.bind(t,41834)))},{path:"/module-tools/guide/advance/theme-config",element:o.createElement(V),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/advance/theme-config.mdx",preload:async()=>(await V.preload(),Promise.all([t.e(3799),t.e(1180)]).then(t.bind(t,86253)))},{path:"/module-tools/guide/basic/before-getting-started",element:o.createElement($),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/basic/before-getting-started.md",preload:async()=>(await $.preload(),Promise.all([t.e(3799),t.e(775)]).then(t.bind(t,93141)))},{path:"/module-tools/guide/basic/command-preview",element:o.createElement(K),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/basic/command-preview.md",preload:async()=>(await K.preload(),Promise.all([t.e(3799),t.e(1756)]).then(t.bind(t,7765)))},{path:"/module-tools/guide/basic/modify-output-product",element:o.createElement(X),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/basic/modify-output-product.md",preload:async()=>(await X.preload(),Promise.all([t.e(3799),t.e(2821)]).then(t.bind(t,43319)))},{path:"/module-tools/guide/basic/publish-your-project",element:o.createElement(Q),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/basic/publish-your-project.md",preload:async()=>(await Q.preload(),Promise.all([t.e(3799),t.e(2020)]).then(t.bind(t,21415)))},{path:"/module-tools/guide/basic/test-your-project",element:o.createElement(Z),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/basic/test-your-project.mdx",preload:async()=>(await Z.preload(),Promise.all([t.e(3799),t.e(5966)]).then(t.bind(t,83703)))},{path:"/module-tools/guide/basic/use-micro-generator",element:o.createElement(nn),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/basic/use-micro-generator.md",preload:async()=>(await nn.preload(),t.e(7294).then(t.bind(t,20778)))},{path:"/module-tools/guide/basic/using-storybook",element:o.createElement(en),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/basic/using-storybook.mdx",preload:async()=>(await en.preload(),Promise.all([t.e(3799),t.e(5107)]).then(t.bind(t,75468)))},{path:"/module-tools/guide/best-practices/components",element:o.createElement(tn),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/best-practices/components.mdx",preload:async()=>(await tn.preload(),Promise.all([t.e(3799),t.e(2013)]).then(t.bind(t,42600)))},{path:"/module-tools/guide/intro/getting-started",element:o.createElement(on),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/intro/getting-started.md",preload:async()=>(await on.preload(),Promise.all([t.e(3799),t.e(2633)]).then(t.bind(t,94255)))},{path:"/module-tools/guide/intro/welcome",element:o.createElement(sn),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/intro/welcome.md",preload:async()=>(await sn.preload(),t.e(2034).then(t.bind(t,18190)))},{path:"/module-tools/guide/intro/why-module-engineering-solution",element:o.createElement(rn),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/intro/why-module-engineering-solution.md",preload:async()=>(await rn.preload(),t.e(1108).then(t.bind(t,63197)))},{path:"/module-tools/",element:o.createElement(an),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/index.md",preload:async()=>(await an.preload(),t.e(1895).then(t.bind(t,20548)))},{path:"/module-tools/plugins/guide/getting-started",element:o.createElement(dn),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/plugins/guide/getting-started.mdx",preload:async()=>(await dn.preload(),Promise.all([t.e(3799),t.e(9868)]).then(t.bind(t,94644)))},{path:"/module-tools/plugins/guide/plugin-object",element:o.createElement(ln),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/plugins/guide/plugin-object.mdx",preload:async()=>(await ln.preload(),Promise.all([t.e(3799),t.e(5284)]).then(t.bind(t,75511)))},{path:"/module-tools/plugins/guide/setup-function",element:o.createElement(un),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/plugins/guide/setup-function.mdx",preload:async()=>(await un.preload(),Promise.all([t.e(3799),t.e(2892)]).then(t.bind(t,14568)))},{path:"/module-tools/plugins/official-list/overview",element:o.createElement(pn),filePath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/plugins/official-list/overview.md",preload:async()=>(await pn.preload(),t.e(4390).then(t.bind(t,2423)))}]}}]);