12、前端开发：从地图应用到Webpack与Redux实践

前端开发：从地图应用到Webpack与Redux实践

1. 地图应用开发

在前端开发中，地图应用是一个常见且实用的项目类型。可以利用HTML5 API创建既包含静态地图又包含交互式地图的应用。静态地图可使用各种不同的专有服务来设置，而交互式地图则可以使用免费开放的地图服务OpenStreetMap，并借助流行的Leaflet库来实现。

例如，我们可以对交互式地图进行扩展，为一组查询添加标记。以查找寿司餐厅为例，我们可以使用Google Maps等服务获取餐厅列表，然后使用Leaflet库为每个位置添加鱼形标记，实现的可能性是无穷的。完成后的项目可以在线查看，链接为：https://reactjsblueprints - chapter5.herokuapp.com 。

2. 新的打包策略：Browserify与Webpack

在前端项目开发中，打包工具是必不可少的，之前我们一直使用Browserify，但后续将切换到Webpack。下面来详细了解这两种工具。

2.1 Browserify的工作原理

Browserify通过检查指定的入口点，并根据代码中所需的所有文件和模块构建依赖树。每个依赖项都会被包装在一个闭包代码中，该闭包包含模块的源代码、模块依赖项的映射和一个键。它还会注入一些Node原生但JavaScript中不存在的功能，如模块处理。

简单来说，它能够分析源代码，找到并包装所有依赖项，然后将它们编译成一个单独的包。它性能出色，是新项目的优秀启动工具。

以下是一个简单的使用示例：
首先创建两个相互依赖的文件：
- helloworl