打包和发布 npm 模块的最简单方法是什么？答案

【问题标题】：What is the easiest way to pack and publish an npm module?打包和发布 npm 模块的最简单方法是什么？
【发布时间】：2019-04-01 08:50:31
【问题描述】：

我一直在研究这个话题，我读到的很多东西都与 babel、webpack、rollup 甚至 browserify 重叠。轻松发布用 es6 编写的源代码的标准方式（或最常见的方式）是什么，可以在浏览器中使用 script 标签和在 node 中使用 require？同样令人困惑的是实际需要多少个版本？我读到有三个 - umd、cjs 和原始源，但是 umd 不是已经涵盖 cjs 了吗？然后我也看到有一个es版本（文件夹），我觉得和源码是一样的，为什么需要呢？

【问题讨论】：

标签： reactjs npm webpack ecmascript-6 babeljs

【解决方案1】：

如果您正在编写一个应该在浏览器和 Node 中运行的库，您有多种选择：

使用 rollup 将它捆绑到 UMD（它会创建比 Webpack 更小的捆绑包，特别推荐用于捆绑库）。此解决方案对您来说是最简单的解决方案。它的缺点是如果您的 lib 允许部分导入（例如 lodash 只允许导入一个函数），那么您的消费者将无法这样做，他们将获得您的整个捆绑包。
在 package.json 中将编译后的文件发布为 esm + cjs，您将 main 字段指向 cjs 条目文件并将 module 字段指向 esm 条目，这就是为什么您的 lib 使用者将能够有选择地导入你的库的一部分。该选项的好处是您的消费者将能够对您的代码应用多种优化，例如tree shaking、模块 concat 等...

【讨论】：

感谢您的回答。但为什么是 esm 版本？这和src有什么区别？而且UMD不是已经涵盖了cjs吗？这就是为什么它被称为“通用”。
ESM - ecma 脚本模块，导入/导出语法。你是对的 UMD 涵盖 cjs。
ES6(with import export) 是我用来编写源代码的，为什么还要编译另一个相同的版本呢？这是我的主要困惑。
这完全取决于您希望消费者如何使用您的 lib，如果您发布捆绑包，他们将无法将其拆分，如果您希望消费者捆绑您的代码，并允许他们优化导入，发布 es6，模块，如果您的消费者要在浏览器中使用您的库，请捆绑您的库。
@felixmosh 在那里回答了您的问题。这是您期望其他开发人员如何使用您的库/包的问题。 UMD 和 CJS 选项涵盖了那些不严格使用 ES6 并捆绑他们的代码的人，而 ESM 版本适用于那些通常使用的人，并让他们能够有选择地包含他们需要的包中的组件，而不是整个包。