浏览器ES6模块加载

自从ES6原生支持模块机制，浏览器也逐渐都支持ES6的模块功能，除了万恶的IE外，PC的浏览器都支持挺好的。 下面是一个简单的demo:

相关的源码已经上传到github上 本地执行运行demo：

1. 控制台执行 node  server
2. 浏览器打开 http://localhost:4000

语法是ES6的语法，所以开发模式也没啥区别。唯一区别点是模块查找的机制，如果使用的相对路径，会自动根据 url 的加载机制进行加载，具体规则就是：

根据当前宿主环境的路径和相对路径进行合并

例如：

1. /client/index.html  中引用了 ./x/y/a.js
2. 加载的a.js文件的路径为 /client/x/y/a.js     a.js 引用了 ../b.js
3. 加载的b.js文件的路径为 /client/x/b.js

合并过程和使用 Node 中的 path.resolve函数一样的效果。

需要注意的点是返回js文件需要设置 mineType, 否则会运行失败,浏览器会提示:

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

排查此类问题，可以看js文件返回的 content-type是不是 text/javascript: 没有返回 content-type，浏览器会报错 设置 content-type 后，浏览器运行正常

在Node中设置mineType，可以通过 setHeader 这个api设置，具体见上述demo的server 代码为：

总结一下

通过一个简单的node server实现浏览器的ES6模块加载，可以html中通过 script标签(type 需要设置为 module) 直接使用 import 语法引入一个es6的模块，同时模块中也可以引入其他模块。动态加载es6模块，结合h2的能力，页面性能、开发效率会提升较多。