前端研习录（44）——ES6 Module语法讲解及示例分析

---

版权声明

• 本文原创作者：清风不渡
• 博客地址：https://blog.csdn.net/WXKKang

---

  重拾前端记忆，记录学习笔记，现在进入Module语法部分

一、Module语法

1、Module语法

  JavaScript一直没有模块化体系，无法将大程序拆分成【互相依赖】的小文件，再用简单的方式拼装起来，这对开发大型的、复杂的项目形成了巨大障碍
  ES6通过export命令显示指定输出的代码，再用import命令输入来解决这一问题

例如我们具有hello.js和index.js文件，现用如上方法将hello.js内部hello变量导入到index.js文件中
export var hello = “hello”; //hello.js文件
import {hello} from “./hello.js” //index.js文件

（1）import 命令

  我们可以使用export命令定义模块的对外接口，而后使用import命令将其导入使用
  在导入时，如果需要重新对模块进行命名，可使用as关键字
  也可以使用（*）对导出的模块进行整体加载

（2）export default 命令

  通过export default 命令可以将一个默认输出模块导出

注意：一个文件中只能存在一个export default

//hello.js
export var hello = "hello";
export function getName (){
console.log("Tom");
}
export function getAge (){
console.log(18);
}
export default function getHeight (){
console.log("175cm");
}


//index.js
import {hello,getName,getAge as getHelloAge} from "./hello.js"
getHelloAge();
//等同于
import * as hello from "./hello.js"
hello.getAge();
//导入默认加载模块
import getHelloHeight from "./hello"
getHelloHeight();

二、测试方式

  由于直接通过前端测试会很麻烦，所以采用Nodejs方式进行测试Module语法
  但是nodejs采用的是CommonJS的模块化规范，使用require引入模块；而import是ES6的模块化规范关键字。想要使用import，必须引入babel转义支持，通过babel进行编译，使其变成node的模块化代码。操作步骤如下：

第一步：全局安装babel-cli
npm install -g babel-cli
//如使用镜像安装则为
cnpm install -g babel-cli
第二步：安装babel-preset-env（项目目录下）
npm install -D babel-preset-env
//如使用镜像安装则为
cnpm install -D babel-preset-env
第三步:运行代码
babel-node -presets env index.js（实现导入的js文件）