javascript - UglifyJS 可以替代 RequireJS 吗？

Question

老实说，我不明白 RequireJS 的好处。如果我使用 UglifyJS 缩小并连接所有文件，并将单个生成的 JS 文件放在结束 </body> 之前标签，我还需要使用RequireJS吗？除了为我的页面大小增加 15KB 之外，RequireJS 还提供了哪些 UglifyJS 无法提供的好处？

Answer 1

使用 requireJs 的要点是有一个合理的方法来模块化你的代码。假设您有一个包含数千行代码的应用程序，您不想在一个文件中处理所有这些内容。因此，如果您开始将其拆分为不同的文件，您需要一种方法来按正确的顺序加载所有单个文件。当然，您可以自己创建 20 个脚本标签并确保它们的顺序正确，但随着代码的增长，您必须添加更多脚本标签，并且对于每个文件，您都必须找到正确的位置。这就是 requireJs 的优点。

假设您有一个 3 个脚本 A.js 依赖于 B.js，而 B.js 又依赖于 C.js

使用脚本标签，它看起来像这样:

<script src="C.js"></script>
<script src="B.js"></script>
<script src="A.js"></script>


//A.js
  console.log('A' + B)
//B.js    
  B = 'B' + C
//C.js
  C = 'C'
})

使用 requireJs

<script src="require.js" data-main="A.js"></script>

并在每个脚本中声明依赖项:

//A.js
require(['B.js'], function (B) {
  console.log('A' + B)
})
//B.js    
define(['C.js'], function (C) {
  return 'B' + C
})
//C.js
define([], function () {
  return 'C'
})

这是一个非常简单的示例，但要点是您不必关心模块的顺序，因为 requireJs 会按正确的顺序加载模块。

回到你的问题，优化器更多的是一个附加组件，所以如果你有一个适合单个文件并且仍然可维护的小型代码库，只需使用 uglifyJs 即可。但如果您想将代码拆分为模块，则 requireJs 是最佳选择。