Module cheat sheet in ES6, you may know that modules can still be used like this!

Author: Samantha Ming
Translator: Frontend Xiaozhi
Source: medium

If you have dreams and dry goods, search on for 160d2879ca3bde [Daily Move to the World] Follow the brushing wisdom who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

This is a cheat sheet showing different export methods and corresponding import methods. 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 see 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'

everyone said that there is no project to write on the resume, so I helped you find a project and also included [Building Tutorial] .

Default way

Use the default export, no name is needed, so we can name it whatever you want?

export default 'value'

import anyName from 'some-path/file'

console.log(anyName) // 'value'

❌ The default method does not use variable names

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

The naming method and the default method are used together

naming methods 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 the list (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 is not. When I first studied the module, I also had this kind of confusion. The truth is that it is not an object, it is an export list

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

Renamed export

Not satisfied with the export name? The problem is not big, you can use the a s keyword to rename it.

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
}

Everyone said that there is no project to write on the resume, so I helped you find a project and also included [Building Tutorial] .

Rename import

The same rules apply to imports, we can rename it as

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

export {
  name1,
  name2 as newName2
}

import {
  name1 as newName1,
  newName2
} from '...'

console.log(newName1); // 'value1'
console.log(newName2); // 'value2'

❌
name1; // undefined
name2; // undefined

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 the default export should be used. Check out these 2 articles.

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

Like anything, there is no right or wrong answer. The right way is always the best way for you and your team.

Naming and default exported non-development terms

Suppose you owe a friend some money. Your friend said that you can repay the money by cash or electronic transfer. Payment by electronic transfer is like named export because your name is already attached to the transaction. Therefore, if your friend is forgetful and starts asking you to pay back the money, saying that he has not received the money. Here, you can simply show them the proof of transfer because your name is in the payment. However, if you pay a friend's money in cash (like default export ), there is no evidence. They can say that the 100 yuan at the time came from Xiaohong. There is no name on the cash, so can they say that it is you or anyone?

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

It depends on whether you trust a friend? In fact, this is not the right way to solve this problem. The better solution is not to put your relationship in this position, so as not to risk the friendship and endanger the friendship, it is better to be honest with each other. Yes, this idea also applies to whether you choose named export or default export . In the end, it is up to your team to decide, which method is more friendly to the team, and whichever method you choose. After all, you are not fighting alone, but as a group?

Talents’ [Three Lian] is the biggest motivation for Xiaozhi to keep sharing. If there are any errors or suggestions in this blog, we welcome talents to leave a message. Finally, thank you for watching.

---

Original: https://puppet.com/docs/puppet/latest/cheatsheet_module.html

code is deployed, the possible bugs cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

---

communicate with

The article is continuously updated every week. You can search for [Daily move to the world] read it for the first time, reply [Benefits] has multiple front-end videos waiting for you, this article GitHub https://github.com/qq449245884/xiaozhi has been included, welcome to Star.