最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to Re-Export Multiple Named Export and Multiple Default Export in index.js? - Stack Overflow

programmeradmin1浏览0评论

I'm trying to re-export in index.js the named exports in userActions.js namely create, update, delete and the default export in ScreenA.js and ScreenB.js.

I have found two useful references, but i'm still not sure which one in these examples is the correct solution to my case.

I would like to ask which of following 4 methods in index.js will work correctly when i import { create, update, delete, screenA, screenB } from './user'; ?

1)      export * from '.';

2)      export * from './userActions.js';
       export * from './ScreenA.js';
       export * from './ScreenB.js';

3)      export * from './userActions.js';
       export {ScreenA} from './ScreenA.js';
       export {ScreenB} from './Screenb.js';

4)      export * from './userActions.js';
       export {default as ScreenA} from './ScreenA.js';
       export {default as ScreenB} from './Screenb.js';

userActions.js

export const create = () => {}

export const update = () => {}

export const delete = () => {}

ScreenA.js

const ScreenA = () => ()
export default ScreenA;

ScreenB.js

const ScreenB = () => ()
export default ScreenB;

I'm trying to re-export in index.js the named exports in userActions.js namely create, update, delete and the default export in ScreenA.js and ScreenB.js.

I have found two useful references, but i'm still not sure which one in these examples is the correct solution to my case.

  • https://developer.mozilla/en-US/docs/web/javascript/reference/statements/export

  • https://www.digitalocean./munity/tutorials/react-index-js-public-interfaces

I would like to ask which of following 4 methods in index.js will work correctly when i import { create, update, delete, screenA, screenB } from './user'; ?

1)      export * from '.';

2)      export * from './userActions.js';
       export * from './ScreenA.js';
       export * from './ScreenB.js';

3)      export * from './userActions.js';
       export {ScreenA} from './ScreenA.js';
       export {ScreenB} from './Screenb.js';

4)      export * from './userActions.js';
       export {default as ScreenA} from './ScreenA.js';
       export {default as ScreenB} from './Screenb.js';

userActions.js

export const create = () => {}

export const update = () => {}

export const delete = () => {}

ScreenA.js

const ScreenA = () => ()
export default ScreenA;

ScreenB.js

const ScreenB = () => ()
export default ScreenB;
Share Improve this question edited Jul 30, 2020 at 8:06 kaizen asked Jul 30, 2020 at 8:01 kaizenkaizen 1,6384 gold badges31 silver badges53 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

Please take a look at my below code. As I understand, you have file user/index.js and some files in the same user folder and you want to export everything in user/index.js.

// In your "/user/index.js"
import { create, update, delete } from './userActions';
import screenA from './screenA';
import screenB from './screenB';

export {
  create,
  update,
  delete,
  screenA,
  screenB
};

// In some other module
import { create, update, delete, screenA, screenB } from './user';

A notable thing is, delete seem to be a reserved keyword in Javascript, you need to use another name. That's all.

Please feel free if I have misunderstanding or so.

4 is the only one that should work as is, other than the minor character casing typos and reserved word usage.

// This exports the named exports from './userActions.js', which
// in your case are `create`, `update`, and `delete`.
export * from './userActions.js';
// You don't have a named export in the following files, so the
// default export is being re-exported as a named export.
export { default as screenA } from './ScreenA.js';
export { default as screenB } from './Screenb.js';

Why I wouldn't go with the others:

// 1)
// I am not positive, but this seems recursive. When importing a directory, the file
// used is `index.js`, so I don't think `from '.'` would work in the index file.
export * from '.';
// 2)
export * from './userActions.js';
// `export *` re-exports named exports and you don't have a named export in either.
export * from './ScreenA.js';
export * from './ScreenB.js';
// 3)
export * from './userActions.js';
// './ScreenA.js' doesn't have an export named `ScreenA`
export {ScreenA} from './ScreenA.js';
// './ScreenB.js` doesn't have an export named `ScreenB`
export {ScreenB} from './Screenb.js';
发布评论

评论列表(0)

  1. 暂无评论