以两种模式样式发布 NPM 模块

Question

我有一个包，它由 Typescript 编译为 UMD，然后由 Webpack 转换为全局变量（我们必须使用 Typescript，因此不能选择更灵活的 UMD 模式）。我希望使用包的应用程序能够选择他们需要的。这些将部署到本地 NPM 注册表。

目前我有一个 package.json，其中列出了所有必需的依赖项和构建脚本。我不介意发布两个不同的包（可能发布到不同的范围，即@my-umd-packages\my-package 和@my-globals-packages\mypackage，但我想为所有依赖项和脚本保留一个包，因为除了最后一步之外，它都是一样的。

最简洁的方法是什么？可以在具有不同main 属性的两个地方发布一个包吗？

感谢您的帮助

Answer 1

TypeScript 不会回退到全局变量，它应该是 UMD 模块的一部分。有可能发布您的包的多个版本。坦率地说，为全局变量提供一个单独的模块是相当特别的，因为大多数时候 UMD 都会参与其中。好消息是 webpack 确实支持这种模块，并且可以通过设置 output.libraryTarget 来生成它。

output: {
  filename: 'mylib.js',
  library: 'MyLibrary',
  libraryTarget: 'umd'
}

许多包发布了多个版本，例如，一个带有 ES 模块，用于 webpack 或 Rollup 等模块捆绑器，另一个在 Node 中工作（带有require）。这样做的一个很好的例子是 Redux，它有一个simple build step。它使用 Babel 为 bundle 转译 source 和 Rollup，但 TypeScript 和 webpack 的原理是一样的。

Redux 发布了三个目录（完整的发布结构参见unpkg - Redux）：

dist/  # UMD bundles
es/    # ES modules version (same as lib/ but with ES modules)
lib/   # Transpiled version to work in Node

这意味着如果你想使用 UMD 版本，可以导入 redux/dist/redux.js，例如在脚本标签中，感谢 unpkg，这非常简单（希望这是全局变量的主要用途）。

<script src="https://unpkg.com/redux/dist/redux.js"></script>

此外，它定义了 the module field 将由捆绑器使用，这些捆绑器受益于 ES 模块（Rollup - pkg.module 了解详细信息），否则它将使用 lib/index.js（main 字段）。使用 webpack，您可以配置要使用 resolve.mainFields 的字段。您可能需要考虑发布这样的结构，因为如果您只想使用它的一部分并且 ES 模块在 Webpack 中启用 Tree Shaking，则不必总是需要导入整个包，您的库的使用者会喜欢它，因为它将减小包大小。