ES6 模块

Posted 2022-08-01 nzcblogs

在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 
    //导出变量m在导入模块中使用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 from "导出的模块路径"
注：
    a、在导出某个模块中数据时,该模块引入路径时加载执行一遍,后面引入文件路径则是从缓存中获取。
    b、单令模式【导入模块只导入一次；单令模式(导入模块只导入一次,后面使用的是其缓存中的文件)】
说明：
　a、使用export命令定义了模块的对外接口以后,其他模块可以通过import命令加载这个模块并获取到相应的导出值
　b、导入其它模块数据时,对象解构只需保持变量名一一对应,与对象中变量的顺序无关
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 ;