Translated by Samantha Ming

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

This is a cheat sheet showing the different export methods and corresponding import methods. It actually falls into three types: name, default, and list 👍

// Name the import/exportexport const name = 'value'
import { name } from '... '// Export/import by defaultexport default 'value'
import anyName from '... '// Rename the import/exportexport { name as newName }
import { newName } from '... '/ / name + default | Import Allexport const name = 'value'
export default 'value'
import * as anyName from '... '// Export list + renameexport {
  name1,
  name2 as newName2
}
import {
  name1 as newName1,
  newName2
} from '... '
Copy the code

Next, let’s look at 🤓 one by one

naming

The key here is to have a name.

export const name = 'value';
Copy the code
import { name } from 'some-path/file';

console.log(name); // 'value'
Copy the code

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

The default mode

Using the default export, you don’t need any name, so we can just name it 👏

export default 'value'
Copy the code
import anyName from 'some-path/file'

console.log(anyName) // 'value'
Copy the code

❌ By default, variable names are not used

export default const name = 'value'; // Don't try to give me a name!Copy the code

The naming mode is used together with the default mode

The naming and default methods can be used together with 🤝 in the same file

eport const name = 'value'
eport default 'value'
Copy the code
import anyName, { name } from 'some-path/file'
Copy the code

The export list

The third way is to export lists (multiple)

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

export {
  name1,
  name2
}
Copy the code
import {name1, name2 } from 'some-path/file'

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

It is important to note that these lists are not objects. It looks like an object, but it’s not. This confusion occurred to me the first time I studied a module. The truth is that it’s not an object, it’s an exported list

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

Renamed export

Not happy with the export name? It’s not a problem, you can rename it using the AS keyword.

const name = 'value'

export {
  name as newName
}
Copy the code
import { newName } from 'some-path/file'

console.log(newName); // 'value'// The original name cannot access console.log(name); / / ❌ undefinedCopy the code

❌ cannot use inline exports with export lists

export const name = 'value'// You are exporting name ☝️, please do not export meexport {
  name
}
Copy the code

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Rename import

The same rule applies to imports, which we can rename using the AS keyword.

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

export {
  name1,
  name2 as newName2
}
Copy the code
import {
  name1 as newName1,
  newName2
} from '... '

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

❌
name1; // undefined
name2; // undefined
Copy the code

Import all

export const name = 'value'

export default 'defaultValue'
Copy the code
import * as anyName from 'some-path/file'

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

Naming mode vs default mode

There has been a lot of debate about whether you should use the default export. Check out these two 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.

Name non-development terms with default exports

Suppose you owe a friend some money. Your friend said you could pay him back in cash or by efT. Payment by EFT is just like named export because your name has been attached to the transaction. So if your friend is forgetful and starts asking you to pay him back, say he didn’t get the money. Here, you can simply show them proof of transfer because your name is in the payment. However, if you repay a friend in cash (as is the case with default Export), there is no proof. They could say the $100 came from Xiao Hong. There is no name on the cash, so they can be you or anyone 😵

So is it better to use e-transfer or default export in cash?

It depends on whether you trust a friend 🤔, in fact, this is not the right way to solve this difficult problem. A better solution is not to put your relationship in that position and risk jeopardizing the friendship, and it’s better to be honest with each other. Yes, this idea also applies if you choose named export or default export. Ultimately it depends on your team to decide, which way is more friendly to the team, choose which, after all, you are not a person in the fight, but a group 😄

Talented people’s [three] is the biggest power of wisdom to share, if there is any mistake or suggestion in this blog, welcome talented people to leave a comment, finally, thank you for watching.

Original text: puppet.com/docs/puppet…

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

communication

This article continues to update every week, you can wechat search “big move the world” the first time to read, reply [welfare] there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.