首页 文章

如何将非模块（！）JavaScript导入Polymer 3.0

提问于
浏览 次
4

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>

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

所以，然后我尝试将脚本和css添加到 module javascript（ <script type="module">..</script> ）内的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

Edit:

评论者@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'对象，因此代码失败 . 另见Is there an es6 module-scope equivalent to window? .

现在，我将HTML5 <script> </ script>和<link />标记（见上文）添加到我项目的index.html中 . 这是有效的，但组件和模块的想法是从这些组件和模块内部加载依赖项？

javascript polymer mapbox-gl polymer-3.x

1 回答

  • 0

    你很亲密

    使用原始代码加载脚本：

    // 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)
})
    回复于

相关问题