时间戳

首页 > 解决方案 > rollup - 导入外部库

javascript - rollup - 导入外部库

问题描述

之前我使用脚本来使用库：

现在我使用 yarn 和 rollup 来构建带有下一个文件的项目。包.json：

{
  "name": "maplib",
  "version": "1.0.0",
  "main": "src/main.js",
  "license": "MIT",
  "devDependencies": {
  "@babel/cli": "^7.10.5",
  "@babel/core": "^7.10.5",
  "@babel/node": "^7.10.5",
  "@babel/preset-env": "^7.10.4",
  "@rollup/plugin-node-resolve": "^8.4.0",
  "rollup": "^2.22.2"
  },
  "dependencies": {
    "mapbox-gl": "^1.11.1"
  },
  "scripts": {
    "build": "rollup -c"
  }
}

rollup.config.js：

import resolve from '@rollup/plugin-node-resolve';
                         
export default {
  input: 'src/main.js',
  external: ['mapbox-gl-dev'],
  output: {
    file: 'src/blazorMap/dist/MapBoxBlazor.js',
    format: 'iife',
    globals: {
      mapboxgl: 'mapboxgl'
    },
    plugins: [
      resolve(), // so Rollup can find `mapbox-gl`
    ]
  }
};

和 main.js：

import * as mapboxgl from 'mapbox-gl'

export function init(o) {
    
    this.assign(mapboxgl, "accessToken", o.accessToken);
        this.mapblazor = new mapboxgl.Map(
        container   = o.container,
        style       = o.mapStyle,
        center      = o.mapCenter,
        zoom        = o.mapZoom
    );
}

我收到错误消息： https ://rollupjs.org/guide/en/ ..。依赖 mapbox-gl (由 src\main.js 导入) (!) 缺少全局变量名 使用 output.globals 指定与外部模块对应的浏览器全局变量名 mapbox-gl (猜测'mapboxgl') created src/blazorMap/dist/ MapBoxBlazor.js in 37ms 如何解决 importin mapbox-gl 的问题？

标签： javascriptrollup

解决方案

您可能需要“@rollup/plugin-commonjs”，将“插件”的位置移到输出之外，并将“名称”属性设置为“输出”：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs'

export default {
  input: 'src/main.js',
  external: ['mapbox-gl-dev'],
  output: {
    file: 'src/blazorMap/dist/MapBoxBlazor.js',
    format: 'iife',
    globals: {
      mapboxgl: 'mapboxgl',
    },
    name: 'xxx'
  },
  plugins: [
    resolve(), // so Rollup can find `mapbox-gl`
    commonjs(),
  ],
};

推荐阅读