Как использовать накопительный пакет с Leaflet 1.1.0 для создания единого пакета?

Я заметил, что Leaflet перешла на использование модулей и накопительного пакета ES6.

http://leafletjs.com/2017/06/27/leaflet-1.1.0.html

Учитывая это, я бы попытался объединить LeafLet и различные плагины вместе с моим приложением в один файл.

Я использую простейшее руководство с сайта буклетов в качестве тестового примера.

Я столкнулся с проблемой, заключающейся в том, что при создании пакета возникает следующая ошибка:

⚠️   The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
https://github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined
node_modules/leaflet/dist/leaflet-src.js (9:2)
 7:   typeof define === 'function' && define.amd ? define(['exports'], factory) :
 8:   (factory((global.L = global.L || {})));
 9: }(this, (function (exports) { 'use strict';

Для моего теста файл index.js:

import 'leaflet';

function leafletTest() {

        var mymap = L.map('mapid').setView([51.505, -0.09], 13);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
                id: 'mapbox.streets'
        }).addTo(mymap);

}

export default leafletTest;

Мой файл package.json:

{
  "name": "leaflet-rollup-test",
  "description": "A test to see how to use leaflet with rollup",
  "version": "0.0.1",
  "main": "dist/leaflet-test.js",
  "style": "dist/leaflet-test.css",
  "license": "Mit",
  "dependencies": {},
  "devDependencies": {
    "leaflet": "^1.1.0",
    "rollup": "^0.45.2",
    "rollup-plugin-json": "^2.3.0",
    "rollup-plugin-node-resolve": "^3.0.0"
  },
  "scripts": {
    "build": "rollup -c ./rollup.config.js"
  }
}

Мой файл rollup.config.js:

// rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import json from 'rollup-plugin-json';

export default {
  entry: 'index.js',
  format: 'umd',
  moduleName: 'leafletTest',
  plugins: [
    resolve({
      // pass custom options to the resolve plugin
      customResolveOptions: {
        moduleDirectory: 'node_modules'
      }
    }),
    json()
  ],
  dest: 'dist/leafletTest.js'
};

Пакет создается в dist / leafletTest.js.

Мой файл index.html:

<!DOCTYPE html>
<html>
<head>

        <title>Quick Start - Leaflet</title>

        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

        <link rel="stylesheet" href="dist/leafletTest.css" />
        <script src="dist/leafletTest.js"></script>

</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>    
        leafletTest();

</script>
</body>
</html>

В консоли появляется ошибка:

leafletTest.js:14 Uncaught TypeError: Cannot read property 'L' of undefined
    at version (leafletTest.js:14)
    at leafletTest.js:15
    at leafletTest.js:4
    at leafletTest.js:5

Как импортировать буклет, чтобы он был удобно упакован?

Я подозреваю, что мне не хватает чего-то очень простого.


javascript rollupjs leaflet ecmascript-6
person Yermo Lamers    schedule 17.07.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

В листовке еще не указана запись модуля ES для использования загрузчиками модулей (нет "module" или "jsnext:main" в его package.json файле).

Поэтому Rollup будет использовать стандартный "main" файл, то есть файл dist/leaflet-src.js в UMD-оболочке, что вызывает ошибку, о которой вы сообщаете.

Вы можете легко настроить Rollup для правильного управления зависимостями UMD, используя rollup-plugin-commonjs после преобразователя:

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

export default {
  plugins: [
    resolve(),
    commonjs()
  ],
  // other options…
};

При этом, поскольку вы используете Rollup и rollup-plugin-json, вы можете напрямую использовать файл записи Leaflet вместо его встроенной версии UMD:

import 'leaflet/src/Leaflet';

or

import * as L from 'leaflet/src/Leaflet';

С помощью этого накопительного пакета можно будет также использовать Tree Shake Leaflet, хотя сейчас он не очень оптимизирован для этой цели.

Для справки: эта функция в настоящее время обсуждается (см. Leaflet № 5620).

Примечание: из-за взлома текущего файла записи Leaflet для установки глобального window.L вам нужно что-то экспортировать (может быть что угодно, например export var dummy = true) из вашего собственного файла записи (и, следовательно, указать параметр moduleName config / --name CLI), чтобы exports определено.

person ghybs    schedule 18.07.2017
comment
Это превосходно, и это именно то, чего мне не хватало. Теперь я гораздо лучше понимаю, как эти части сочетаются друг с другом. - person Yermo Lamers; 18.07.2017
comment
Похоже, он у меня сейчас работает, за одним исключением. После запуска его через свертку я получаю ошибку синтаксического анализа в строке, которую я проследил до листовки / src / Leaflet.js в строке 35: window.L = exports; экспорт вроде не определен. Установка пустой переменной вызывает ее загрузку. Ошибка? - person Yermo Lamers; 18.07.2017
comment
Да, извините, я забыл упомянуть эту особенность. См. Примечание в отредактированном выше ответе. - person ghybs; 19.07.2017
comment
Как я могу решить эту проблему при использовании свертки с реактивным листком? - person ZaidRehman; 17.06.2019
comment
@ZaidRehman, пожалуйста, не стесняйтесь открывать новый вопрос с конкретными деталями вашей проблемы. - person ghybs; 17.06.2019
comment
Проблема почти такая же, поэтому я думаю, что она будет отмечена как повторяющаяся. У меня такая же ошибка, но мой код не импортирует листовку, а ее ответную листовку, которая ее импортирует. Поэтому я не могу импортировать листовку из src вместо dist - person ZaidRehman; 17.06.2019