Node.JS（新）Package.json exports 字段
<p>翻译自 Node.JS (New) Package.json Exports Field</p><blockquote>
<p>听说过 export 映射吗？它相当强大！</p>
</blockquote>
<h2 id="总而言之">总而言之</h2>
<p><code>exports</code> <code>package.json</code> 字段的文档在这里 ，它来自这个提案。我不会涵盖所有内容，因此如果您需要任何其他信息，请查看提案。<br>
另外我没有涉及 <code>imports</code> 到 <code>ESModule</code> 世界中非常有趣的领域。</p>
<p><img src="https://img2020.cnblogs.com/blog/1249006/202111/1249006-20211118174246984-1635673347.gif" alt="" loading="lazy"></p>
<h2 id="exports-是什么"><code>“exports”</code> 是什么？</h2>
<p>该 <code>exports</code> 字段（或 <code>“export map”</code>）提供了一种方法来为不同的环境和 <code>JavaScript</code> 风格公开您的包模块，同时限制对其内部部分的访问。<br>
像 <code>NodeJS</code>、<code>浏览器</code> 这样的环境，甚至是类似 <code>node-env</code> 的过滤器 <code>production/development</code>，例如 <code>React</code> 可以（或是否？）将它用于带有警告和内容的开发构建，以及它的生产构建。<br>
<code>EcmaScript</code> 模块 <code>import … from '…'</code>与 <code>CommonJS</code> 之类的风味 <code>const … = require(…)</code>。</p>
<h2 id="如何使用它">如何使用它</h2>
<p><strong>考虑以下结构：</strong></p>
<pre><code class="language-text">my-awesome-lib
├── lib/
│ ├── whole-lib.browser.js (iife 格式)
│ ├── public-module-a.cjs(commonjs 格式)
│ ├── public-module-a.mjs(esmodule 格式)
│ ├── public-module-b.cjs
│ ├── public-module-b.mjs
│ └── internals/
│ ├── private-module-c.cjs
│ └── private-module-c.mjs
├── package.json
└── …
</code></pre>
<p>我们想要导出 <code>module-a</code> 并 <code>module-b</code> 同时限制对 <code>module-c</code>. 我们还希望我们的包提供 <code>CommonJS</code> 和 <code>ESModule</code> 输出。</p>
<p>以下是如何利用该 <code>exports</code> 字段的示例</p>
<pre><code class="language-json">{
"name": "my-awesome-lib",
…
"exports": {
".": {
"browser": {
"default": "./lib/whole-lib.browser.js"
}
},
"module-a": {
"import": "./lib/public-module-a.mjs",
"require": "./lib/public-module-a.cjs"
},
"module-b": {
"import": "./lib/public-module-b.mjs",
"require": "./lib/public-module-b.cjs"
}
}
}
</code></pre>
<p>package.json | export field usage</p>
<blockquote>
<p>注意：每个路径都应该相对于包根目录。意味着每条路径必须以 ./</p>
</blockquote>
<p>通过提供有关我们的包的以下信息 <code>my-awesome-lib</code>，我们现在可以像这样在任何地方（受支持）使用它：</p>
<pre><code class="language-javascript">// CommonJS flavor
const moduleA = require('my-awesome-lib/module-a')
// ESModule flavor
import moduleA from 'my-awesome-lib/module-a'
// 行不通的！
const moduleA = require('my-awesome-lib/lib/public-module-a')
const moduleC = require('my-awesome-lib/internals/private-module-c')
import moduleA from 'my-awesome-lib/lib/public-module-a'
import moduleC from 'my-awesome-lib/internals/private-module-c'
</code></pre>
<p>JavaScript usage</p>
<p>在这两种风格中，请注意路径中没有：<code>/lib/</code> 。 路径对应于我们在 <code>exports</code> 映射中声明的路径。</p>
<p>就是这样 ！<br>
我们到此结束。我没有介绍如何使用生产/开发导出，但是你明白了，你可以自己试验它 😉</p>
<p><img src="https://img2020.cnblogs.com/blog/1249006/202111/1249006-20211118181405944-1023155064.gif" alt="" loading="lazy"></p>
<h2 id="我如何相遇的故事-exports-map">我如何相遇的故事…… exports map</h2>
<p>这里是 原作者如何发现 exports 字段的故事， 感兴趣的转到原文查看...</p>
<hr>
<p>译者注：可参考 axios-retry 这个库的package.json</p><br><br>
来源：https://www.cnblogs.com/taohuaya/p/15573719.html
頁:
[1]