ES6模块（JavaScript）

Question

在ES6下，我认为在客户端，在函数外部定义的内容将继续污染全局范围。 在ES5中，我通常会在应用程序初始化时在根“命名空间对象”中注册一堆类型，如下所示：

(function (namespace) {
    function MyConstructor() {
    }

    namespace.MyConstructor = MyConstructor;
}(applicationNamespace));

然后，我可以稍后参考我的类型，如下所示：

var o = new applicationNamespace.MyConstructor();

很简单。

在ES6中，我如何达到相同的效果？ 我想我仍然需要将所有文件包装在IIFE中，以防止污染全局范围？

(function() {
  function MyConstructor() {
  }

  export MyConstructor; // Will this make the constructor function globally visible?
}())

在线上的大多数示例似乎都是针对Node.js的，其中文件的内容缺少IIFE，但是在客户端，这是否会造成全球范围的污染，即使在ES6中也是如此？

还是存在export关键字会更改作用域行为？

最后，如何使用ES6模块实现语义命名间隔。 像myapp.utils.MyConstructor一样？

Answer 1

导出不会污染全局名称空间，因为它们需要导入。

以ES6为例，您可以编写：

export let a = 1;

等效的ES5为：

var a = 1;
module.exports = { a : a };

在另一个文件中，使用ES6中的导出变量：

import { a } from './other-file';
console.log(a); // 1

大致相当于以下ES5：

var a = require('other-file').a;
console.log(a); // 1

变量将在每个文件范围内，并且捆绑程序通常会在串联时将每个文件包装在一个函数中。

在ES6中创建名称空间

// class-file.js
export default () => {
  console.log('constructor called');
};

// namespace.js
import A from './class-file';
export default {
  A
};

// app.js
import namespace from './namespace';
let a = new namespace.A(); // constructor called