Question

如何将非模块 JavaScript 导入 Polymer 3.0

2018-08-03

2307

javascript polymer mapbox-gl polymer-3.x

Polymer 3 使用 import 来加载外部 Javascript。例如

import {GoogleCharts} from 'google-charts';

但是，要实现此功能，外部库似乎应该使用 exports。

我正在尝试使用 mapbox-gl.js 库。此库与以下内容一起安装：

npm install mapbox-gl

似乎未导出任何内容。

在 HTML5 中，您可以按如下方式使用 mapbox-gl：

<script src="node_modules/mapbox-gl/dist/mapbox-gl.js"></script>
<link href="node_modules/mapbox-gl/dist/mapbox-gl.css" rel="stylesheet" />
<script>
   const options = {...}
   const map = new mapboxgl.Map(options);
</script>

我尝试使用“import”加载 mapbox-gl：

import {mapboxgl} from './node_modules/mapbox-gl/dist/mapbox-gl.js';
import mapboxgl from './node_modules/mapbox-gl/dist/mapbox-gl.js';

这不起作用：

Uncaught SyntaxError: The requested module './node_modules/mapbox-gl/dist/mapbox-gl.js' does not provide an export named 'mapboxgl'
Uncaught SyntaxError: The requested module './node_modules/mapbox-gl/dist/mapbox-gl.js' does not provide an export named 'default'

因此，我尝试从 module javascript（ <script type="module">..</script> ）内部将脚本和 css 添加到 document.head：

// load external mapbox-gl.js script
const mapboxgljs = document.createElement('script');
mapboxgljs.setAttribute('src', 'node_modules/mapbox-gl/dist/mapbox-gl.js');
document.head.appendChild(mapboxgljs);
// load external mapbox-gl.css 
const mapboxcss = document.createElement('link');
mapboxcss.setAttribute('href', 'node_modules/mapbox-gl/dist/mapbox-gl.css');
mapboxcss.setAttribute('rel', 'stylesheet');
document.head.appendChild(mapboxcss);

这似乎也不起作用。如果我尝试按如下方式使用 mapbox：

const map = new mapboxgl.Map(options)

我得到的是：

Uncaught ReferenceError: mapboxgl is not defined

编辑：

评论者 @Salketer 和 @barbsan 展示了此类库的正确导入语法：

import 'node_modules/mapbox-gl/dist/mapbox-gl.js';

或

import * as mapboxgl from 'node_modules/mapbox-gl/dist/mapbox-gl.js';

两者现在都导致以下错误消息：

Uncaught TypeError: Cannot set property 'mapboxgl' of undefined

这意味着 mapbox-gl 库现在已加载并解释。但是，mapbox-gl 代码包含以下行：

window.mapboxgl = something;

ES6 模块范围无法访问浏览器“window”对象，因此代码失败。另请参阅是否有与 `window` 等效的 es6 模块范围？。

目前，我正在将 HTML5 <script></script> 和 <link /> 标签（见上文）添加到我的项目的 index.html。这可行，但组件和模块的想法是从这些组件和模块内部加载依赖项？

Answer 1

您已经很接近了。

使用您的原始代码加载脚本：

// load external mapbox-gl.js script
const mapboxgljs = document.createElement('script');
mapboxgljs.setAttribute('src', 'node_modules/mapbox-gl/dist/mapbox-gl.js');
document.head.appendChild(mapboxgljs);

此时，如果您使用脚本提供的实例： const map = new mapboxgl.Map(options)

您将收到错误： Uncaught ReferenceError: mapboxgl is not defined

原因：脚本尚未加载，因此实例 window.mapboxgl 未定义。

解决方案：您必须使用事件侦听器等到脚本完成加载。将此代码添加到您的加载脚本代码中：

mapboxgljs.addEventListener('load', function() {
  // mapboxgl is available here, do whatever you want
  const map = new mapboxgl.Map(options)
})

Answer 2

对于我来说，解决方案是在没有 mustasch {} 的情况下定义导入：

import mapboxgl from 'mapboxgl'

Java wanna bee

2019-09-28

Answer 3

只需执行：

import("node_modules/mapbox-gl/dist/mapbox-gl");

// do my stuff with global dependency

或者如果导入比要执行的代码慢

import("node_modules/mapbox-gl/dist/mapbox-gl").then(() => {
    // do my stuff with global dependency
})