javascript - dist 文件夹在节点模块中始终可用

Question

我正在构建一个自己的工具来编译相关的js文件(用ES6编写)并将其打包到一个包中。到目前为止，它与本地文件的预期一致，但是当我涉及公共(public)模块时，例如，react 和 redux 等，情况有所不同。我想知道如何将这些模块包含到 bundle 中？我发现大多数公共(public)模块中总是存在 dist 文件夹，其中包含分布式版本。那么，dist 文件夹在任何模块目录中总是可用吗？

Answer 1

Webpack 使用与 Node.js 相同的模块分辨率。 node_modules 有一个 package.json，其中有一个 main 字段，用于确定在代码中导入模块时导入哪个文件。此外，webpack 会查找 package.json 中的 browser 或 module 字段，如果它们是，则优先使用它们而不是 main展示。这使得发布与常规 Node.js 构建不同的构建变得容易(例如使用 ES 模块(import/export)，这些模块不受还有 Node.js，但由 webpack 等捆绑程序提供)。可以使用选项 resolve.mainFields 配置此行为。例如，请查看 package.json of Redux .

这些字段都不是强制性的，但至少应该存在 main，因此您可以简单地导入模块:

import module from 'module';

或者使用require:

const module = require('module');

Webpack 自动包含您导入到 bundle 中的模块。

---

dist 目录没有任何特殊之处，但包含 UMD 构建的 dist 目录很常见。尤其是Unpkg允许您导入节点模块，而无需手动将其发布到 CDN，它默认使用 dist 或 umd (如主页底部所述)。