This is the 14th day of my participation in the August More Text Challenge. For details, see:August is more challenging

preface

Exports/module.exports/export/export

In one module, the variables, functions and classes declared internally cannot be accessed in another module. If you need to access them, you need to import them through the es6 instructions export and export default, and then import them using import.

The following code belongs to es6 syntax. If node needs to identify the file as an ES6 module, you need to name the file xxx.mjs

If your node version is younger than V13.2.0, run this command with — patential-modules, otherwise it will report Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

node --experimental-modules  xxx.mjs
Copy the code

export

Export, export to an external interface, can be a variable, function, class, etc.

Use the following:

// a.mjs
export var name = 'the answer cp3'
export function fn () {
  console.log(this)}export class A {}// When importing
import {name, fn, A} from './a.mjs'
Copy the code

But when you export, you can’t just export a value, that’s going to get an error

var  name = 'the answer cp3'
export name / / an error

function fn () {
  console.log(this)}export fn / / an error
Copy the code

Alternatively, you can use {} to associate external interfaces with internal variables.

var name = 'the answer cp3'
export { name } 

function fn () {
  console.log(this)}export {fn} 
Copy the code

Export can also be renamed using as

// a.mjs
var name = 'the answer cp3'
export { name as newName } // Rename to newName

// When importing
import { newName } from './a.mjs'
Copy the code

export default

The export default directive does not need to write {} when importing a module. It can be any name that represents the default export.

Use the following:

// a.mjs
var name = 'the answer cp3'
export default name

// import anyName can be anyName
import anyName from './a.mjs'
Copy the code

In this example, you may wonder why export Default can export a variable value.

That’s because export Default is essentially exporting a variable with a property default, and you can assign a value to that property, the value of the variable, the name of the function.

But unlike export, it can export a value

export default var name = 'the answer cp3' / / an error

function fn () {
  console.log(this)}export default fn / / right

var name = 'the answer cp3'
export default name
/ / is equivalent to
export {name as default}

// When importing
import name from './a.mjs'

/ / is equivalent to
import {default as name} from './a.mjs'
Copy the code

In addition, export Default can only be used once, which means default is a constant and cannot be assigned repeatedly.

import

As mentioned above, modules are export,export default first, and then import using import

It is usually used in conjunction with export and export Default. If export is used, {} is required for import. If export default is used, {} is not required.

// a.mjs
export var name = 'the answer cp3'
var age = 18
export default age

/ / import
import age, {name} from './a.mjs'
Copy the code

Then import can also be renamed using as, as shown in the above code

import age, { name as name1 } from './a.mjs'
Copy the code

You can’t rename the age, because you can call it anything you want

Name will not be used after the name is renamed

Import variables are constants and cannot be changed (and it is not recommended)

import age, { name as name1 } from './a.mjs'

age = 17 / / an error
Copy the code

We can also use * to represent the entire exported object, which is usually used in conjunction with as renaming

Continue with the example above:

import * as info from './a.mjs'
console.log(info) // {default: 18, name: 'answer cp3'}
Copy the code

conclusion

Above is my summary of the ES6 export and export default directive, the above code hope you have time to tap, deepen the impression.

Thank you for reading.