rollup -导入外部库

Question

在前面，我使用脚本使用库：

现在我使用yarn和rollup来构建包含next文件的项目。package.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')在37ms内创建src/blazorMap/dist/MapBoxBlazor.js如何解决导入mapbox-gl的问题？

Answer 1

您可能需要'@rollup/plugin-commonjs'，将'plugins‘的位置移到输出之外，并将'name’属性设置为' output '：

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(),
  ],
};