5-9c128e7e1f8e9241073d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{873:function(n,a,t){"use strict";t.r(a),t.d(a,"default",(function(){return E}));var e=t(849),s=t.n(e),o=t(850),c=t.n(o),r=t(522),i=t.n(r),p=t(851),l=t.n(p),u=t(852),h=t.n(u),d=t(853),f=t.n(d),m=t(854),g=t.n(m),k=t(855),y=t.n(k),v=t(0),b=t.n(v),z=t(210);function S(n){var a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(n){return!1}}();return function(){var t,e=f()(n);if(a){var s=f()(this).constructor;t=Reflect.construct(e,arguments,s)}else t=e.apply(this,arguments);return h()(this,t)}}function w(n){return b.a.createElement(n.tag,y()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function R(n){return b.a.createElement(w,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function j(n){return b.a.createElement(w,{tag:"style",html:n.style})}v.Component;var E=function(n){l()(t,n);var a=S(t);function t(){return s()(this,t),a.apply(this,arguments)}return c()(t,[{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,t){for(;a;)return a.offsetTop&&"static"!==getComputedStyle(a).position&&(t+=a.offsetTop),n(a.parentNode,t);return t}(a,-9))}}},{key:"render",value:function(){return b.a.createElement("div",{className:"zandoc-react-container",key:null},b.a.createElement(j,{style:""}),b.a.createElement(R,{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 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>在 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 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>'}))}}]),t}(v.Component)}}]);