使用 webpack 时的依赖项和 devDependencies

Question

当我使用 webpack 时，将任何模块放入 package.json dependencies 是否有意义？

当我想开发一个包时，我先使用git clone <url>，然后使用npm install，然后npm 从package.json 文件中安装所有dependencies 和devDependencies，这很有意义。

当我是最终用户并且只想在我的node_modules 中安装一些包以在我的项目中使用它时，我运行npm install package-name，然后npm 安装package-name only 它的dependencies，它也很有意义。

但是当我使用webpack 时，将任何模块放入dependencies 是否有意义？ webpack 会将所有依赖项捆绑到例如。 bundle.js，所以，对我来说，不需要安装依赖项（虽然它们包含在 bundle.js 文件中）。

假设我为我的项目：my-project，将所有必需的模块放入 devDependencies（保持 dependencies 对象为空），将其与 webpack 捆绑并发布：

• 开发者用户将使用git clone <url to my_project>，然后运行npm install，然后npm将从package.json安装devDependencies（并省略空dependencies对象），然后就可以开发了。
• 最终用户将使用npm install my-project，然后npm 将安装my-project，不要安装devDependencies （因为这是用于生产）并且不要安装dependencies （因为 package.json 中的 dependencies 对象保持为空）。将任何内容放入dependencies 会使依赖项加倍：两个依赖项都将被安装，并且相同的依赖项可以在bundle.js 文件中访问。

我说的对吗？

Answer 1

你是正确的，一旦它被 webpack 转译，可能就没有依赖关系了。但是，有些包是多用途的，可能以多种方式使用，因此在某些情况下可能仍然需要依赖项。

如果你查看package.jsonspecification，有两个可能的入口点，“main”和“browser”。还有建议的“module”入口点。目前在discussion 下关于如何在 webpack 中处理这些问题，用户似乎希望 webpack 优先考虑它们为module > browser > main，但是browser 目前是 webpack 优先使用的。

按照module > browser > main 的顺序对它们进行优先级排序的想法大概是浏览器可以直接在“浏览器”中使用预转译的内容，而另一个在您的包上调用require() 或include() 的项目将使用非转译来自“模块”条目的代码。 “模块”入口代码可以包含具有新功能的现代 JavaScript，然后需要它的项目/包可以将其转换为自己的规范，例如使用“browserslist”。

我发现这个问题是因为我想知道同样的事情......