前端模块化开发之ES Module

了解过Web前端开发的小伙伴应该知道，历史上，JavaScript一直没有本身模块体系（module），没法将一个大程序拆分红互相依赖的小文件，再用简单的方法拼装起来。其余语言如java、python等都具有这项功能，惟独Javascript没有，在ES6以前，要想在前端作模块化开发，必须依赖第三方框架来实现，如：requireJS与seaJS，requireJS支持的是AMD规范，seaJS支持的是CMD规范，因为二者功能高度重合，后来seaJS再也不维护，今后淡出人们的视野，因而requireJS一家独大，直到ES6的出现，且迅速成为前端和服务器端通用的模块解决方案，彻底能够取代AMD 规范和NodeJS支持的CommonJS 规范。

ES6中首次引入模块化开发规范ES Module，让Javascript首次支持原生模块化开发，今后前端开发一发不可收拾，让requireJS等第三方框架倍感压力，被淘汰也只是时间问题。因此之后的JS模块化开发将是ES Module的天下，那接下来咱们来感觉一下ES Module的强大与其所拥有的魅力，我会从如下几个方面来说解ES Module：

1. ES Module的用法
2. 浏览器支持状况
3. 实际开发中的应用

ES Module的使用

ES Module把一个文件看成一个模块，每一个模块有本身的独立做用域，那如何把每一个模块联系起来呢？核心点就是模块的导入（import）与导出（export）。

一、export导出模块

先来一波代码：

/**
 * @模块A --moduleA.js
 * 每一个模块拥有本身独立的做用域
 */

// 这里的变量、方法只会在当前模块生效，不会影响全局做用域
let goodsName = 'huawei mate30 pro'
let qty = 5;
function getData(){
    return {
        goodsName,
        qty
    }
}

// @如要在其它模块中使用这里的数据，则必须导出
// 1. 给模块对象添加default属性，值为getData函数
export default getData

在模块A中定义了一些变量与方法，而后将其导出。注意，export后只能跟function、class、var、let、const、default、{}，export的做用就是给当前模块对象添加属性，方便后期导入到其余模块中，export的用法以下

// 1. 给模块对象添加default属性，值为getData函数
export default getData

// 2. 给模块对象添加myClass属性，值为一个类
export class myClass {}

// 3. 给模块对象添加a,b,c属性
export var a = 'xxx'
export let b = 10
export const c = 20

// 4. 给模块对象添加多个已声明属性（注意不是导出一个对象）
export {
    goodsName,
    qty,
    // a:100 //不支持这种写法
}

其中 export default方法最经常使用，至于为何，先卖个关子，接着咱们来讲说模块的导入，搞懂导入的方式，你天然就明白了。

二、import导入模块

import命令用于导入其余模块提供的数据，格式：import <module> from <url>

如在模块B中导入模块A中的数据，代码以下：

/**
 * @模块B --moduleB.js
 * 要在当前模块导入其余模块数据，使用import
 */

// 1. 导入模块对象中的default属性
import getData from './moduleA.js'
import getGoods from './moduleA.js'
console.log(getData,getGoods);

// 2. 导入模块对象中的其余属性
import {myClass,a,b,c,goodsName,qty} from './moduleA.js'

到这你们应该已经看出来export default与其余的区别了，其实就是导入比较简单，且名字随意修改，不受导出模块的限制（上图中的getData和getGoods获得的都是模块A中的getData方法）。 那其它方式导出的属性就不能更名字了么？ 其实ES Module早就帮咱们考虑好了，一个神奇的关键字 as，用法以下：

// 导入模块属性时同时修改变量名
import {myClass as MyGoods,qty as goodsQty} from './moduleA.js'
console.log(MyGoods,goodsQty)

注意，声明的变量为MyGoods而不是MyClass，以上代码的意思时导入moduleA.js中的myClass属性并赋值给MyGoods变量，goodsQty同理，这样能够有效避免当前模块变量命名冲突的状况。

引入模块时还须要注意一些细节，就是url地址能够是相对路径或绝对路径，但相对路径必定要以“./”或“../”开头，避免项目中踩坑，请看如下代码

// 支持
import base from 'http://laoxie.com/js/base.js';
import base from '/js/base.js';
import base from './base.js';
import base from '../base.js';

// 不支持
import base from 'base.js';
import base from 'js/base.js';

另外ES Module还具备的一些特色：

1. 每个模块只加载一次， 并执行一次，再次加载同一文件，直接从内存中读取；
2. 每个模块内声明的变量都是局部变量， 不会污染全局做用域；
3. 经过export导出模块，经过import导入模块
4. ES6模块只支持静态导入和导出，只能够在模块的最外层做用域使用import和export

浏览器支持状况

ES Module的浏览器支持状况怎么样，毕竟咱们是要在浏览器环境中使用的，推荐一个网站（https://caniuse.com/）给你们，快速查看一些新特性的浏览器支持状况，ES Module的支持状况以下：

你们发现，哪怕是Chrome和Firefox这样的现代浏览器，也是在最近的版本中才对ES Module进行支持，IE直接不支持，确定有小伙伴会问，那若是要兼容低版本浏览器怎么办呢？有听过大名鼎鼎的babel么？接下来咱们讲讲ES Module在实际开发中的使用。

实际开发中的应用

一、在浏览器中直接使用

若是要在浏览器中直接使用，首先你的浏览器必需要支持ES Module特性，另外script标签的写法有别于传统的写法，平时咱们的写法以下：

<script type="text/javascript">
    var goodsName = 'huawei mate30 pro'
    var qty = 5;
</script>

这种传统写法，因为在全局做用域下声明变量，会让goodsName和qty成为全局变量，但若是type属性改为module（type="module"） 浏览器就会将代码视为 ES Module 处理，代码以下：

<script type="module">
 // 添加module属性，这里的声明的变量只在当前模块生效，不会成为全局变量
 let goodsName = 'huawei mate30 pro'
 let qty = 5;
</script>

咱们还能够引入其余模块到当前模块调用，代码以下

<script type="module">
 // 引入moduleA.js中的方法
 // 并利用as避免与当前模块中的变量产生冲突
 import getData,{goodsName as productName} from './moduleA.js
 let goodsName = 'huawei mate30 pro'
 let qty = 5;
 
 // 调用模块A中的方法
 let goods = getData();
</script>

固然，添加type=”module”的script标签也支持使用src属性直接引入其余模块，代码以下：

<script type\="module" src\="./moduleB.js"\></script\>

二、在构建工具中使用

要想让低版本的浏览器也能运行模块化的代码，须要在项目中使用babel这样的工具来进行编译，通常会配合webpack这样的构建工具，实现的原理其实很简单，就是把ES Module的代码编译成浏览器支持的ES5代码，因为babel和webpack不在本文的讨论内容范围，你们能够自行查找相关资料，或持续关注个人其余文章，下面演示的是moduleA.js通过Babel编译后的代码：

从代码中你们能够看到，已经把ES6的代码编译成ES代码，低版本浏览器天然就能够运行了。