ES6 模块化

ESM 作为 ES6 模块化的正式标准 ，目前主流浏览器能够正常运行。

ESM使用

首先在浏览器使用 ESM，仅需要在 script 标签加入 type="module"属性

<script src="入口文件" type="module">;

export导出

语法：

export 声明表达式 ; 
或
export {具名符号} ;

例子：

//导出的js文件中 
//第一种写法 
export var firstName = '哈哈哈'; 
export var lastName = '啦啦啦'; 
export var year = '略略略'; 
//第二种写法 
var firstName = '哈哈哈'; 
var lastName = '啦啦啦'; 
var year = '略略略'; 
export {firstName,lastName,year}; 
//第三种写法 
var firstName = '哈哈哈'; 
//将firstName导出并重命名为Name 
export {fistName as Name};

import导出

语法：

import { 导入的符号列表 } from "模块路径";

例子：

//紧跟上面导出的例子，导出了fistName,lastName,year 
//在导入的js文件中，前提该js文件必须有type="module" 
import {firstName,lastName,year} from '文件所在路径'; 
//输出出来 
console.log(firstName); 
console.log(lastName); 
console.log(year); 
//更改变量名 
import {firstName as surname} from '文件所在路径';

整体加载

例子：

//用一个*指定一个对象newobject,所有输出值都加载在这个对象上面 
import * as newobject form '文件所在路径'; 
console.log('firstName'+newobject.firstName);

默认导入与导出

例子：

//默认导出(导出的js文件中) 
export default function (){ 
  console.log('这是个没有名字的函数，称为匿名函数');
    } 
//默认导出，modName为你对匿名函数的命名(导入的js文件中) 
//注意这里是没有花括号的 
import modName form '文件路径' ;
//调用 
modName();

export 与 import 的复合写法 

例子：

//转发了这个接口(当前js文件是调用不了firstName的) 
export {firstName} form '文件路径' ;
//可以理解为(当前js文件是可以调用firstName的) 
import {firstName} form '文件路径' export {firstName};