ES6 import/export用法

export正确用法

  • 输出变量
export var name = 'Mark';
  • 输出多个变量
var name = 'Mark'; var age = 18;
export{name, age};
//输出一个变量
//export {name};
  • 输出函数
export function setName(name){
  name = 'Mark';
}
  • 输出别名
//export输出的变量就是在原文件中定义的名字,但可以使用as关键字设置别名
export {
  name as v1, //允许使用不同名字输出两次
  name as v2,
  setName as setNameV1
}

export错误用法

//直接输出变量的值
export 'Mark';

//未使用中括号
var name = 'Mark';
export name;

//export不要输出块作用域内的变量
function(){
  var name = 'Mark';
  export {name};
}

import用法

需要注意的是 import是在代码编辑阶段执行的

  • 导入变量
//导入from相对路径与绝对路径都可以 .js文件后缀可以省略
//导入的变量名必须与到处的名称保持一致
import {name, age} from './config'; 
  • 导入别名
import {name as otherName } from './config';
  • 其他用法补充
import {name} from './config';
import {age} from './config';
//相同于
import { name, age} from './config';

export {setName, setAge};
import * as setFn from '...';
setFn.setName();
setFn.setAge();

//import会加载且仅加载一次导入的模块
import './config';

export default用法

  • export default与export的主要区别是不需要知道导出的具体变量名与导入时不需要{}
//export default
export default function crc32(){};
import crc32 from 'crc32';

//export
export function crc32() {};
import {crc32} from 'crc32';
  • export原理如下
var name = 'Mark';
export default name;  => export {name as default};
import surname from '...'; => import {default as surname} from '..';
  • 一个模块中只能有一个export default默认输出

  • export 与 export default深入理解

//拆分
import _ , {each, each as forEach} from '...';

export default function(){};
export function each(){};

export与import的复合写法

export name from '...';
import {name} from '...';
export {name};

export {es6 as default} from '...';
import {es6} from '...';
export default es6;

你可能感兴趣的:(ES6 import/export用法)