Export和import

Es6的模块功能几乎所有人都在用，而且实现的非常简单，可以说成为了通用的模块方案。主要就到处模块export和导入模块import。

Export

到导出模块可以是函数、类，也可以是var、let、const定义的变量，但是一定不能直接导出一个字符串或者数字，一个js里面可以有多个export，可以一起导出用花括号{}把要导出的内容都包裹起来：

const a = 10;
const b = {
    c: 5
};
const d = () => {
    console.log(8)
}
function f() {
    console.log(9)
}

export {a, b, d, f}

也可以分别单个一个一个导出：

export const a = 10;
export const b = {
    c: 5
};
export const d = () => {
    console.log(8)
}
export function f() {
    console.log(9)
}

Import

导入只需要注意命名要跟导出的命名一样，然后用花括号{}包起来：

import {a, b, d, f} from "./utils/plugin1";

console.log(a)
console.log(b)
console.log(d)
console.log(f)

如果没有名字对应打印出来的就是undefined。

还可以整个模块导入：

import * as lib from "./utils/plugin1";
console.log(lib.a)
console.log(lib.b)
console.log(lib.d)
console.log(lib.f)

还有一种默认导出一个的export default：

var obj = 5
export default obj;

用export default导出不需要用花括号{}包起来，导入的时候也不需要花括号{}，名字也可以自己起

import lib from "./utils/plugin1";

因为export default只能导出一个，所以可以导出一个对象：

var obj = {
    a: 10,
    b(){

    },
    c: function () {

    },
    d:{
        e: 15
    }
}
export default obj;

或者：

export default {
    a: 10,
    b(){

    },
    c: function () {

    },
    d:{
        e: 15
    }
}

需要注意的是export和import只支持静态导入和导出，你只可以在模块的最外层作用域使用import和export，不可在条件语句中使用，也不能在函数作用域中使用import。

欢迎关注Coding个人笔记 公众号