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

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

    • 版权声明
    • 一、Module语法
      • 1、Module语法
        • (1)import 命令
        • (2)export default 命令
    • 二、测试方式


版权声明

  • 本文原创作者:清风不渡
  • 博客地址: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文件)

你可能感兴趣的:(前端研习录,前端,javascript,es6)