9

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

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

import {poly} from "thirdParty/poly";

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

这里有两个实际问题可以帮助澄清我要解决的问题：

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

它运行并将自身加载到全局范围内。使用 ES6 模块如何做到这一点？

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

    var 字体 = 新字体（）；

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

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

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

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

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

本文档描述了加载器的全局绑定System，但恐怕我没有足够的词汇来完全理解它试图解释的内容。对解码本文档的任何帮助将不胜感激！

4

2 回答 2

4

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

但是有一个解决方案：SystemJS

https://github.com/systemjs/systemjs

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

于 2014-03-16T14:43:00.280 回答
3

这对你有用吗？

var stuffFromPoly = import "thirdParty/poly"

然后，您将调用存储在stuffFromPoly.

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

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

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

从自述文件：

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

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

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

于 2014-03-11T14:18:31.980 回答