es6 模块化加载html,ES6+ 模块化（一）

ES6+ 模块化

1. 前言

JavaScript 在设计之初主要用来开发 Web 页面的交互、动画和表单验证等单一的功能，而且程序的体积很小，大多数都是独立执行的。随着前端的发展 JavaScript 承接的功能越来越多，Node 的出现让 JavaScript 可以作为一门后端开发语言，程序的复杂度瞬间提升，所以有必要提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制。Node 是 JavaScript 的先行者，它使用了 CommonJS 的规范来实现模块化的。在 ES6 没出来之前有很多模块化的实践，比较有名的有：CommonJS、AMD、CMD，每个规范都有自己独立的思考。

随着 ES6 模块的发布，AMD 和 CMD 慢慢地淡出了我们的视野。现在主要常见的场景是 Node 端还采用 CommonJS 规范，这是历史原因。前端使用的是 ES6 module 规范，但是不能直接在前端使用，需要通过打包工具进行编译如：Webpack、Babel、Rollup 等。本文中我们将使用 Webpack 进行模块化编译工具，源代码放在 GitHub 上，仅供参考。

2. 环境搭建

现在的高级浏览器还能完全地支持 ES6 的模块化，如何在浏览器中运行 ES6 模块呢？有两种方式：

在浏览器中直接运行 ES6 的模块化，但是需要做一定的工作，不能像之前直接在本地浏览器中打开一个 html 中引入 JS 文件；

使用 Webpack、rollup 等模块化打包工具，html 引入编译后的 js 文件。

这两种方式各有优缺点，第一种是原生的使用方式，浏览器兼容要求比较高，第二种使用