ES6 模块(八)

在node环境中运行需要使用babel命令将ES6代码转换为ES5代码再执行相关文件
使用命令直接将src目录下所有ES6代码转换ES5代码到dist目录下：

    $ babel src --out-dir dist

1、export命令    【导出模块中的变量或方法】
export { } | 表达式 | 函数
说明：
　a、export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系,不能直接导出一个值
　b、在一个模块中，export可以调用多次,导出多个值使用对象形式{m,n}
eg：

    //module01.js文件
    //直接导出单个变量或单个函数
    export let x = 10;
    export function say(){
        console.log('say');
    };

    //模块中自定义的变量及方法
    let m = 1;
    let n = 2;
    let test = function(){
        console.log('test');
    };

    //可以使用对象解构导出多个变量或使用表达式声明的方法
    export { m,n,test }
    //导出变量x在导入模块中使用temp变量接受
    export {x as temp}

   
2、export default命令    【默认导出数据】
export default { } | 函数[一般为匿名函数]
说明：
　a、一个模块中只能存在一个默认导出命令;
　b、默认导出一般不定义名字,在导入的时候随意取名,且导入时不需要使用{}包裹导入数据【如果导入时使用的是全导入则default导入的变量名为default】
    c、默认导出可以导出多个数据使用对象形式,导出单个数据直接使用数据值或变量名【不能使用表达式】
eg：

    //module01.js文件
    //默认导出【一个模块中只能存在一个默认导出】(一般不定义名字,在导入的时候随意取名)
    export default function(){
        console.log('default');
    }

   
3、import命令    【导入其它模块中的变量或方法】
import  { }|变量名|[* as obj]  from "导入数据的模块路径"
注：
    a、在导入某个模块中数据时,该模块引入路径时加载时会执行一遍路径文件代码,而后面引入该文件路径则是从缓存中获取。
    b、单令模式【导入模块只导入一次，后面引入该文件路径则是从缓存中获取】
说明：
　a、使用export命令定义了模块的对外接口以后,其他模块可以通过import命令加载这个模块并获取到相应的导出值
　b、导入其它模块数据时,对象解构只需保持变量名一一对应,与对象中变量的顺序无关
　c、{ }接收导入的数据对象;  变量名则为导出文件中的默认导出数据的变量名称;  * as obj 导入导出文件中所有数据封装到obj对象中
eg：

    //module02.js文件
    //导入./module01.js文件导出的m,n,test变量
    import { temp,say,m,n,test } from "./module01.js"
    //导入单个变量需要使用{}包裹变量
    import {say} from "./module01.js";
    
    //对应默认导出的导入  变量名随便取且导入时数据不需要使用{}包裹
    import defaultData from "./module01.js"   //导入了module01.js文件中的默认导出数据【变量、方法或对象】
    
    //导入module01.js模块中所有的导出数据【其中包括默认导出的数据】
    import * as obj from "./module01.js"   //obj对象中包含所有的module01.js模块中导出的数据;默认导出数据名为default

4、export 与 import 的复合写法
export { } from "导入数据的模块路径"
eg：

    //导入module01.js模块中的m,n并向外导出
    export { m, n } from './module01.js';
    // 等同于
    import { m, n } from './module01.js';
    export { m, n };

 

转载于:https://www.cnblogs.com/nzcblogs/p/11373889.html