doc: add exports in the package.json (#46) 906cbdd152

docs/package.json.html

@@ -41,7 +41,7 @@
 <p>这个快速参考备忘清单，显示了关于 package.json 文件中所需内容的全部内容。</p>
 </div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
   <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
-</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#重要字段">重要字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" href="#name">name</a><a aria-hidden="true" class="leve4 tocs-link" href="#规则">规则</a><a aria-hidden="true" class="leve3 tocs-link" href="#version">version</a><a aria-hidden="true" class="leve3 tocs-link" href="#tips">Tips</a><a aria-hidden="true" class="leve3 tocs-link" href="#安装-name-包">安装 name 包</a><a aria-hidden="true" class="leve2 tocs-link" href="#信息类字段">信息类字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#description">description</a><a aria-hidden="true" class="leve3 tocs-link" href="#license">license</a><a aria-hidden="true" class="leve4 tocs-link" href="#license字段必须是以下之一">license字段必须是以下之一</a><a aria-hidden="true" class="leve3 tocs-link" href="#keywords">keywords</a><a aria-hidden="true" class="leve2 tocs-link" href="#链接类字段">链接类字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#homepage">homepage</a><a aria-hidden="true" class="leve3 tocs-link" href="#repository">repository</a><a aria-hidden="true" class="leve3 tocs-link" href="#bugs">bugs</a><a aria-hidden="true" class="leve2 tocs-link" href="#项目维护类字段">项目维护类字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#author">author</a><a aria-hidden="true" class="leve3 tocs-link" href="#contributors">contributors</a><a aria-hidden="true" class="leve2 tocs-link" href="#文件类信息">文件类信息</a><a aria-hidden="true" class="leve3 tocs-link" href="#files">files</a><a aria-hidden="true" class="leve3 tocs-link" href="#main">main</a><a aria-hidden="true" class="leve3 tocs-link" href="#man">man</a><a aria-hidden="true" class="leve3 tocs-link" href="#directories">directories</a><a aria-hidden="true" class="leve3 tocs-link" href="#bin">bin</a><a aria-hidden="true" class="leve3 tocs-link" href="#types">types</a><a aria-hidden="true" class="leve2 tocs-link" href="#打包包字段">打包包字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#esnext">esnext</a><a aria-hidden="true" class="leve3 tocs-link" href="#module">module</a><a aria-hidden="true" class="leve3 tocs-link" href="#browser">browser</a><a aria-hidden="true" class="leve2 tocs-link" href="#任务类字段">任务类字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#scripts">scripts</a><a aria-hidden="true" class="leve3 tocs-link" href="#特定的-scripts">特定的 scripts</a><a aria-hidden="true" class="leve3 tocs-link" href="#config">config</a><a aria-hidden="true" class="leve2 tocs-link" href="#依赖描述类字段">依赖描述类字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#dependencies">dependencies</a><a aria-hidden="true" class="leve3 tocs-link" href="#workspaces">workspaces</a><a aria-hidden="true" class="leve3 tocs-link" href="#devdependencies">devDependencies</a><a aria-hidden="true" class="leve3 tocs-link" href="#overrides">overrides</a><a aria-hidden="true" class="leve3 tocs-link" href="#peerdependencies">peerDependencies</a><a aria-hidden="true" class="leve3 tocs-link" href="#optionaldependencies">optionalDependencies</a><a aria-hidden="true" class="leve3 tocs-link" href="#bundleddependencies">bundledDependencies</a><a aria-hidden="true" class="leve3 tocs-link" href="#peerdependenciesmeta">peerDependenciesMeta</a><a aria-hidden="true" class="leve2 tocs-link" href="#系统">系统</a><a aria-hidden="true" class="leve3 tocs-link" href="#engines">engines</a><a aria-hidden="true" class="leve3 tocs-link" href="#os">os</a><a aria-hidden="true" class="leve3 tocs-link" href="#cpu">cpu</a><a aria-hidden="true" class="leve2 tocs-link" href="#发布">发布</a><a aria-hidden="true" class="leve3 tocs-link" href="#private">private</a><a aria-hidden="true" class="leve3 tocs-link" href="#publishconfig">publishConfig</a><a aria-hidden="true" class="leve2 tocs-link" href="#yarn">Yarn</a><a aria-hidden="true" class="leve3 tocs-link" href="#flat">flat</a><a aria-hidden="true" class="leve3 tocs-link" href="#resolutions">resolutions</a><a aria-hidden="true" class="leve2 tocs-link" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="重要字段"><a aria-hidden="true" tabindex="-1" href="#重要字段"><span class="icon icon-link"></span></a>重要字段</h2><div class="wrap-body">
+</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#重要字段">重要字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" href="#name">name</a><a aria-hidden="true" class="leve4 tocs-link" href="#规则">规则</a><a aria-hidden="true" class="leve3 tocs-link" href="#version">version</a><a aria-hidden="true" class="leve3 tocs-link" href="#tips">Tips</a><a aria-hidden="true" class="leve3 tocs-link" href="#安装-name-包">安装 name 包</a><a aria-hidden="true" class="leve2 tocs-link" href="#信息类字段">信息类字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#description">description</a><a aria-hidden="true" class="leve3 tocs-link" href="#license">license</a><a aria-hidden="true" class="leve4 tocs-link" href="#license字段必须是以下之一">license字段必须是以下之一</a><a aria-hidden="true" class="leve3 tocs-link" href="#keywords">keywords</a><a aria-hidden="true" class="leve2 tocs-link" href="#链接类字段">链接类字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#homepage">homepage</a><a aria-hidden="true" class="leve3 tocs-link" href="#repository">repository</a><a aria-hidden="true" class="leve3 tocs-link" href="#bugs">bugs</a><a aria-hidden="true" class="leve2 tocs-link" href="#项目维护类字段">项目维护类字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#author">author</a><a aria-hidden="true" class="leve3 tocs-link" href="#contributors">contributors</a><a aria-hidden="true" class="leve2 tocs-link" href="#文件类信息">文件类信息</a><a aria-hidden="true" class="leve3 tocs-link" href="#files">files</a><a aria-hidden="true" class="leve3 tocs-link" href="#main">main</a><a aria-hidden="true" class="leve3 tocs-link" href="#man">man</a><a aria-hidden="true" class="leve3 tocs-link" href="#directories">directories</a><a aria-hidden="true" class="leve3 tocs-link" href="#bin">bin</a><a aria-hidden="true" class="leve3 tocs-link" href="#types">types</a><a aria-hidden="true" class="leve2 tocs-link" href="#打包包字段">打包包字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#esnext">esnext</a><a aria-hidden="true" class="leve3 tocs-link" href="#module">module</a><a aria-hidden="true" class="leve3 tocs-link" href="#browser">browser</a><a aria-hidden="true" class="leve3 tocs-link" href="#exports">exports</a><a aria-hidden="true" class="leve4 tocs-link" href="#导出和导入">导出和导入</a><a aria-hidden="true" class="leve2 tocs-link" href="#任务类字段">任务类字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#scripts">scripts</a><a aria-hidden="true" class="leve3 tocs-link" href="#特定的-scripts">特定的 scripts</a><a aria-hidden="true" class="leve3 tocs-link" href="#config">config</a><a aria-hidden="true" class="leve2 tocs-link" href="#依赖描述类字段">依赖描述类字段</a><a aria-hidden="true" class="leve3 tocs-link" href="#dependencies">dependencies</a><a aria-hidden="true" class="leve3 tocs-link" href="#workspaces">workspaces</a><a aria-hidden="true" class="leve3 tocs-link" href="#devdependencies">devDependencies</a><a aria-hidden="true" class="leve3 tocs-link" href="#overrides">overrides</a><a aria-hidden="true" class="leve3 tocs-link" href="#peerdependencies">peerDependencies</a><a aria-hidden="true" class="leve3 tocs-link" href="#optionaldependencies">optionalDependencies</a><a aria-hidden="true" class="leve3 tocs-link" href="#bundleddependencies">bundledDependencies</a><a aria-hidden="true" class="leve3 tocs-link" href="#peerdependenciesmeta">peerDependenciesMeta</a><a aria-hidden="true" class="leve2 tocs-link" href="#系统">系统</a><a aria-hidden="true" class="leve3 tocs-link" href="#engines">engines</a><a aria-hidden="true" class="leve3 tocs-link" href="#os">os</a><a aria-hidden="true" class="leve3 tocs-link" href="#cpu">cpu</a><a aria-hidden="true" class="leve2 tocs-link" href="#发布">发布</a><a aria-hidden="true" class="leve3 tocs-link" href="#private">private</a><a aria-hidden="true" class="leve3 tocs-link" href="#publishconfig">publishConfig</a><a aria-hidden="true" class="leve2 tocs-link" href="#yarn">Yarn</a><a aria-hidden="true" class="leve3 tocs-link" href="#flat">flat</a><a aria-hidden="true" class="leve3 tocs-link" href="#resolutions">resolutions</a><a aria-hidden="true" class="leve2 tocs-link" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="重要字段"><a aria-hidden="true" tabindex="-1" href="#重要字段"><span class="icon icon-link"></span></a>重要字段</h2><div class="wrap-body">
 </div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
 <p>本快速参考备忘清单是您需要了解的关于 package.json 文件中所需内容的全部内容。 它必须是实际的 JSON，而不仅仅是 JavaScript 对象字面量。</p>
 <ul>
@@ -263,6 +263,96 @@
 </span><span class="code-line"><span class="token punctuation">}</span>
 </span></code></pre>
 <p>字段由模块作者提供，作为 <code>JavaScript</code> 包或组件工具的提示，用于打包模块以供客户端使用。 提案就<a href="https://github.com/defunctzombie/package-browser-field-spec">在这里</a>。</p>
+</div></div></div><div class="wrap h3body-exist col-span-3"><div class="wrap-header h3wrap"><h3 id="exports"><a aria-hidden="true" tabindex="-1" href="#exports"><span class="icon icon-link"></span></a><code>exports</code></h3><div class="wrap-body">
+<!--rehype:wrap-class=col-span-3-->
+<p>所有包的版本都支持 main 字段，但它的功能是有限的。现在在 package.json 可以使用最新的 exports 字段导出。具体参考：<a href="https://nodejs.org/api/packages.html">https://nodejs.org/api/packages.html</a></p>
+<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"mod"</span><span class="token punctuation">,</span>
+</span><span class="code-line">  <span class="token property">"exports"</span><span class="token operator">:</span><span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token property">"."</span><span class="token operator">:</span> <span class="token string">"./lib/index.js"</span><span class="token punctuation">,</span>
+</span><span class="code-line">    <span class="token property">"./lib/*"</span><span class="token operator">:</span> <span class="token string">"./lib/*.js"</span>
+</span><span class="code-line">  <span class="token punctuation">}</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+<h4 id="导出和导入"><a aria-hidden="true" tabindex="-1" href="#导出和导入"><span class="icon icon-link"></span></a>导出和导入</h4>
+<ol>
+<li>
+<p>如果同时出现 main 和 exports 字段，只会读取 exports 字段</p>
+<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token property">"main"</span><span class="token operator">:</span> <span class="token string">"./index.js"</span><span class="token punctuation">,</span>
+</span><span class="code-line">  <span class="token property">"exports"</span><span class="token operator">:</span> <span class="token string">"./index.js"</span>
+</span><span class="code-line"><span class="token punctuation">}</span> 
+</span></code></pre>
+</li>
+<li>
+<p>导出子路径中的模块</p>
+<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"mod"</span><span class="token punctuation">,</span>
+</span><span class="code-line">  <span class="token property">"exports"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token property">"."</span><span class="token operator">:</span> <span class="token string">"./index.js"</span><span class="token punctuation">,</span>
+</span><span class="code-line">    <span class="token property">"./sub"</span><span class="token operator">:</span> <span class="token string">"./src/sub.js"</span>
+</span><span class="code-line">  <span class="token punctuation">}</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// 导入</span>
+</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">sub</span> <span class="token keyword module">from</span> <span class="token string">"mod/sub"</span>
+</span></code></pre>
+</li>
+<li>
+<p>如果 <code>.</code> 是唯一的导出时，其提供了语法糖</p>
+<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token property">"exports"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token property">"."</span><span class="token operator">:</span> <span class="token string">"./dist/index.js"</span>
+</span><span class="code-line">  <span class="token punctuation">}</span>
+</span><span class="code-line">  <span class="token comment">//简写</span>
+</span><span class="code-line">  <span class="token comment">//"exports": "./dist/index.js"</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+</li>
+<li>
+<p>条件导出。根据导出包的格式不同而设置的情况。</p>
+<ul>
+<li><span style="color:red">注意：</span>由于 require 和 import 互斥，所以 require 不能加载 es 的模块，export 不能加载 cjs 模块</li>
+</ul>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left">export</td><td>通过 import 或 import() 或 es 模块加载的任何顶层导入或解析操作加载时，匹配。</td></tr><tr><td align="left">require</td><td>当包通过 require() 加载时匹配。预期的格式包括 CommonJS、JSON 和本地插件。</td></tr><tr><td align="left">node</td><td>匹配任何 Node.js 环境。可以是 cjs 或 es 模块文件。必须在 import 或 require 之后。</td></tr><tr><td align="left">default</td><td>默认的降级条件。可以是一个 cjs 或 es 模块文件。这个条件应该总是排在最后。</td></tr></tbody></table>
+<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token property">"exports"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token property">"."</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+</span><span class="code-line">      <span class="token property">"import"</span><span class="token operator">:</span><span class="token string">"./dist/index.mjs"</span><span class="token punctuation">,</span>
+</span><span class="code-line">      <span class="token property">"require"</span><span class="token operator">:</span><span class="token string">"./dist/index.cjs"</span><span class="token punctuation">,</span>
+</span><span class="code-line">      <span class="token property">"node"</span><span class="token operator">:</span> <span class="token string">"./dist/ployfill.js"</span><span class="token punctuation">,</span>
+</span><span class="code-line">      <span class="token property">"default"</span><span class="token operator">:</span> <span class="token string">"./dist/default.js"</span>
+</span><span class="code-line">    <span class="token punctuation">}</span>
+</span><span class="code-line">  <span class="token punctuation">}</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+</li>
+</ol>
 </div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="任务类字段"><a aria-hidden="true" tabindex="-1" href="#任务类字段"><span class="icon icon-link"></span></a>任务类字段</h2><div class="wrap-body">
 <p>包里还可以包含一些可执行脚本或者其他配置信息。</p>
 </div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="scripts"><a aria-hidden="true" tabindex="-1" href="#scripts"><span class="icon icon-link"></span></a><code>scripts</code></h3><div class="wrap-body">