ES6模块化-每日一小记

ES6模块化

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

//module/index.js

const name = 'liuzhixi.cn ';

const age = 18;

const color = 'red ';

const sayName = function() {

    console.log(fristName);

}

export {name,age,color,sayName}

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块

//main.js

import {name,age,color,sayName,fn} from './modules/index.js';

ES6 的模块化主要包含如下 3 种用法：

① 默认导出与默认导入

导出的语法： export default（只允许使用唯一的一次） 默认导出的成员

导入的语法： import 接收名称（只要是合法的成员名称即可） from '模块标识符'（路径）

② 按需导出与按需导入

导出的语法： export 按需导出的成员（导入的成员名称必须和导出的名称保持一致）

导入的语法： import { s1 } from '模块标识符'（可以使用 as 关键字进行重命名）

③ 直接导入并执行模块中的代码

如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员，可以直接导入并执行模块代码