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 } //导出变量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 };
原文地址:https://www.cnblogs.com/nzcblogs/p/11373889.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 打卡群刷题总结0827——组合总和 II
- 快速学习-Gateway--服务网关
- 用Python写一个身份证号码校验系统
- 手摸手 Elastic Stack 使用教程 - 环境安装
- SAS-输出文档生成目录的方法
- 醒醒神,爱奇艺笔试真题
- Qt音视频开发22-通用GPU显示
- 通吃岛屿问题
- 堂妹问我:Dubbo的服务暴露过程
- LeetCode 657. 机器人能否返回原点
- ! [rejected] master -> master (fetch first)
- Mybatis源码学习(二)Mapper动态代理
- Mybatis源码学习(三)executor
- Mybatis源码学习(四)拦截器与插件原理
- SpringBoot如何使用注解装配Bean