rollup - импорт внешней библиотеки - PullRequest
Новая
       26

rollup - импорт внешней библиотеки

1 голос
/ 02 августа 2020

Раньше я использовал сценарий для использования библиотеки:

Теперь я использую yarn и rollup для сборки проекта со следующими файлами. 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/... dependency mapbox-gl (импортировано src \ main. js) (!) Отсутствует имя глобальной переменной Используйте output.globals, чтобы указать имена глобальных переменных браузера, соответствующие внешним модулям mapbox-gl (угадывая 'mapboxgl'), созданным src / blazorMap / dist / MapBoxBlazor. js за 37 мсек. Как исправить проблему с importin mapbox-gl?

1 Ответ

0 голосов
/ 03 августа 2020

Вам может понадобиться '@ rollup / plugin-common js', переместить положение '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(),
  ],
};
...