使用JavaScript ES6模块导入现有库

Question

如何使用JavaScript的ES6模块加载和运行现有的库？

例如,假设我需要加载现有的polyfill:

import {poly} from "thirdParty/poly"; 

如何poly在不更改源的情况下运行导入的脚本并将其属性加载到当前命名空间？

以下是两个实际问题,以帮助澄清我正在尝试解决的问题:

1. 我有一个脚本rafPolyfill.js,它是window.requestAnimationFrame的polyfill.我需要将它导入全局范围并在加载后立即运行它.<script>标签很容易做到这一点:

它运行并将自身加载到全局范围.如何使用ES6模块完成这项工作？

2. 我有另一个脚本Font.js,它是一个字体的预加载器.它让你创建这样的新字体对象:

   var font = new Font();

我使用Font.js加载脚本标记,如下所示:

<script src="Font.js"><script>

如果不访问,更改或理解此脚本的源代码,如何使用ES6模块以与<script>标记相同的方式加载和使用ES6模块？我只需要这些脚本在加载时运行并自行处理.

可能的解决方案可能是使用模块Loader API:

http://wiki.ecmascript.org/doku.php?id=harmony:module_loaders

这个文档描述了加载器的全局绑定System,但是我恐怕没有词汇来完全理解它试图解释的内容.任何有关解码此文档的帮助将不胜感激!

Answer 1

这个答案是：“不，根据 ES6 规范，不可能像使用脚本标签一样加载和运行全局脚本。”

但有一个解决方案：SystemJS

https://github.com/systemjs/systemjs

它是 ES6 模块、AMD 模块和全局脚本（使用标签加载的任何内容<script>）的通用模块加载器