javascript - 如何将非模块(!)JavaScript 导入 Polymer 3.0

标签 javascript polymer mapbox-gl polymer-3.x

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

import {GoogleCharts} from 'google-charts';

但是,这似乎可行,外部库应该使用导出。

我正在尝试使用 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>

我尝试使用“导入”来加载 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-module 作用域无法访问浏览器的“window”对象,因此代码失败。另见 Is there an es6 module-scope equivalent to `window`? .

现在,我将 HTML5 <script></script> 和 标签(见上文)添加到我项目的 index.html 中。这行得通,但是组件和模块的想法是从这些组件和模块内部加载依赖项?

最佳答案

你很接近。

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

// 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)
})

关于javascript - 如何将非模块(!)JavaScript 导入 Polymer 3.0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51670987/

相关文章:

javascript - 如何使用带有动态消息的 react 上下文来显示自定义模式或错误模式?

javascript - 并行文件上传 XMLHttpRequest 请求及其不起作用的原因

javascript - 盒子阴影没有出现?

polymer - domReady 与 Ready - 迁移到 Polymer 1.0

jquery - polymer 核心列表 - 只显示足够的元素来填充视口(viewport)

dictionary - 无法在 mapbox GL 上渲染矢量点

javascript - 可以在 .setHTML 或 .setDOMContent 中的 mapboxgl.Popup() 中渲染 react 组件吗?

ios - Mapbox iOS SDK 3.3.1 继承MGLPolygon

javascript - 递归提示返回undefined

javascript - NodeJS 服务器无法处理多个用户