1035-ba18a863a0006bd31e42.js

(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[1035],{41035:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>h});var a=t(73450),s=t(27378),o=t(57318),r=t(24246);function c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function p(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){(0,a.Z)(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function i(e){return(0,r.jsx)(e.tag,p(p({},e.attributes),{},{dangerouslySetInnerHTML:{__html:e.html}}))}function l(e){return(0,r.jsx)(i,{tag:"section",html:e.html,attributes:{className:"zandoc-react-markdown"}})}function u(e){return(0,r.jsx)(i,{tag:"style",html:e.style})}function d(e,n){for(;e;)return e.offsetTop&&"static"!==getComputedStyle(e).position&&(n+=e.offsetTop),d(e.parentNode,n);return n}class h extends s.Component{componentDidMount(){var e=location.hash;if(e){var n=document.querySelector('a[href="'.concat(e,'"]'));n&&(0,o.l)(document.documentElement,0,d(n,-9))}}render(){return s.createElement("div",{className:"zandoc-react-container"},s.createElement(u,{style:""}),s.createElement(l,{html:'<h2 class="anchor-heading"><a href="#babel-plugin-zent">¶</a><a href="javascript:void(0)" id="babel-plugin-zent" class="anchor-point"></a>babel-plugin-zent</h2>\n<p>Pay what you use for Zent.</p>\n<p>This plugin can reduce your bundle size by importing only the parts of zent you use in your project.</p>\n<h3 class="anchor-heading"><a href="#prerequisite">¶</a><a href="javascript:void(0)" id="prerequisite" class="anchor-point"></a>Prerequisite</h3>\n<p>This plugin requires Zent >= 3.0.0.</p>\n<h3 class="anchor-heading"><a href="#features">¶</a><a href="javascript:void(0)" id="features" class="anchor-point"></a>Features</h3>\n<ul>\n<li>Smaller bundle size</li>\n<li>Automatic component JavaScript import rewrite</li>\n<li>Automatically import styles for the components you use</li>\n</ul>\n<h3 class="anchor-heading"><a href="#usage">¶</a><a href="javascript:void(0)" id="usage" class="anchor-point"></a>Usage</h3>\n<p><code>yarn add babel-plugin-zent -D</code></p>\n<p>Configuration example:</p>\n<pre><code class="language-js"><span class="token comment">// In your .babelrc</span>\n<span class="token punctuation">{</span>\n  <span class="token string">"plugins"</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n    <span class="token punctuation">[</span><span class="token string">"zent"</span><span class="token punctuation">]</span>\n  <span class="token punctuation">]</span>\n<span class="token punctuation">}</span></code></pre>\n<p>In your component Javascript files, use zent like this: <code>import { Button, Dialog } from \'zent\'</code>, the plugin will take care of the rest.</p>\n<h3 class="anchor-heading"><a href="#options">¶</a><a href="javascript:void(0)" id="options" class="anchor-point"></a>Options</h3>\n<ul>\n<li><code>libraryName</code>: Library to transform</li>\n<li><code>noModuleRewrite</code>: disable JavaScript module import rewrite，use with bundle tool\'s tree-shaking feature.</li>\n<li><code>automaticStyleImport</code>: <code>true</code> to enable styles imports for component.</li>\n<li><code>useRawStyle</code>: should be used with <code>automaticStyleImport</code>, imports sass source files if set to <code>true</code>. <strong>Requires Zent >= 7.0.0</strong></li>\n</ul>\n<pre><code class="language-js"><span class="token comment">// defaults</span>\n<span class="token punctuation">{</span>\n  libraryName<span class="token operator">:</span> <span class="token string">\'zent\'</span><span class="token punctuation">,</span>\n  noModuleRewrite<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n  automaticStyleImport<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n  useRawStyle<span class="token operator">:</span> <span class="token boolean">false</span>\n<span class="token punctuation">}</span></code></pre>'}))}}}}]);