¿Puedo desestructurar un objeto de exportación predeterminado al importar?

No. Solo puede desestructurar un objeto después de importarlo a una variable.

Tenga en cuenta que las importaciones/exportaciones tienen una sintaxis y una semántica que son completamente diferentes de las de los literales de objetos/patrones de objetos. Lo único común es que ambos usan llaves y sus representaciones abreviadas (solo con nombres de identificadores y comas) son indistinguibles.

¿La siguiente sintaxis de importación es JS válida?

 import { foo, bar } from './export-file';

Sí. Importa dos exportaciones con nombre del módulo. Es una notación abreviada para

 import { foo as foo, bar as bar } from './export-file';

lo que significa "declarar un enlace foo y dejar que haga referencia a la variable que se exportó con el nombre foo del export-file , y declarar una bar de enlace y dejar que haga referencia a la variable que se exportó con el nombre de la bar del export-file ".

Dada la siguiente sintaxis de exportación (valor predeterminado de exportación)

 export default { foo, bar };

¿La importación anterior funciona con esto?

No. Lo que hace es declarar una variable invisible, inicializarla con el objeto { foo: foo, bar: bar } y exportarla con el nombre default .
Cuando este módulo se importa como export-file , no se usará el nombre default y no se encontrarán los nombres foo y bar , lo que genera un SyntaxError .

Para solucionar esto, debe importar el objeto exportado por defecto:

 import { default as obj } from './export-file'; const {foo: foo, bar: bar} = obj; // or abbreviated: import obj from './export-file'; const {foo, bar} = obj;

O mantiene su sintaxis de importación y en su lugar usa exportaciones con nombre:

 export { foo as foo, bar as bar }; // or abbreviated: export { foo, bar }; // or right in the respective declarations: export const foo = …; export function bar() { ... }

¿Puedo desestructurar un objeto de exportación predeterminado al importar?

Sí, con importaciones dinámicas

Para agregar a la respuesta de Bergi que aborda las importaciones estáticas, tenga en cuenta que en el caso de las importaciones dinámicas, dado que el módulo devuelto es un objeto, puede usar la asignación de desestructuración para importarlo:

 (async function () { const { default: { foo, bar } } = await import('./export-file.js'); console.log(foo, bar); })();

por qué esto funciona

import opera de manera muy diferente en diferentes contextos. Cuando se usa al comienzo de un módulo, en el formato import ... from ... , es una importación estática , que tiene las limitaciones discutidas en la respuesta de Bergi.

Cuando se usa dentro de un programa en la forma import('./filename.js') , se considera una importación dinámica . La importación dinámica funciona de manera muy similar a una función que se resuelve en un objeto (como una combinación de exportaciones con nombre y la exportación predeterminada, que se asigna a la propiedad default ), y se puede desestructurar como tal.

En el caso del ejemplo del interrogador, await import('./export-file.js') se resolverá en:

 { default: { foo: ..., bar: function bar() {...} } }

Desde aquí, puede usar la desestructuración anidada para asignar directamente foo y bar :

 const { default: { foo, bar } } = await import('./export-file.js');