Mention import and export these two import and export keywords, I believe you front-end development engineers must not be unfamiliar, JS modular from the beginning of the community incubated a variety of programs, to the final unified ES6 official modular program, from the contention of a hundred schools of thought to the world unified, Since then, we have been using the ES6 modular syntax for modular development, that is, we will talk about import and export today

This paper will directly discuss and exchange import and export, which will involve ES6 related knowledge. If you need to know ES6 related knowledge, you can read Teacher Ruan Yifeng’s ES6 introduction tutorial

Note also that one of the following two conditions must be met to use the import and export keywords:

  1. usewebpackWait for the packaging tool to process
  2. Write the code in<script type="module"></script>In the

This article will use the first way to deal with this problem, after all, modular writing in is a personal very not recommended practice, one of the module compatibility of this tag is concerned. Secondly, our modular development is based on NodeJS Webpack to do, so as to maximize the significance of modularization, and the webpack configuration is not discussed, after all, is not the focus of this article, we recommend you to use ready-made scaffolding tools to help us complete the configuration of WebPack. Give us a complete development environment, for example, a scaffolding tool commonly used by React developers in China: UmiJS from Ali

The import and export of default

Import and export can’t be separated in isolation, they come together, so first of all, let’s talk about import and export default, let’s create two files called im.js and ex.js, right, as the name implies, my predecessor, Im. js is responsible for importing files, and ex.js is responsible for exporting files

Direct import

We then write the following to the two files:

ex.js:

Const func = () => {console.log('func executed '); }; export default func;Copy the code

im.js:

import func from './ex';

func();
Copy the code

The command output is as follows:

Func performedCopy the code

What if we changed the name of the ex.js file to im.js?

import foo from './ex';

foo();
Copy the code

The result of program execution is the same as above, as for why, we first press not table, then explore down

Import through deconstruction

I believe many friends have also seen such an import way:

import { useState } from 'react';
Copy the code

{} in this way, is the ES6 deconstruction syntax, or the above two files, this time we make a change:

im.js:

import { func } from './ex';

func();
Copy the code

The code in the es.js file remains the same, but I’ll write it again for ease of reading:

ex.js:

Const func = () => {console.log('func executed '); }; export default func;Copy the code

At this point we find an error:

Object(...) is not a function

So why is it wrong? Let’s take a look:

First, we get the value by deconstructing it. We call it deconstructing assignment. For example, we write:

const obj = { a: 1, b: 2, c: 3 }; const { a } = obj; / /...Copy the code

To read a field/attribute from an object, let’s go back to our import statement:

import { func } from './ex';
Copy the code

Func: func: func: func: func: func: func: func: func

  1. this./exIs it an object
  2. Does it have a property calledfunc

To answer these two questions, we’ll go back to the code above that still executes after the name is changed:

import foo from './ex';

foo();
Copy the code

And the original code:

import func from './ex';

func();
Copy the code

Foo and func are both functions that can be called with a () at the end, and neither of them is a function name, because the function defined in ex.js is not called foo or func, but is defined with a variable called func. And then you assign a function to it, so foo and func are actually two variables, two variables that are assigned, and their value is a function, so how do you prove that? We can make the following modifications:

Im.js remains unchanged:

import func from './ex';

func();
Copy the code

ex.js:

Function func() {console.log('func executed '); } export default func;Copy the code

Function () {function ();} function () {function ();}

im.js:

import foo from './ex';

foo();
Copy the code

Ex.js remains unchanged:

Function func() {console.log('func executed '); } export default func;Copy the code

The program still works, and at this point we can answer the above two questions:

  1. this./exIs it an object

not

  1. Does it have a property calledfunc

There is no

Export the default summary

This keyword exports values, which can be received using any variable when importing

The import and export

Direct import

Let’s look at import and export, not export default, and modify the file as follows:

im.js:

import func from './ex';

func();
Copy the code

ex.js:

Export const func = () => {console.log('func executed '); };Copy the code

Error:

Object(...) is not a function

Before we get into this question, let’s talk about what happens when you export something like this:

ex.js:

Const func = () => {console.log('func executed '); }; export func;Copy the code

Syntax error:

Unexpected token, expected "{"

This is due to the ES6 feature where export can only be followed by a keyword or literal, such as export const… Or export {… }

Let’s go back to the error question, earlier

import { func } from './ex';

Import XXX from ‘./ex’; import XXX from ‘./ex’; The way of

Here we use import XXX from ‘./ex’; Instead of reporting an error, that is:

export default + import { func } from ‘./ex’; = > an error

export const + import func from ‘./ex’; = > an error

Also the same Object(…) Is not a function, while

export default + import func from ‘./ex’; => The system is running properly

This is because export default exports values, and import XXX from can be received with any variable, but we can see from the error result that we import an object

Export const + import {func} from ‘./ex’; => does it work normally? What if you export an object and then have a method called func in it?

Import through deconstruction

Give it a try:

im.js:

import { func } from './ex';

func();
Copy the code

ex.js:

Export const func = () => {console.log('func executed '); };Copy the code

We see that the program is working correctly, which means that our guess is correct. It also seems that when we use exprot const we are exporting an object, but is it? Let’s try it again: im.js:

import { func } from './ex';

func();
Copy the code

Make a change here in ex.js:

Const func = () => {console.log('func executed '); }; export { func };Copy the code

This is also possible, it works, but what if the export of a few more functions:

im.js:

import { func, func2 } from './ex';

func();
func2();
Copy the code

ex.js:

Export const func = () => {console.log('func executed '); }; Export const func2 = () => {console.log('func2 executed '); };Copy the code

Or:

ex.js:

Const func = () => {console.log('func executed '); }; Const func2 = () => {console.log('func2 executed '); }; export { func, func2 };Copy the code

Either way, it works

Export summary

At this point, we can be sure: export exports them into an object, then export the object, and import needs to deconstruct each property/method

Other USES

export default + export

You will see statements like this in your daily development:

import xxx, { x1, x2 } from 'xxxxx';
Copy the code

Such as:

import React, { useState, useEffect } from 'react';
Copy the code

From the previous discussion, we know that such an import statement imports a value and an object at the same time. We extract its attributes by deconstructing the assignment. The corresponding export is export default + export.

im.js:

import deFunc, { func, func2 } from './ex';

func();
func2();
deFunc();
Copy the code

ex.js:

Export const func = () => {console.log('func executed '); }; Export const func2 = () => {console.log('func2 executed '); }; Const defaultFunc = () => {console.log('defaultFunc executed '); }; export default defaultFunc;Copy the code

Note also that only one export default can be found in a file, otherwise an error will be reported if we write:

Export const func = () => {console.log('func executed '); }; Export const func2 = () => {console.log('func2 executed '); }; Const defaultFunc = () => {console.log('defaultFunc executed '); }; Const defaultFunc2 = () => {console.log('defaultFunc2 executed '); }; export default defaultFunc; export default defaultFunc2;Copy the code

An error will be reported:

Only one default export allowed per module.

Take the alias

Some of you may have read more than this:

import * as xxx from 'xxxx';
Copy the code

The as keyword is an alias. Here we can infer from the previous conclusion that the export code corresponding to such an import form should be written

First of all, export default is only allowed to have one module, and the exported value is a value that can be received by any variable. In this case, it is meaningless to take an alias, because we can receive any variable name we want, and it is unnecessary to take an individual name

In this case, only export is left, and then we will verify our conjecture:

im.js:

import * as actions from './ex';

actions.func();
actions.func2();
Copy the code

ex.js:

Export const func = () => {console.log('func executed '); }; Export const func2 = () => {console.log('func2 executed '); };Copy the code

When learning React, I first saw the concept of a single action in react. There are multiple actions in a file, so rename these actions to an alias and import them into the file.

import { func, func2 } from './ex';
Copy the code

I personally prefer to do a deconstruction at import time, so that the code looks clearer and we can import whichever one we need, rather than all at once

So far, the main content has talked with everyone finished, the last of the last to mention a little bit, about this some is not too common usage, is its forwarding usage, where is the specific ENCOUNTER I forget, only remember I made an exploration and record, here together with everyone to talk about

Other usage 2: Forward

Here we create another file: forward. Js

Forward variable

im.js:

import { func } from './forward';

func();
Copy the code

forward.js:

export { func } from './ex';
Copy the code

ex.js:

Export const func = () => {console.log('func executed '); }; Export const func2 = () => {console.log('func2 executed '); };Copy the code

Expor from can be used to complete our forwarding operation

Forward value

Since there are forward variables, there are also operations on forward values

im.js:

import deFunc from './forward';

deFunc();
Copy the code

forward.js:

export default from './ex';
Copy the code

ex.js:

Export const func = () => {console.log('func executed '); }; Export const func2 = () => {console.log('func2 executed '); }; Const defaultFunc = () => {console.log('defaultFunc executed '); }; export default defaultFunc;Copy the code

This is the syntax for forwarding values, so keeping our export const has no effect on the operation of the program.

export default from './ex';
Copy the code

Vs Code will mistake this for TS and will prompt you with a syntax error. In this case, we can make a change:

export { default } from './ex';
Copy the code

I’ll just write it this way

Instead of writing

The operation of forwarding is actually import and re-export, that is, it can be done by importing and exporting syntax, for example:

Forwarding variable:

forward.js:

import { func } from './ex';

export const a = func;
Copy the code

When introduced:

im.js:

import { a } from './forward';

a();
Copy the code

When forwarding values:

forward.js:

import deFunc from './ex';

export default deFunc;
Copy the code

When introduced:

im.js:

import deFunc from './forward';

deFunc();
Copy the code

For more detailed usage, see the following article:

export const vs. export default in ES6

ECMAScript Proposal: export default from