我注意到 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 © <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'
};
bundle 在 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
我如何导入传单，以便它可以捆绑使用？
我怀疑我遗漏了一些非常基本的东西。
最佳答案
Leaflet 还没有指定用于模块加载器消费的 ES 模块条目(在其 package.json< 中没有 文件)。"module" 或 "jsnext:main"/
因此 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 条目文件中设置全局 window.L 的“hack”，你必须导出一些东西(可以是任何东西，比如 export var dummy = true ) 从你自己的入口文件(因此指定一个 moduleName config/--name CLI 选项)以便定义 exports .
关于javascript - 如何使用带有 Leaflet 1.1.0 的汇总来创建单个包？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45155140/