UMD和CommonJS（CJS）包文件夹有什么不同，我应该使用哪个？

Question

我使用 package.json 安装了 ReactJS 和 react-dom。

    "dependencies": {
        "bootstrap": "^v4.1.1",
        "popper.js": "^1.14.3",
        "react": "^v16.4.1",
        "react-dom": "^16.4.1"
    }

它正确地下载了react文件夹和react-dom文件夹。

这两个文件夹都有cjs和umd文件夹，里面有很多JavaScript文件。

对我来说，很难找到这两个文件夹中文件之间的区别。

就像这样：

    URL: node_modules/react/umd
      react-development.js
      react-production.min.js

    URL: node_modules/react/cjs
       react-development.js
       react-production.min.js

这与react-dom几乎相同。它也有 cjs 和 umd 文件夹，我不知道应该使用来自哪个文件夹的文件来开发React应用程序或网站。

- kust kust

---

@Tholle 感谢您的评论。我刚刚使用 npm install 下载了一些库，所以没有什么可以称之为“环境”的东西。现在，我可以说我将在 Windows 7 上开发一些东西。就这样。如果我在 js 文件中使用 import React blah blah，那么我在 html 中不需要 cdn 吗？ - kust kust

好的。你是否遇到了React应用程序的许多起点之一，例如create-react-app？如果你刚开始学习，使用它会让你的体验更好。 - Tholle

好的，我了解了。cjs（CommonJS）是例如Node使用的模块系统，而umd（Universal Module Definition）是一种力求在各个地方都能正常工作的模块类型。如果您想将这些文件作为独立的脚本标签包含在浏览器中，而不需要像Webpack那样进行构建步骤，那么您应该使用umd。 - Tholle

@Tholle Ah，非常感谢您的精彩评论！！ - kust kust

@Tholle：你应该把你的评论变成一个答案。 - dan04

Answer 1

JavaScript最初只用于交互式浏览器。使用NodeJS后，它在非浏览器环境中得到了应用。因此，存在不兼容的模块格式及其他因素：

- “CommonJS”规范描述了使用exports对象作为API来声明和发现从模块导出的名称。不允许在交互式浏览器中加载CommonJS模块。NodeJS是CommonJS格式最流行的实现之一。 - “异步模块定义”(AMD)描述了如何打包JavaScript模块，假设它们将在交互式浏览器中加载。RequireJS是更受欢迎的模块支持库之一，它可以消耗AMD模块。 - 由于AMD和CommonJS都非常流行且彼此之间不可互通，“通用模块定义”(UMD)是一种模式，可以制作一个模块，可以同时被两个格式所消耗，但其格式更加复杂。 - 更近期的，ECMAScript 2015定义了export和import语法（与以上所有内容不同）以支持模块。

你应该使用哪个？需要根据构建系统中将要消耗这些模块的内容来回答。

今天（2022年02月），最可能的答案是：使用ECMAScript模块，这些模块现在已经在NodeJS和主流浏览器中得到了支持。

如果您需要支持非常过时的JavaScript引擎，您可能需要使用早期格式之一，但您应该有一个计划来放弃对它们的支持。

- bignose

---

截至2021年，对于前端项目，请始终使用/分发ES模块。除非您正在使用一些超级老旧的技术，否则不再有分发CommonJS的必要性。即使在这种情况下，我强烈建议您迁移您的遗留技术，而不是继续支持它。 - Gianfranco Fertino