It turns out that ES6 modules can still be used in this way! (cheat sheet)

This is a cheat sheet showing the different ways to export and the corresponding ways to import. It can actually be divided into 3 types: name, default value and list.

// 命名导入/导出 
export const name = 'value'
import { name } from '...'

// 默认导出/导入
export default 'value'
import anyName from '...'

// 重命名导入/导出 
export { name as newName }
import { newName } from '...'

// 命名 + 默认 | Import All
export const name = 'value'
export default 'value'
import * as anyName from '...'

// 导出列表 + 重命名
export {
  name1,
  name2 as newName2
}
import {
  name1 as newName1,
  newName2
} from '...'

Next, let’s look at it one by one??

Naming method

The key here is to have a name.

export const name = 'value';

import { name } from 'some-path/file';

console.log(name); // 'value'

Default method

Use the default export and do not need any name, so we can name it whatever we want

export default 'value'

import anyName from 'some-path/file'

console.log(anyName) // 'value'

The default method does not use a variable name

export default const name = 'value';  
// 不要试图给我起个名字！

Name it Method and default method are used together

Naming method and Default method can be used together in the same file??

eport const name = 'value'
eport default 'value'

import anyName, { name } from 'some-path/file'

Export list

The third way is to export lists (multiple)

const name1 = 'value1'
const name2 = 'value2'

export {
  name1,
  name2
}

import {name1, name2 } from 'some-path/file'

console.log(
  name1,  // 'value1' 
  name2,  // 'value2' 
)

The important thing to note is that these lists are not objects. It looks like an object, but it's not. I also had this confusion the first time I took the module. The truth is that it's not an object, it's a list of exports

// Export list ≠ Object
export {
  name: 'name'
}

Renamed exports

Not happy with the export name? Not a big problem, you can rename it using the as keyword.

const name = 'value'

export {
  name as newName
}

import { newName } from 'some-path/file'

console.log(newName); // 'value'

// 原始名称不可访问
console.log(name); // ? undefined

Cannot use inline export with export list

export const name = 'value'

// 你已经在导出 name ，请勿再导出我
export {
  name
}

Rename import

The same rule also applies to import, we can use asKeyword renames it.

const name1 = 'value1'
const name2 = 'value2'

export {
  name1,
  name2 as newName2
}

Import all

export const name = 'value'

export default 'defaultValue'

import * as anyName from 'some-path/file'

console.log(anyName.name); // 'value'
console.log(anyName.default); // 'defaultValue'

Naming method vs default method

There has been a lot of debate about whether you should use the default export. Check out these 2 articles.

• Why I've stopped exporting defaults from my JavaScript modules
• GitLab RFC by Thomas Randolph

As with anything, there are no right or wrong answers. The right way is always the best way for you and your team.

Non-development terms named with default export

Suppose you owe a friend some money. Your friend said you can repay the money by cash or electronic transfer. Paying via EFT is just like named export because your name is attached to the transaction. So, if your friend is forgetful and starts asking you to pay back money, saying he didn't receive it. Here, you can simply show them proof of transfer since your name is on the payment. However, if you paid your friend back in cash (like default export), there is no proof. They can say that the 100 yuan at that time came from Xiaohong. There is no name on the cash, so they can say it's you or anyone else

So is it better to use electronic transfer (named export) or cash (default export) ?

It depends on whether you trust the friend??, Actually, this is not the right way to solve this dilemma. A better solution is not to put your relationship in that position, lest you risk jeopardizing the friendship, it's better to be honest with each other. Yes, this idea also applies to your choice of named export or default export. In the end, it is up to your team to decide which method is more friendly to the team, choose whichever method, after all, you are not fighting alone, but a group??

English original address: https ://puppet.com/docs/puppet/latest/cheatsheet_module.html

Author: Samantha Ming

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of It turns out that ES6 modules can still be used in this way! (cheat sheet). For more information, please follow other related articles on the PHP Chinese website!