javascript - 使用 JavaScript ES6 模块导入现有库

Question

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

例如，假设我需要加载一个现有的 polyfill:

import {poly} from "thirdParty/poly"; 

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

这里有两个实际问题可以帮助阐明我要解决的问题:

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

它运行并将自身加载到全局范围内。如何使用 ES6 模块完成此操作？

1. 我有另一个名为 Font.js 的脚本这是字体的预加载器。它让您像这样创建新的字体对象:

   var font = new Font();

我通过使用脚本标签加载它来使用 Font.js，如下所示:

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

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

一个可能的解决方案可能是使用模块加载器 API:

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

本文档描述了 System 的全局绑定(bind) loader，但恐怕我没有足够的词汇来完全理解它试图解释的内容。非常感谢任何帮助解码此文档的人!

Answer 1

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

但是有一个解决方案:SystemJS

https://github.com/systemjs/systemjs

它是一个通用的模块加载器，适用于 ES6 模块、AMD 模块和全局脚本(任何你用 <script> 标签加载的东西)