export、export default、import的用法

我是在刚学webpack接触到export、export default、import 的用法的，这里就给几个例子看看他们之间的关系！！

---

语法

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

---

命名导出：export

可以有多个export

export { myFunction }; // 导出一个函数声明
export const foo = Math.sqrt(2); // 导出一个常量

默认导出:export default

每个脚本只能有一个

export default myFunctionOrClass // 或者 'export default class {}'
// 这里没有分号

对于只导出一部分值来说，命名导出的方式很有用。在导入时候，可以使用相同的名称来引用对应导出的值。

关于默认导出方式，每个模块只有一个默认导出。一个默认导出可以是一个函数，一个类，一个对象等。当最简单导入的时候，这个值是将被认为是”入口”导出值。

示例

---

export

export function add(){
    console.log("a");
}
export function add2(add1,add2){
    return add1+add2
}
export const add3 = 3;

import {add,add2,add3} from './add'
add();//a
console.log(add2(1,2));//3
console.log(add3);//3

export default

export default function (){
    console.log("export.default");
}

import demo1 from './export.default'
demo1();//export.default

参考文章：export