JavaScript Module Exports Pattern From One File

Question

Folder structure:

├── app
├── index.js (start point in Webpack)
├── component
│   ├── Home──Home.js
|   ├──index.js
│

component/Home/Home.js has my class written like - export class Home extends React.Component {}

component/index.js i had exported like - export {Home} from './Home/Home'

and I am Importing in index.js (starting point) import {Home} from './components'

Its working for me and the changes I want which is not working

1. In component/Home/Home.js want to export like export default class Home extends React.Component {}

2. In component/index.js i want to export like export Home from './Home/Home'

3. I want to import in index.js starting point import Home from './components'

Answer 1

in Home

export default class Home extends React.Component {}

in component/index.js

export * from './Home/Home'

in index

import Home from './components'

Answer 2

Imports and exports are independent on file structure, however, you, of course, need to know the file structure because of paths in imports.

In component/Home/Home.js want to export like export default class Home extends React.Component {}

You can export default class with a keyword default:

export default class Home extends React.Component {
   // your code
}

If this for any reason doesn't work for you, you can still do this:

class Home extends React.Component {
   // your code
}

export default Home;

In component/index.js I want to export like export Home from ./Home/Home

It's hard to say if I don't see a code. I would expect there is also some Home class/function which you would like to export as default, then you can do this (or again the solution above):

export default const Home = () => {
   // your code
};

Or, again:

const Home = () => {
   // your code
};

export default Home;

I want to import in index.js starting point import Home from ./components.

Because of having default exports now, you can do that with this (you can always omit index.js from path when importing):

import Home from './components';

Answer 3

In your Home.js:

export class Home extends Component{ /* your code */ }

in index.js:

export { * as default } from './Home/Home'

in main file:

import Home from './components'

Note: In my knowledge all the three conditions you put cannot be met. Moreover, if you export Home as default from index then what about other components?

Answer 4

In order to export all the components you can use the following pattern in index.js

export Home from './Home'

In order for this to work you need to use babel-plugin-transform-export-extensions as this is not a current part of the ES specification.