4-bc4eac5649ec72ccd951.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{672:function(n,e,a){"use strict";a.r(e),a.d(e,"default",function(){return E});var t=a(23),s=a.n(t),o=a(24),c=a.n(o),i=a(25),r=a.n(i),p=a(26),l=a.n(p),u=a(32),d=a.n(u),h=a(27),m=a.n(h),f=a(28),g=a.n(f),k=a(580),y=a.n(k),b=a(0),v=a.n(b),w=a(111);function z(n){return v.a.createElement(n.tag,y()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function S(n){return v.a.createElement(z,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function j(n){return v.a.createElement(z,{tag:"style",html:n.style})}b.Component;var E=function(n){function e(){return s()(this,e),r()(this,l()(e).apply(this,arguments))}return m()(e,n),c()(e,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var e=document.querySelector('a[href="'.concat(n,'"]'));e&&Object(w.a)(document.documentElement,0,function n(e,a){for(;e;)return e.offsetTop&&"static"!==getComputedStyle(e).position&&(a+=e.offsetTop),n(e.parentNode,a);return a}(e,-9))}}},{key:"render",value:function(){return v.a.createElement("div",{className:"zandoc-react-container",key:null},v.a.createElement(j,{style:""}),v.a.createElement(S,{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 punctuation">:</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 punctuation">:</span> <span class="token string">\'zent\'</span><span class="token punctuation">,</span>\n  noModuleRewrite<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n  automaticStyleImport<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n  useRawStyle<span class="token punctuation">:</span> <span class="token boolean">false</span>\n<span class="token punctuation">}</span></code></pre>'}))}}]),e}(b.Component)}}]);