使用JavaScript ES6模块导入现有库

时间:2014-03-09 03:09:19

标签: javascript import module ecmascript-harmony ecmascript-6

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

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

import {poly} from "thirdParty/poly"; 

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

以下两个实际问题有助于澄清我正在努力解决的问题:

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

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

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

      var font = new Font();

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

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

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

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

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

      本文档描述了System加载器的全局绑定,但我担心我没有词汇来完全理解它试图解释的内容。任何有关解码本文档的帮助都将不胜感激!

2 个答案:

答案 0 :(得分:4)

这个答案是:“不,基于ES6规范,无法像使用脚本标记一样加载和运行全局脚本。”

但有一个解决方案:SystemJS

https://github.com/systemjs/systemjs

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

答案 1 :(得分: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模块规范草案和系统浏览器加载器的规定,完全按照示例实现中的建议。