ES6 Module Import and export

  • Make a list of the most common ones that you can handle in most situations

Default export vs. default import

grammar

Export default {name, age, gender} import person from ‘path’

Pay attention to

  1. Export Defult can be used only once in each module
  2. No code can be written after export defult

Export on demand versus import on demand

grammar

export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {} < = >export { s1, s2, say }


import { s1, s2 as two, say} from 'path'
Copy the code

Pay attention to

  1. On-demand exports can be used multiple times per module
  2. The name of the member imported on demand must be the same as that exported on demand
  3. When importing on demand, you can rename it using the AS keyword
  4. On-demand imports can be used with default imports

Direct import

  • If you simply want to execute the code in a module without obtaining the outward shared members of the module, you can import and execute the module code directly

import './index.js'

Import and import

  • You may need to use this syntax in projects where you need a transit file to handle imports and exports centrally
export default {name: 'NavBar'}

export { default as NavBar} from 'path' // Import and export
Copy the code
  • Of course, you can substitute another solution, as long as it works