export和import

　　export和import是JavaScript中ES6（ECMAScript 2015）的模块系统的语法，用于实现模块的导出和导入，ES6 的模块系统是 JavaScript 官方标准中定义的模块化规范，现在的前端应用模块化已经很普及了。
　　export和import的技术细节有很多，下面做一总结。
　　一、实时监视JS文件的运行
　　⑴为了在VSCode中编辑js文件并实时监视该文件的运行，需要安装nodemon，下面是进行全局安装。

npm install -g nodemon

　　⑵新建一个目录，在该目录下运行：

npm init -y

　　在该目录下生成一个新的 `package.json` 文件并使用默认值进行初始化，
　　⑶打开 `package.json` 文件，添加type字段并设置为"module"，这样就可以在js文件中使用ES模块语法了。
　　⑷实时监视JS文件的运行

nodemon myfile.js

　　⑸中断运行
　　按下Ctrl+C即可

　　二、export和import技术细节
　　一般情况下，先声明再导出。

//声明
const PI=3.1415926

function add(a,b){
    return a + b
}

function sub(a,b){
    return a - b
}

function multi(a,b){
     return a * b
}
//导出
export {PI,add,sub,multi}

　　也可以在声明时导出。

export const PI=3.1415926

export const  add=(a,b)=>{
    return a + b;
}

export const sub=function(a,b) {
    return a - b;
}

export const  multi=(a,b)=>{
    return a *b
}

　　⑴命名（具名）导出与导入
　　这是最为常见的用法，命名（具名）导出可以导出多个值、函数、对象，由于指定了名称，方便追踪与维护。

//命名（具名）导出
export const PI=3.1415926

export const  add=(a,b)=>{
    return a + b;
}

export const sub=function(a,b) {
    return a - b;
}

export const  multi=(a,b)=>{
    return a *b
}

//命名（具名）导入
import { PI,add,sub,multi } from "./myexport.js";

console.log(PI);
console.log(add(1,2));
console.log(sub(1,2));
console.log(multi(1,2));

　　也可以选择性地导入：

import {PI} from "./myexport.js";
import {add} from "./myexport.js";
import {sub} from "./myexport.js";
import {multi} from "./myexport.js";

　　⑵默认导出与导入

　　默认导出适合功能单一的模块，由于对导出与导入做了简化，代码比较简洁。

//声明时默认导出
export default function add(a,b){
    return a+b
}

//导入时最好与导出时的名称一致
import add from "./myexport.js";
console.log(add(1,2));

　　默认导出时可以不使用函数名称。

export default function(a,b){
    return a + b
}

　　⑶既有默认导出又有具名导出时，可以使用大括号，也可以不使用大括号的方式来导入
　　既有默认导出又有具名导出时，需要注意，假如导出文件内容：

export const PI=3.1415926
export const add=(a,b)=>a+b;
export const sub=(a,b)=>{
    return a - b
}
export default function multi(a,b){
    return a * b*10
}

　　导入内容为：

import add from "./myexport.js";
console.log(add(1,2));

　　显然结果时20，因为导入的add对应的是默认导出的函数multi。如果全部使用，正确的写法是：

import { PI,add,sub,default as multi } from "./myexport.js";

console.log(PI);
console.log(add(1,2));
console.log(sub(1,2));
console.log(multi(1,2));

　　或者，注意默认导出的导入一定要放在最前面：

import multi,{ PI,add,sub }   from "./myexport.js";

　　上面时选择使用了{}方式，如果不使用{}方式，可以将所有导出内容作为一个对象导入，如下使用：

import * as myexport from "./myexport.js";

console.log(myexport.PI);
console.log(myexport.add(1, 2));
console.log(myexport.sub(1, 2));
console.log(myexport.default(1, 2));

　　可以选择性地导入：

import {PI} from "./myexport.js";
import {add} from "./myexport.js";
import {sub} from "./myexport.js";
import { default as  multi} from "./myexport.js";

　　⑷使用as关键字
　　在上面的例子中，在导入时已经使用了as关键字，这是为了避免在使用时的上下文冲突，在导出时也可以使用as，但是这个并不推荐，因为这样不如直接修改源代码了。

　　⑸聚合后重新导出
　　比如再建立一个聚合模块Aggregationmodule.js，内容如下：

import { PI,add,sub,default as multi } from "./myexport.js";

export { PI,add,sub,multi }

　　myimport.js直接导入这个聚合模块即可：

import { PI,add,sub,multi } from "./Aggregationmodule.js";

console.log(PI);
console.log(add(1,2));
console.log(sub(1,2));
console.log(multi(1,2));

　　这种方式适合在一个目录下有很多模块文件，可以将需要导出的函数或者变量集中在一个文件中比如index.js，这样在导入时只需要导入该目录下的index.js即可。
　　⑹动态导入

try {
    const myObj = await import("./Aggregationmodule.js");
    console.log("导入正常");
    console.log(myObj.PI);
    console.log(myObj.add(1, 2));
    console.log(myObj.sub(1, 2));
    console.log(myObj.multi(1, 2));
} catch (e) {
    console.log("导入时发生错误：" + e);
}

　　或者：

try{
    const { PI,add,sub,multi } =await import( "./Aggregationmodule.js");
    console.log(PI);
} catch(e){
    console.log("导入时发生错误："+e);
}