如何為多個導入的模塊使用單個命名空間？

Question

是否可以為多個導入的模塊使用一個命名空間？，我想做這樣的事情：

import {moduleA, moduleB, moduleC} as ModuleManager from 'AllMyModules.js';

所以我可以避免沖突，例如具有相同名稱的模塊和類函數，例如：

moduleA = () => {
}

doSomething = () => {
   ModuleManager.moduleA();
   moduleA();
}  

當然這還不是全部，給模塊一個命名空間還可以提高可讀性，並幫助我知道函數或模塊來自哪里以及用於什么目的。

請注意，我已經知道：

import * as ModuleManager from 'AllMyModules.js'  

這不是我要找的！，我不希望ModuleManager包含所有內容，原因有以下三個：
1-當我指定像{moduleA, moduleB, moduleC}這樣的模塊時，我一眼就能看出這個文件是什么類型的模塊。
2-它阻止我使用我不應該錯誤的模塊（特別是當你的模塊是一些獲取某些數據的服務時，很容易出錯）
3-我認為只導入我需要的東西更輕，有助於減少捆綁包的大小？，我不確定這個。

Answer 1

您可以使用*導入，盡管這將導入整個AllMyModules命名空間，而不僅僅是您選擇的命名空間：

import * as ModuleManager from 'AllMyModules.js';
// ...
ModuleManager.moduleA();

如果你想要一個只有一些模塊的對象，而不是全部，並且沒有一個導出是可變的（無論如何導出都不應該），那么為了保持代碼干燥，在導入后將你想要的內容提取到一個新對象中：

import * as ModuleManagerNS from 'AllMyModules.js';
const ModuleManager = {};
for (const prop of ['moduleA', 'moduleB', 'moduleC']) {
  ModuleManager[prop] = ModuleManagerNS[prop];
}
ModuleManager.moduleA();

如果您想避免使用import * ，您還可以在導入時重命名導入以避免名稱沖突，盡管它看起來很濕：

import {moduleA as moduleManagerModuleA, moduleB as moduleManagerModuleB, moduleC as moduleManagerModuleC} from 'AllMyModules.js';
const ModuleManager = {
  moduleA: moduleManagerModuleA,
  moduleB: moduleManagerModuleB,
  moduleC: moduleManagerModuleC,
}

我非常喜歡使用import *代替。

我認為只導入我需要的東西更輕，有助於減少捆綁包的大小？，我不確定這個。

它可以。 如果您的導出模塊將完全未使用，這可以幫助 tree-shaking ，盡管您必須像上面的代碼片段一樣冗長地列出每個導出名稱。