使用 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 加载程序的全局绑定，但恐怕我没有足够的词汇来完全理解它试图解释的内容。对解码此文档的任何帮助将不胜感激！

Answer 1

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

但是有一个解决方案：SystemJS

https://github.com/systemjs/systemjs

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

Answer 2

这个或类似的东西对你有用吗？

var stuffFromPoly = import "thirdParty/poly"

然后您将调用存储在stuffFromPoly 中的对象的方法。

如果不是这样，您能否扩展一下您的问题，我试图准确猜测您的意思，我可能有点离题。

快速注释发布-“您的更新”：

你反对使用https://www.npmjs.org/package/es6-module-loader 吗？还是不能完全解决问题？

来自自述文件：

新的 ES6 模块规范使用导入和导出语法在 JavaScript 中定义了一个模块系统。对于动态加载模块，动态模块加载器工厂也包含在规范中（新加载器）。

一个单独的浏览器规范为浏览器定义了一个动态的 ES6 模块加载器，window.System，以及一个用于使用模块的标签。

这个 polyfill 完全按照 2013-12-02 ES6 模块规范草案中的规定实现了 Loader 和 Module 全局变量，并且完全按照示例实现中的建议实现了系统浏览器加载器。