将组件导出为默认和常规

Question

I've seen in numerous sites, but specifically within libraries like Vuetify , there are these index.ts files that are exporting the same component as default and just regular(?) exports.

import Component from './Component'

export { Component }
export default Component 

What is the point of exporting the same component twice, albeit, differently?

Answer 1

Actually it just helps the user to import things in the way he or she wants. They can choose to import it:

import { foo } from "./bar"

or

import foo from "./bar"

Answer 2

Functionally , there's not much difference. Anything you can do with a default export, you can also do with a named export, with very slight tweaks to the code.

I think this may be done so that when the library is used in others' codebases, it can be used while conforming to the style of that codebase .

For example, there may be a codebase that tries to always use named imports and exports, in which case they could use import { Component } . Or there might be one which always tries to use default imports and exports.

Using both named and default exports for the same thing allows more flexibility in how the consumers of the library use it.

It might also be done so there's one less thing for consumers to worry about - you don't have to keep in mind "Remember, this library always uses NAMED EXPORTS" or "Remember, this library always uses DEFAULT EXPORTS" - if either will work, that's one less thing to worry about.