Skip to main content

Return to Answer

Active reading. Made compliant with the Jon Skeet Decree - <https://twitter.com/PeterMortensen/status/976400000942034944>.
Source Link
Peter Mortensen
Peter Mortensen
  • 31.4k
  • 22
  • 110
  • 134

Summary ES6ES6 modules:

exportsExports:

You have 2two types of exports:

  1. Named exports
  2. Default exports, Max 1a maximum one per module

Syntax:

// Module A export const importantData_1 = 1; export const importantData_2 = 2; export default function foo () {}

Imports:

The type of export (i.e., named or default exports) affects how to import something:

  1. For a named export we have to use curly braces and the exact name as the declaration (i.e. variable, function, or class) which was exported.
  2. For a default export we can choose the name.

Syntax:

// Module B, imports from module A which is located in the same directory import { importantData_1 , importantData_2 } from './A'; // forFor our named imports // syntaxSyntax single named import:  // import { importantData_1 }  // forFor our default export (foo), the name choice is arbitrary import ourFunction from './A';

Things of interest:

  1. Use a comma separated-separated list within curly braces with the matching name of the export for named export.
  2. Use a name of your choosing without curly braces for a default export.

Aliases:

Whenever you want to rename a named import this is possible via aliases. The syntax for this is the following:

import { importantData_1 as myData } from './A';

Now we have imported importantData_1 but, but the identifier is myData instead of importantData_1.

Summary ES6 modules:

exports:

You have 2 types of exports:

  1. Named exports
  2. Default exports, Max 1 per module

Syntax:

// Module A export const importantData_1 = 1; export const importantData_2 = 2; export default function foo () {}

Imports:

The type of export (i.e. named or default exports) affects how to import something:

  1. For a named export we have to use curly braces and the exact name as the declaration (i.e. variable, function, or class) which was exported.
  2. For a default export we can choose the name.

Syntax:

// Module B, imports from module A which is located in the same directory import { importantData_1 , importantData_2 } from './A'; // for our named imports // syntax single named import:  // import { importantData_1 }  // for our default export (foo), the name choice is arbitrary import ourFunction from './A';

Things of interest:

  1. Use a comma separated list within curly braces with the matching name of the export for named export.
  2. Use a name of your choosing without curly braces for a default export.

Aliases:

Whenever you want to rename a named import this is possible via aliases. The syntax for this is the following:

import { importantData_1 as myData } from './A';

Now we have imported importantData_1 but the identifier is myData instead of importantData_1.

Summary ES6 modules:

Exports:

You have two types of exports:

  1. Named exports
  2. Default exports, a maximum one per module

Syntax:

// Module A export const importantData_1 = 1; export const importantData_2 = 2; export default function foo () {}

Imports:

The type of export (i.e., named or default exports) affects how to import something:

  1. For a named export we have to use curly braces and the exact name as the declaration (i.e. variable, function, or class) which was exported.
  2. For a default export we can choose the name.

Syntax:

// Module B, imports from module A which is located in the same directory import { importantData_1 , importantData_2 } from './A'; // For our named imports // Syntax single named import: // import { importantData_1 } // For our default export (foo), the name choice is arbitrary import ourFunction from './A';

Things of interest:

  1. Use a comma-separated list within curly braces with the matching name of the export for named export.
  2. Use a name of your choosing without curly braces for a default export.

Aliases:

Whenever you want to rename a named import this is possible via aliases. The syntax for this is the following:

import { importantData_1 as myData } from './A';

Now we have imported importantData_1, but the identifier is myData instead of importantData_1.

edited body
Source Link
skywinder
skywinder
  • 21.5k
  • 15
  • 99
  • 123

Summary ES6 modules:

exports:

You have 2 types of exports:

  1. Named exports
  2. Default exports, Max 1 per module

Syntax:

// Module A export const importantData_1 = 1; export const importantData_1importantData_2 = 2; export default function foo () {}

Imports:

The type of export (i.e. named or default exports) affects how to import something:

  1. For a named export we have to use curly braces and the exact name as the declaration (i.e. variable, function, or class) which was exported.
  2. For a default export we can choose the name.

Syntax:

// Module B, imports from module A which is located in the same directory import { importantData_1 , importantData_2 } from './A'; // for our named imports // syntax single named import: // import { importantData_1 } // for our default export (foo), the name choice is arbitrary import ourFunction from './A';

Things of interest:

  1. Use a comma separated list within curly braces with the matching name of the export for named export.
  2. Use a name of your choosing without curly braces for a default export.

Aliases:

Whenever you want to rename a named import this is possible via aliases. The syntax for this is the following:

import { importantData_1 as myData } from './A';

Now we have imported importantData_1 but the identifier is myData instead of importantData_1.

Summary ES6 modules:

exports:

You have 2 types of exports:

  1. Named exports
  2. Default exports, Max 1 per module

Syntax:

// Module A export const importantData_1 = 1; export const importantData_1 = 2; export default function foo () {}

Imports:

The type of export (i.e. named or default exports) affects how to import something:

  1. For a named export we have to use curly braces and the exact name as the declaration (i.e. variable, function, or class) which was exported.
  2. For a default export we can choose the name.

Syntax:

// Module B, imports from module A which is located in the same directory import { importantData_1 , importantData_2 } from './A'; // for our named imports // syntax single named import: // import { importantData_1 } // for our default export (foo), the name choice is arbitrary import ourFunction from './A';

Things of interest:

  1. Use a comma separated list within curly braces with the matching name of the export for named export.
  2. Use a name of your choosing without curly braces for a default export.

Aliases:

Whenever you want to rename a named import this is possible via aliases. The syntax for this is the following:

import { importantData_1 as myData } from './A';

Now we have imported importantData_1 but the identifier is myData instead of importantData_1.

Summary ES6 modules:

exports:

You have 2 types of exports:

  1. Named exports
  2. Default exports, Max 1 per module

Syntax:

// Module A export const importantData_1 = 1; export const importantData_2 = 2; export default function foo () {}

Imports:

The type of export (i.e. named or default exports) affects how to import something:

  1. For a named export we have to use curly braces and the exact name as the declaration (i.e. variable, function, or class) which was exported.
  2. For a default export we can choose the name.

Syntax:

// Module B, imports from module A which is located in the same directory import { importantData_1 , importantData_2 } from './A'; // for our named imports // syntax single named import: // import { importantData_1 } // for our default export (foo), the name choice is arbitrary import ourFunction from './A';

Things of interest:

  1. Use a comma separated list within curly braces with the matching name of the export for named export.
  2. Use a name of your choosing without curly braces for a default export.

Aliases:

Whenever you want to rename a named import this is possible via aliases. The syntax for this is the following:

import { importantData_1 as myData } from './A';

Now we have imported importantData_1 but the identifier is myData instead of importantData_1.

Source Link
Willem van der Veen
Willem van der Veen
  • 37.1k
  • 19
  • 208
  • 178

Summary ES6 modules:

exports:

You have 2 types of exports:

  1. Named exports
  2. Default exports, Max 1 per module

Syntax:

// Module A export const importantData_1 = 1; export const importantData_1 = 2; export default function foo () {}

Imports:

The type of export (i.e. named or default exports) affects how to import something:

  1. For a named export we have to use curly braces and the exact name as the declaration (i.e. variable, function, or class) which was exported.
  2. For a default export we can choose the name.

Syntax:

// Module B, imports from module A which is located in the same directory import { importantData_1 , importantData_2 } from './A'; // for our named imports // syntax single named import: // import { importantData_1 } // for our default export (foo), the name choice is arbitrary import ourFunction from './A';

Things of interest:

  1. Use a comma separated list within curly braces with the matching name of the export for named export.
  2. Use a name of your choosing without curly braces for a default export.

Aliases:

Whenever you want to rename a named import this is possible via aliases. The syntax for this is the following:

import { importantData_1 as myData } from './A';

Now we have imported importantData_1 but the identifier is myData instead of importantData_1.