First, it is recommended to take a close look at the Module syntax for es6’s introduction.

I want to make a relatively important point:

  • Each JS file is independent of each other. It is a separate filemoduleAnd the output withexport, the input isimport
  • exportYou’re exporting variables
  • export defaultThe exported value is a concrete value
  • export var a=1The equivalent ofvar a=1; export { a }
  • export default 1The equivalent ofvar a=1; export { a as default}, amoduleThere can only be onedefault
  • exportandimportOnly at the top level scope
  • withasYou can rename variables
  • importThe variable of theta is going to be variable promoted, so no matter where it’s written, it’s going to be parsed first, right
  • import {a,b} from './a'.exportThe structure that goes out is{a,b}So the correspondingimportUse is{a,b}
  • import a from './a'.export defaultI’m exporting a value,importYou can assign the value to any variable, a/b/c, etc
  • import * as all from './a', take all the export in A, becauseexport {a}So here all is{a}And becauseexport defaultIt is also a kind ofexportSo all is essentially{a,default}
  • importBecause the variable is someone else’s variable, so can only read, not write
  • export {a} from './a'This sentence is equivalent toimport {a} from './a'; export {a}

exportYou’re exporting variables

Export is a variable. I personally think that once you understand this sentence, you will be less likely to confuse it

What does that mean, for example

// a.js
var a = 1;
setInterval((a)= > {
  a++;
}, 500);
export { a };

// b.js
import { a } from "./a";
// A will follow the changes in file A
setInterval((a)= > {
  console.log(a);
}, 500);
Copy the code

Because a is a variable of file A, when a changes, a of file B also changes, because the export is a variable a, not the written value of a

Because export is a variable

So we can write it the following way

export var a = 1;
export function fn() {}
/ / or
export { a, fn };
// If you want to export a variable multiple times, you can rename the variable. Only one variable with the same name can be renamed
export { a as a1, a as a2 };
Copy the code

So you can’t write it like this

export 1
var a = 1
// This sentence is equivalent to export 1
export a
Copy the code

export defaultThe value is exported

What do you mean by this, an example like the one above

// a.js
var a = 1;
setInterval((a)= > {
  a++;
}, 500);
export default a;

// b.js
// If there is no {}, it is the value of export default. You can assign the value to any variable, not necessarily a
import a from "./a";
// A does not change with a file
setInterval((a)= > {
  console.log(a);
}, 500);
Copy the code

Because export Default sends out a specific value, a written value, so in this case it’s 1, whatever happens to file A

Because export Default exports variables

So we can write it the following way

export default 1;
export default function fn() {}
/ / or
var a = 1;
export default a;
/ / or
var a = 1;
export { a as default };
Copy the code

So you can’t write it like this

export var a = 1;
Copy the code

Did the import{}The difference between

When using export Default, the corresponding import statement does not need braces. When using export, the corresponding import statement needs braces.

// a.js
var a = 1;
var b = 2;
export { a };
export default b;

// b.js

import { a } from "./a";
import b from "./a";
import * as all from "./a";
All, {a:1,default:2}
console.log(all);
Var b= 2; var b= 2
b = 1;
// a is a variable in file a and cannot be modified, only file a can be modified by itself
a = 333;
Copy the code

export fromWhen to use it

I’ll give you an application scenario, and the reader can follow suit

There are many requested interfaces in a project, which is too long to put in a file and difficult to maintain. Generally, it is divided into functional modules.

Now there is an API folder, index.js to transfer all interfaces out, and project.js task.js.

// project.js
export const add = (a)= > axios.post(...)
export const remove = (a)= > axios.post(...)

// task.js
export const add = (a)= > axios.post(...)
export const remove = (a)= > axios.post(...)

// index.js
export * as project from 'project';
export * as task from 'task';

// When the component is used
import api from './api'
api.project.add()

// Of course, it is usually mounted globally in main.js for ease of use
// main.js
import api from './api'
Vue.prototype.$api = api
// When the component is used
this.$api.project.add()
Copy the code

import()

In ES2020’s proposal, import(‘./a’) can load a module when needed, such as when a button is clicked, etc., a lazy loading mechanism. Webpack is already implemented, so you can lazily load a page using the Vue-router.

{
  path: "/m".name: "m".component: (a)= > import(/* webpackChunkName: "m" */ ".. /views/M.vue")}Copy the code