0

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

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

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

谢谢你的帮助

4

1 回答 1

0

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

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

许多包发布了多个版本，例如，一个带有用于 webpack 或 Rollup 等模块捆绑器的 ES 模块，另一个在 Node 中工作（带有require）。这样做的一个很好的例子是 Redux，它有一个简单的构建步骤。它使用 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>

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

于 2017-07-24T09:48:05.167 回答