ES6 Javascript在多个名称下导入相同的js文件

Question

我正在使用ES6，我想将同一个文件导入为两个不同的名称。

import Contact from './Grid'
import Account from './Grid'

有没有一种方法可以让联系人和帐户在没有webpack多次导入的情况下命名网格？

Answer 1

  

没有webpack多次导入它？

使用两个单独的import语句将不会多次执行该文件。文件加载一次后，其缓存的导出值将用于以后的调用。鉴于此，将其归为一个陈述的唯一理由是潜在的可读性改进。也就是说，要回答你的问题，你可以做到

import { 
  default as Contact,
  default as Account,
} from './Grid';

如果你愿意的话。你也可以做

import Contact from './Grid'
const Account = Contact;

请注意，在模块中存在循环依赖项的情况下，它不会完全完全。

Answer 2

如果在Grid文件中导出所需的对象/功能/等。作为默认导出（见下文），您可以在导入时使用所需的任何名称。 Grid是一个函数的例子是：

//Grid file
export default function Grid() {
  // your Grid info
}

和

//import file
import Contact from './Grid'
import Account from './Grid'