Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use module in ES6". In daily operation, I believe many people have doubts about how to use module in ES6. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use module in ES6"! Next, please follow the editor to study!

This is a cheat sheet that shows the different export methods and the corresponding import methods. It can actually be divided into three types: name, default value and list?

/ / named import / export export const name = 'value' import {name} from'...'/ / default export / import export default 'value' import anyName from'...'/ / rename import / export export {name as newName} import {newName} from '... / / name + default | Import All export const name =' value' export default 'value' import * as anyName from'... / / Export list + rename export {name1 Name2 as newName2} import {name1 as newName1, newName2} from '...'

Next, let's take a look at one by one.

Naming mode

The key here is to have a name.

Export const name = 'value'; import {name} from' some-path/file'; console.log (name); / / 'value'

Default mode

Using the default export does not require any name, so we can name it freely.

Export default 'value' import anyName from' some-path/file' console.log (anyName) / / 'value'

Variable names are not used by default

Export default const name = 'value'; / / Don't try to give me a name!

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 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')

It is important to note that these lists are not objects. It looks like an object, but this is not the case. I also had this kind of confusion when I first learned the module. The truth is that it's not an object, it's an exported list.

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

Renamed export

Not satisfied with the export name? It's not a big problem, and 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' / / original name inaccessible console.log (name); / / ❌ undefined

You cannot use inline exports with export lists

Export const name = 'value' / / you are already exporting name ☝️, please do not export my export {name}

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} 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 mode

There has been a lot of debate about whether the default export should be used.

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

Non-development terms for naming and default export

Suppose you owe your friend some money. Your friend said that the money could be repaid by cash or electronic money transfer. Payment by electronic money transfer 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 the money, say he didn't receive the money. Here, you can simply show them the transfer certificate, because your name is in the payment. But if you repay a friend's money in cash (like default export), there is no evidence. They can say that the 100 yuan at that time came from Xiao Hong. There is no name on the cash, so they can be said to be you or anyone?

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

It depends on whether you trust a friend or not. In fact, this is not the right way to solve this problem. A better solution is not to put your relationship in that position, lest you risk endangering your friendship, and it's best 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 way is more friendly to the team. After all, you are not fighting alone, but a group.

At this point, the study on "how to use module in ES6" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.