Webpack 详解
作者: ixlei
https://segmentfault.com/a/1190000013657042
webpack是现代前端开发中最火的模块打包工具,只需要通过简单的配置,便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置,便可以轻松实现对代码的构建呢?
webpack的配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> path </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> require</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'path'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">module</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">exports </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> entry</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"./app/entry"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// string | object | array</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// Webpack打包的入口</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> output</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 定义webpack如何输出的选项</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> path</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> path</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">resolve</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">__dirname</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"dist"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">),</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// string</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 所有输出文件的目标路径</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> filename</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"[chunkhash].js"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// string</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 「入口(entry chunk)」文件命名模版</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> publicPath</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"/assets/"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// string</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 构建文件的输出目录</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">/* 其它高级配置 */</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">},</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> module</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 模块相关配置</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> rules</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 配置模块loaders,解析规则</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> test</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">/.jsx?$/</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// RegExp | string</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> include</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 和test一样,必须匹配选项</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> path</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">resolve</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">__dirname</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"app"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">],</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> exclude</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 必不匹配选项(优先级高于test和include)</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> path</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">resolve</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">__dirname</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"app/demo-files"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">],</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> loader</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"babel-loader"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 模块上下文解析</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> options</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// loader的可选项</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> presets</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"es2015"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">},</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">},</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">},</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> resolve</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 解析模块的可选项</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> modules</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 模块的查找目录</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"node_modules"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> path</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">resolve</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">__dirname</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"app"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">],</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> extensions</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">".js"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">".json"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">".jsx"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">".css"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">],</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 用到的文件的扩展</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> alias</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 模块别名列表</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"module"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"new-module"</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">},</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">},</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> devtool</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"source-map"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// enum</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 为浏览器开发者工具添加元数据增强调试</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> plugins</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 附加插件列表</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// ...</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">],</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span></code></span></span></p></li> </ol> |
从上面我们可以看到,webpack配置中需要理解几个核心的概念 Entry
、 Output
、 Loaders
、 Plugins
、 Chunk
:
-
Entry:指定webpack开始构建的入口模块,从该模块开始构建并计算出直接或间接依赖的模块或者库
-
Output:告诉webpack如何命名输出的文件以及输出的目录
-
Loaders:由于webpack只能处理javascript,所以我们需要对一些非js文件处理成webpack能够处理的模块,比如sass文件
-
Plugins:
Loaders
将各类型的文件处理成webpack能够处理的模块,plugins
有着很强的能力。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。但也是最复杂的一个。比如对js文件进行压缩优化的UglifyJsPlugin
插件 -
Chunk:coding split的产物,我们可以对一些代码打包成一个单独的chunk,比如某些公共模块,去重,更好的利用缓存。或者按需加载某些功能模块,优化加载时间。在webpack3及以前我们都利用
CommonsChunkPlugin
将一些公共代码分割成一个chunk,实现单独加载。在webpack4 中CommonsChunkPlugin
被废弃,使用SplitChunksPlugin
webpack详解
读到这里,或许你对webpack有一个大概的了解,那webpack 是怎么运行的呢?我们都知道,webpack是高度复杂抽象的插件集合,理解webpack的运行机制,对于我们日常定位构建错误以及写一些插件处理构建任务有很大的帮助。
不得不说的tapable
webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,webpack中最核心的负责编译的 Compiler
和负责创建bundles的 Compilation
都是Tapable的实例。在Tapable1.0之前,也就是webpack3及其以前使用的Tapable,提供了包括:
-
plugin(name:string,handler:function)
注册插件到Tapable对象中 -
apply(…pluginInstances:(AnyPlugin|function)[])
调用插件的定义,将事件监听器注册到Tapable实例注册表中 -
applyPlugins*(name:string,…)
多种策略细致地控制事件的触发,包括applyPluginsAsync
、applyPluginsParallel
等方法实现对事件触发的控制,实现
(1)多个事件连续顺序执行
(2)并行执行
(3)异步执行
(4)一个接一个地执行插件,前面的输出是后一个插件的输入的瀑布流执行顺序
(5)在允许时停止执行插件,即某个插件返回了一个 undefined
的值,即退出执行
我们可以看到,Tapable就像nodejs中 EventEmitter
,提供对事件的注册 on
和触发 emit
,理解它很重要,看个栗子:比如我们来写一个插件
1 2 3 4 5 6 |
<ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript " style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">CustomPlugin</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">()</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{}</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript " style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">CustomPlugin</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">prototype</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">apply </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">compiler</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript " style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> compiler</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">plugin</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'emit'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> pluginFunction</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript " style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span></code></span></span></p></li> </ol> |
在webpack的生命周期中会适时的执行:
1 |
<ol class="linenums list-paddingleft-2" style="list-style-type: none;"><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">apply</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">*(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"emit"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">options</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span></code></span></span></p></li></ol> |
当然上面提到的Tapable都是1.0版本之前的,如果想深入学习,可以查看Tapable和事件流(https://segmentfault.com/a/1190000008060440)。
那1.0的Tapable又是什么样的呢?1.0版本发生了巨大的改变,不再是此前的通过 plugin
注册事件,通过 applyPlugins*
触发事件调用,那1.0的Tapable是什么呢?
暴露出很多的钩子,可以使用它们为插件创建钩子函数
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">SyncHook</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">SyncBailHook</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">SyncWaterfallHook</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">SyncLoopHook</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">AsyncParallelHook</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">AsyncParallelBailHook</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">AsyncSeriesHook</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">AsyncSeriesBailHook</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">AsyncSeriesWaterfallHook</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> require</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"tapable"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> </ol> |
我们来看看怎么使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Order</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> constructor</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">()</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">//hooks</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> goods</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">new</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">SyncHook</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">([</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'goodsId'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'number'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]),</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> consumer</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">new</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">AsyncParallelHook</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">([</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'userId'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'orderId'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">])</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> queryGoods</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">goodsId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> number</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">goods</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">call</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">goodsId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> number</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> consumerInfoPromise</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">userId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> orderId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">consumer</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">promise</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">userId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> orderId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">).</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">then</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(()</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">//TODO</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">})</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> consumerInfoAsync</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">userId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> orderId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">consumer</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">callAsync</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">userId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> orderId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">err</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> data</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">//TODO</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">})</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span></code></span></span></p></li> </ol> |
对于所有的hook的构造函数均接受一个可选的string类型的数组。
1 |
<ol class="linenums list-paddingleft-2" style="list-style-type: none;"><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> hook </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">new</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">SyncHook</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">([</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"arg1"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"arg2"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"arg3"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]);</span></code></span></span></p></li></ol> |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 调用tap方法注册一个consument</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">order</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">goods</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">tap</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'QueryPlugin'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">goodsId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> number</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fetchGoods</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">goodsId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> number</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">})</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 再添加一个</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">order</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">goods</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">tap</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'LoggerPlugin'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">goodsId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> number</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> logger</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">goodsId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> number</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">})</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 调用</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">order</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">queryGoods</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'10000000'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span></code></span></span></p></li> </ol> |
对于一个 SyncHook
,我们通过 tap
来添加消费者,通过 call
来触发钩子的顺序执行。
对于一个非 sync*
类型的钩子,即 async*
类型的钩子,我们还可以通过其它方式注册消费者和调用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 注册一个sync 钩子</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">order</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">consumer</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">tap</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'LoggerPlugin'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">userId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> orderId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> logger</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">userId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> orderId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">})</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">order</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">consumer</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">tapAsync</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'LoginCheckPlugin'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">userId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> orderId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> callback</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">LoginCheck</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">userId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> callback</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">})</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">order</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">consumer</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">tapPromise</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'PayPlugin'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">userId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> orderId</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Promise</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">resolve</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">();</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">})</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 调用</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 返回Promise</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">order</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">consumerInfoPromise</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'user007'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'1024'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">//回调函数</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">order</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">consumerInfoAsync</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'user007'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'1024'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span></code></span></span></p></li> </ol> |
通过上面的栗子,你可能已经大致了解了 Tapable
的用法,它的用法:
-
插件注册数量
-
插件注册的类型(sync, async, promise)
-
调用的方式(sync, async, promise)
-
实例钩子的时候参数数量
-
是否使用了
interception
Tapable详解
对于 Sync*
类型的钩子来说:
-
注册在该钩子下面的插件的执行顺序都是顺序执行。
-
只能使用
tap
注册,不能使用tapPromise
和tapAsync
注册
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 所有的钩子都继承于Hook</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Sync</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">*</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> extends </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Hook</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> tapAsync</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">()</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// Sync*类型的钩子不支持tapAsync</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">throw</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">new</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Error</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"tapAsync is not supported on a Sync*"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> tapPromise</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">()</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// Sync*类型的钩子不支持tapPromise</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">throw</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">new</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Error</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"tapPromise is not supported on a Sync*"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> compile</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">options</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 编译代码来按照一定的策略执行Plugin</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> factory</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">setup</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> options</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> factory</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">create</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">options</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span></code></span></span></p></li> </ol> |
对于 Async*
类型钩子:支持 tap
、 tapPromise
、 tapAsync
注册。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">AsyncParallelHook</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> extends </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Hook</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> constructor</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">args</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> super</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">args</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></span></p></li> <li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code class="javascript language-javascript" style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">call </span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, |