了解了 ES Modules 当中的这些特性和语法过后,在回过头来去看下如何去解决运行环境的兼容性问题。正如前面所提到的 ES Modules 是 2014年才被提出来的,这也就意味着早期的浏览器不可能支持这个特性。另外在 IE 和一些国产的浏览器上截止到目前为止都还没有支持,所以说我们在使用 ES Modules 的时候还是需要去考虑兼容性的问题。Polyfill 可以帮助我们解决一些兼容问题,它可以让我们在浏览器当中直接去支持 ES Modules 当中绝大多数的特性。这个模块的名称叫做 ES Module loader,这个模块实际上就是一个 JS 文件,我们只需要将这个文件引入到网页当中就可以让这个网页去运行 ES Modules 了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ES Module 浏览器环境 Polyfill</title>
</head>
<body>
<script nomodule src="https://unpkg.com/promise-polyfill@8.1.3/dist/polyfill.min.js"></script>
<script nomodule src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/babel-browser-build.js"></script>
<script nomodule src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/browser-es-module-loader.js"></script>
<script type="module">
import { foo } from './module.js'
console.log(foo)
</script>
</body>
</html>
export var foo = 'bar'