Simplify import statements

Question

According to question Is it possible to import... I've tried to simplify my import statements but debugger stops at Attempted import error: 'TaskDropdown' is not exported from './oddments'.

oddements/index.js

export * from './TaskBadge';
export * from './TaskDeadline';
export * from './TaskDropdown';
export * from './TaskInfoRow';
export * from './TaskStatusBadge';

TaskDropdown.js

export default TaskDropdown;

somehwere else

import { TaskStatusBadge, TaskInfoRow, TaskDropdown } from './oddments';

Possible walkaround is by using import/export at the same file.

import TaskBadge from './TaskBadge';
export {TaskBadge}

What could be wrong? Is the answer from mentioned thread correct?

Answer 1

您需要编写导出，如下所示

export { default as TaskDropdown } from './TaskDropdown';

Answer 2

Multiple export from the same file can be done in two following ways:

1st Way:
 export function1 () {}
 export function2 () {}
 export function3 () {}

2nd Way:
export { function1, function2, function 3} from abc.js

Then you use import in the following two ways:

1st Way:
import { function 1, function2, function3 } from './abc'

//Then use it like:
function1();

2nd Way:
import * as abc from './abc'

//Then use it like:
abc.function1();