Es6 Exporting/Importing in Index File

ES6 exporting/importing in index file

You can easily re-export the default import:

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

There also is a proposal for ES7 ES8 that will let you write export Comp1 from '…';.

Is my ES6 import reading from index file or directly from the exporting file?

1. Each file can only have one default export. It can also not have name classes. Both conditions are met so it should be valid. There is more information about options here: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

2. There seems to be a typo in the tree structure provided. The path src/models/MyModel.ts does not exist, but src/MyModel/index.ts does. Assuming it is src/models/MyModel and the directory exists, the main problem is that the path (src/models/MyModel) is not relative. When using an absolute path it will always look into the node_modules, for the path to be relative it would need to start with ./ or ../, in this case: ./models/MyModel, in which case it would import MyModel.ts file.

How to export all components in index.js?

In your index.js you can just directly do

export {default as Header} from "../components/Header/Header";
export {default as Menu} from "../components/Menu/Menu";

In this way we're importing the default export from the module of your choice and exporting it as a namespaced module.

Now you can import components as

import {Header, Menu} from "../components";

Use index file to export .tsx modules

You can definitely use the same style of having an index file to group up exports for a whole folder. The simplest way around your problem would be to omit the file extension (assuming you only have one "index" file in the folder).

For example, let's say you have a component in 'common/Example.tsx':

import React from 'react'

export const Example = () => (<div>I'm an example component</div>)

You can then export it in an index file 'common/index.tsx':

export { Example } from './Example'

And import it from somewhere else, e.g. 'App.tsx':

import { Example } from './common'

export components from index file

Have you tried importing as import { Button } from 'shared/components';?

For reference, the current codebase I work with has a similar structure for stores (flux stores) and this pattern works.

An example from the codebase: import { ClickStore } from 'stores';.

node.js es6 export / import with index.js

The import and export is not natively supported by Node.

You need to use a transpiler like Babel if you want to use that syntax.

The Node way is to use module.exports and require().

See this for more info:

• Is it ok to use Babel npm package for node.js server application
• javascript - Why is there a spec for sync and async modules?
• What is the syntax to export a function from a module in Node.js?

Update

Here:

export {default as App} from './src/lib/test.js'

you're not exporting "from" - you import from.

Maybe you meant:

import App from './src/lib/test.js';

and then you can export that in turn.

With normal Node syntax it would be:

src/lib/test.js

class Test {
  // ...
}
module.exports = { Test };

src/index.js

const { Test: App } = require('./lib/test.js');

examples/example.js

const { App } = require('../src');

Also note that according to your directory structure your paths are incorrect: it should be ./lib/test.js instead of ./src/lib/test.js and ../src instead of ./../..

Export all files in `index.ts`

Since you are using TypeScript, why not just use the paths in TsConfig like described here?

---

Related Topics