package.json 中 js 浏览器库的入口点答案

【问题标题】：Entry point for a js browser lib in package.jsonpackage.json 中 js 浏览器库的入口点
【发布时间】：2019-04-17 13:19:42
【问题描述】：

假设我有一个很小的 jsbrowser 库，我想发布到 npm（例如这个 one）。该库只需包含在带有<script> 标记的html 文件中，然后在html 文档（或其他js）中正常使用：

<script src="aplouder.js"></script>

<script>
  var library = new Aplouder({...});
</script>

我应该为package.json 中的main 参数指定什么？
我应该选择 browser 而不是 main 还是不要完全指定其中任何一个？
可选：如果我有 2 个 js 文件（例如 es5 和 es6 变体）我想与库一起发布，用户可以决定他们使用哪个文件会用吗？

谢谢:)

【问题讨论】：

标签： javascript html npm package.json

【解决方案1】：

1 和 2：您的应用应与其依赖项捆绑在 /build 文件夹中

3：您的应用应捆绑在 es5 和 es6 包中

bundle 应该使用Webpack 管理，通常es6 文件存放在/src 目录，而bundle 存放在/build 或/dist 文件夹中

A nice article to get started publishing on NPM

【讨论】：

main 和 browser 怎么样？
根据您的回答：1）它是一个库而不是应用程序，它没有依赖项 2）我没有什么要捆绑的，所有内容都包含在一个简单的 js 文件中。 3) 你将如何为 es5 和 es6 包指定入口点？它不是仅限于一个（入口点）吗？
1) 应用程序（或者更好地说是组件）或 lib 没有任何区别 2) 您可以阅读的 Webpack (webpack.js.org/concepts/entry-points) 允许您为应用程序配置多个入口点
将 webpack 用于这么小的库（一个类，没有依赖项）将是一个矫枉过正的恕我直言......暂时忘记我的 3) 问题。

【解决方案2】：

您通常希望将js 库作为npm 包和浏览器库（老式方式）分发。处理此问题的一种方法是将您的 js lib 视为一个 npm 包，并在 /dist 文件夹中为那些不依赖任何构建系统的人提供一个浏览器包 module bundler（例如 webpack、parcel、rollup等）

但是，如果您的模块打算在客户端使用，则应使用 browser 字段而不是 main 字段。所以，回答这个问题：

1和2：使用browser：

"browser": "src/aplouder.js"

3：我建议坚持使用es5 或es6 中的任何一个，而不是两者都使用，因为在一个json 中不能有多个browser 键。 p>

【讨论】：