javascript - 从 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

So, I've added export {BLOG} to these files, but how can I import BLOG multiple times?

您必须为它们使用不同的导入绑定(bind):

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 可能不会立即完全填充。使用真正的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 和 BLOG2 的属性仍然会得到正确解析。

所有这些都是非常多的麻烦，只是为了避免接下来提到的搜索和替换。

---

但是: 而不是导出 BLOG，as SLaks says ，导出类，然后导入类。当您使用适当的模块时，不需要“命名空间对象”。

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。