如何使用带有 Leaflet 1.1.0 的汇总来创建单个包？

Question

我注意到 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

我如何导入传单，以便捆绑使用？

我怀疑我遗漏了一些非常基本的东西。

Answer 1

Leaflet 尚未指定用于模块加载器消耗的 ES 模块条目（在其 package.json 文件中没有 "module" 或 "jsnext:main"）。

因此 Rollup 将使用标准 "main" 文件，即 UMD 包装的 dist/leaflet-src.js 文件，这会触发您报告的错误。

您可以很容易地让 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';

或

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

有了这个 Rollup 也可以使用 Tree Shake Leaflet，尽管它现在还没有针对这个目的进行优化。

作为参考，目前正在讨论此功能（参见 Leaflet #5620）

注意：由于当前 Leaflet 条目文件中设置全局 window.L 的“hack”，你必须从你自己的条目文件中导出一些东西（可以是任何东西，比如 export var dummy = true）（因此指定 moduleName 配置/--name CLI 选项）以便定义 exports。

如何使用带有 Leaflet 1.1.0 的汇总来创建单个包？

How to use rollup with Leaflet 1.1.0 to create a single bundle?

javascript

leaflet

ecmascript-6

rollupjs