5-bc4eac5649ec72ccd951.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{599:function(n,a,e){"use strict";e.r(a),e.d(a,"default",function(){return E});var t=e(23),s=e.n(t),o=e(24),c=e.n(o),p=e(25),i=e.n(p),l=e(26),r=e.n(l),u=e(32),d=e.n(u),h=e(27),m=e.n(h),f=e(28),g=e.n(f),k=e(580),y=e.n(k),b=e(0),v=e.n(b),z=e(111);function w(n){return v.a.createElement(n.tag,y()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function S(n){return v.a.createElement(w,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function j(n){return v.a.createElement(w,{tag:"style",html:n.style})}b.Component;var E=function(n){function a(){return s()(this,a),i()(this,r()(a).apply(this,arguments))}return m()(a,n),c()(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&Object(z.a)(document.documentElement,0,function n(a,e){for(;a;)return a.offsetTop&&"static"!==getComputedStyle(a).position&&(e+=a.offsetTop),n(a.parentNode,e);return e}(a,-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>这个插件通过自动化代码和样式的引入来帮助减小打包体积。</p>\n<h3 class="anchor-heading"><a href="#shi-yong-xu-zhi">¶</a><a href="javascript:void(0)" id="shi-yong-xu-zhi" class="anchor-point"></a>使用须知</h3>\n<p>这个插件需要配合 Zent >= 7.0.0 使用。</p>\n<h3 class="anchor-heading"><a href="#te-xing">¶</a><a href="javascript:void(0)" id="te-xing" class="anchor-point"></a>特性</h3>\n<ul>\n<li>减小打包体积</li>\n<li>JavaScript 代码按需引入</li>\n<li>样式按需引入</li>\n</ul>\n<h3 class="anchor-heading"><a href="#shi-yong">¶</a><a href="javascript:void(0)" id="shi-yong" class="anchor-point"></a>使用</h3>\n<p><code>yarn add babel-plugin-zent -D</code></p>\n<p>配置示例:</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>在 JavaScript 代码中通过 <code>import { Button, Dialog } from \'zent\'</code> 这种方式去引入 Zent 组件，插件会自动引入用到的组件代码。</p>\n<h3 class="anchor-heading"><a href="#pei-zhi">¶</a><a href="javascript:void(0)" id="pei-zhi" class="anchor-point"></a>配置</h3>\n<ul>\n<li><code>libraryName</code>: 需要处理的模块名</li>\n<li><code>noModuleRewrite</code>: 关闭 JavaScript 模块重写，一般配合打包工具的 tree-shaking 使用。</li>\n<li><code>automaticStyleImport</code>: 设置为 <code>true</code> 启用样式自动引入。</li>\n<li><code>useRawStyle</code>: 配合 <code>automaticStyleImport</code> 使用, 设置为 <code>true</code> 自动引入样式源文件(sass). <strong>需要 Zent >= 7.0.0</strong></li>\n</ul>\n<pre><code class="language-js"><span class="token comment">// 默认值</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>'}))}}]),a}(b.Component)}}]);