Question

我注意到Leaflet已经转向使用ES6模块和汇总。

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

鉴于此，我会尝试将LeafLet和各种插件以及我的应用程序捆绑到一个文件中。

我使用传单网站上最简单的教程作为测试用例。

我遇到的问题是，当我创建捆绑包时，会生成以下错误：

git status

对于我的测试，index.js文件是：

⚠️   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';

我的package.json文件：

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;

我的rollup.config.js文件：

{
  "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"
  }
}

捆绑包在dist / leafletTest.js

中生成

我的index.html文件是：

// 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'
};

我在控制台中收到错误：

<!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>

如何导入传单以使其可以捆绑？

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

Answer 1

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

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

您可以通过在解析程序后使用rollup-plugin-commonjs轻松地让Rollup正确管理UMD依赖项：

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条目文件中的“hack”设置全局window.L，您必须从您自己的条目文件中导出一些内容（可以是任何内容，如export var dummy = true）（和因此，请指定moduleName config / --name CLI选项），以便定义exports。

如何使用Leaflet 1.1.0汇总来创建单个捆绑包？

1 个答案: