从ES6导入带有名称空间的旧JavaScript

Question

我正在使用babel和webpack将旧的javascript转换为ES6。 在多个文件中，我有类似

var BLOG = BLOG || {};
BLOG.myClass1 = ...

并在另一个文件中

var BLOG = BLOG || {};
BLOG.myClass2 = ...

因此，我将export {BLOG}添加到了这些文件中，但是如何多次导入BLOG？ 看来这是不允许的，而我想这样做

import {BLOG} from 'file1.js'
import {BLOG} from 'file2.js'

并将myClass1和myClass2放入BLOG。

有没有办法做到这一点？

Answer 1

因此，我将export {BLOG}添加到了这些文件中，但是如何多次导入BLOG ？

您必须为它们使用不同的导入绑定：

import {BLOG as BLOG1} from 'file1.js';
import {BLOG as BLOG2} from 'file2.js';

...然后使用BLOG1和BLOG2 。 或者，如果让您感到困扰，请添加

const BLOG = Object.assign({}, BLOG1, BLOG2);

导入后，继续使用BLOG 。

如果您具有循环依赖性，则可能BLOG1和BLOG2可能不会立即被完全填充。 使用true import / export ，在这种情况下，您收到的对象将具有其属性，但是这些属性尚未初始化 。 因此，通过真正的import / export或良好的模拟，您可以使用访问器属性来处理它：

// In a true ES2015+ module environment, or a simulated one that
// creates the properties up-front like the real one does
const BLOG = (() => {
    const b = {};
    for (const blog of [BLOG1, BLOG2]) {
        for (const key of Object.keys(blog)) {
            Object.defineProperty(b, key, {
                get(name) {
                    return blog[name];
                }
            });
        }
    }
    return b;
})();

（显然，您可以将其包装在一个函数中并重复使用。）

在模拟模块环境中，它不会像真正的那样预先创建属性，因此您可以使用代理（当然，如果要在ES2015之前的环境中运行该代理，则不会有Proxy ）：

const BLOGS = [BLOG1, BLOG2];
const BLOG = new Proxy({}, {
  get(target, propName, receiver) {
    const b = BLOGS.find(b => propName in b) || target;
    return Reflect.get(b, propName, receiver);
  }
});

然后， BLOG1添加到BLOG1和BLOG2属性仍然可以正确解析。

所有这一切的是一个可怕的很多的麻烦，只是为了避免搜索和替换下一提及。

---

但是：而不是像SLaks所说的那样导出BLOG ，而是导出类并导入它们。 使用适当的模块时，无需“命名空间对象”。

export { myClass1 };

和

export { myClass2 };

接着

import { myClass1 } from "file1.js";
import { myClass2 } from "file2.js";

您甚至可以按照定义的方式导出类：

export function myClass1() { /* ... */ }

或如果使用class符号：

export class myClass1 { /* ... */ }

跨多个文件将new BLOG.myClass1更改为new MyClass1是一个非常简单的搜索和替换。 在* nix上，您可以对它扔sed并执行整个目录树...

---

旁注：JavaScript中的压倒性约定是，构造函数（通常被称为“类”，例如，与new一起使用的函数）是使用大写的初始字符编写的。 例如， MyClass1和MyClass2 。

Answer 2

您需要通过以下方式使用导入

{BLOG as variable name} from file