12、利用HTML5 API创建地图应用及高级React开发

利用HTML5 API创建地图应用及高级React开发

一、地图应用创建

1.1 地图应用概述

可以利用HTML5 API创建一个同时提供静态和交互式地图的应用。静态地图可使用各种不同的专有服务，而交互式地图则使用免费开源的OpenStreetMap服务，并借助流行的Leaflet库来实现。

1.2 交互式地图扩展

交互式地图可通过为一组查询添加标记来进行扩展。例如，使用Google Maps等服务获取餐厅列表（如寿司餐厅），然后使用Leaflet库为每个位置添加鱼形标记。

1.3 项目查看

完成的项目可在线查看，链接为：https://reactjsblueprints - chapter5.herokuapp.com 。

二、高级React开发之新打包策略

2.1 打包工具切换

之前使用Browserify，现在将切换到Webpack。下面详细了解这两种工具。

2.2 Browserify工作原理

• 依赖分析 ：Browserify通过检查指定的入口点，基于代码中所需的所有文件和模块构建依赖树。每个依赖项都被包装在一个闭包代码中，该闭包包含模块的源代码、模块依赖项的映射和一个键。它还注入了Node原生但JavaScript中不存在的功能，如模块处理。
• 代码示例 ：
  • 创建 helloworld.js 文件，代码如下：