在 ES6 中导入 ES5 库 [重复]答案

【问题标题】：import ES5 library in ES6 [duplicate]在 ES6 中导入 ES5 库 [重复]
【发布时间】：2017-03-14 11:31:12
【问题描述】：

我正在尝试在 ES6 项目中使用用 ES5 (rtree) 编写的库，但没有成功。

在我的 ES6 代码上我这样做：

 import PolygonLookup from '../../lib/rtree';
 ...
 this.rtree = new PolygonLookup(geojson);//does not work

这不起作用，但是如果我删除导入并将标签上的 rtree 添加到我的 html 中，它可以完美地工作。

 <script type="text/javascript" src="..\..\lib\rtree.js"></script>

 this.rtree = new PolygonLookup(geojson); //works

我尝试通过 lebab 将上述库转换为 ES6，但也不行。

【问题讨论】：

stackoverflow.com/questions/31708545/…
你可以编译你的 ES 6 代码。您可以在大约 12 秒内将库转换为 ES 6。您可以简单地访问该库几乎可以肯定附加到的全局变量。不知道这里有什么问题。只是不要使用import。
@JaredSmith 但我如何将其转换为 ES6？我试过 lebab 但它没有输出任何东西。
手工制作。看，几乎所有现存的 JavaScript 库都是以 UMD 格式发布的。 UMD 包装器查看define 或require 是否存在（分别用于AMD 或CJS 模块加载器），如果找不到，它会将库附加到全局变量。只需包含脚本标签并继续您的一天。或者从库中删除 UMD 包装器代码并手动添加 export 语句。
我想我会使用脚本标签。我想让它尽可能模块化，但这样做可以。

【解决方案1】：

ES5 库不会以与 ES6 兼容的方式导出任何内容。这就是 PolygonLookup 未定义的原因。您可以在没有任何绑定的情况下导入库：

import '../../lib/rtree';

这样PolygonLookup 将是全局PolygonLookup，就像你包含带有script 标记的库一样，IF 它已被添加为全局变量。并非所有库都明确地这样做。否则你可以试试script-loader（仅限Webpack）：

import 'script-loader!../../lib/rtree';
or even
import PolygonLookup from 'script-loader!../../lib/rtree';

如果您选择的捆绑器/加载器支持其他模块格式，并且库使用其中一种格式，那么您也可以使用常规 ES6 导入。

【讨论】：