namespaces - 在 ES6 中使用 IIFE 命名空间？

Question

显然，ES6 doesn't need namespacing因为每个文件都是一个单独的模块。

但是，如何避免全局命名空间干扰？

例如，Babel编译我的 scripts/main.js文件只需替换 const与 var .

var alert = 'This line doesn\'t do anything.'
window.alert(alert)

带有 IIFE 的命名空间(下面命名为 ANS)可以防止名称冲突:

const ANS = (function () {
  const alert = 'This works'
  window.alert(alert + '.')
  return {alert: alert + ' too.'}
})()
alert(ANS.alert)

将属性添加到命名空间 ANS比将它们添加到全局命名空间 window 更干净, 或 this .并且，IIFE 提供了进一步的封装。

那么，第二种方式(即使用 IIFE 创建自定义命名空间)不是比第一种更好吗？如果是这样，在 ES2015 中有更新/更好的方法吗？为什么 Babel 不为我做这个？

Answer 1

Apparently, ES6 doesn't need namespacing because each file is a separate module.

不完全是。每个模块都有自己的范围，这是正确的，但不是每个文件都是一个模块。 ES6 中仍有一些脚本与 ES5 中的脚本一样工作，并且在全局范围内执行。
在这些脚本中，您仍然需要尽可能地避免使用全局变量，通常是通过不声明/分配任何变量或将“模块”包装在 IEFE 中为其提供单独的变量范围。

Is there a newer/nicer way of doing this in ES6?

您可以使用 block 和词法变量声明( let ， const ， function ):

{
    const msg = 'This line doesn\'t do anything.'
    window.alert(msg);
}
// msg is not defined here

或者您可以在 IEFE 中使用箭头功能，它允许您使用 this引用全局对象而不需要 use .call(this) ):

(() => {
    var msg = 'This line doesn\'t do anything.'
    window.alert(msg);
})();

But then, how do I avoid global namespace interference, or name collisions?

在 ES6 模块中，除了内置对象和可能的全局对象之外，没有什么是全局的。避免修改它们。

当然，您需要注意模块名称之间的冲突 - 如何做到这一点应该在文档中解释模块加载器的解析器机制。