一步步解读Swiper源码

一、介绍

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。

目前，Swiper在业界得到了广泛的应用，去年因为公司基础数据部门需要针对Swiper增加图片旋转的功能，借此机会对Swiper源码进行了阅读，并扩展了rotate组件。

本文，将从如何阅读swiper@5.3.6源码，到定制开发入手，给大家介绍一下我的思路，希望可以给大家一些启发和思考。

二、如何一步步分析源码

通常阅读源码，我会按照以下几个步骤入手：

1. Readme.md
2. package.json
3. 打包工具
4. 入口文件
5. 最小开发单元

2.1 Readme.md

Readme通常是项目的一个概要介绍，会告诉我们项目如何安装，编译打包，如何使用，以及常用的API，简单的代码示例，通过阅读我们可以对项目有一个大致的理解，让我们后面在深入细节的时候，不会迷失方向。

下面是Swiper项目Readme.md中的部分内容：

安装npm包

$ npm install --global gulp # 全局安装gulp工具
$ npm install # 安装本项目的依赖
复制代码

打包开发版本

$ npm run build:dev 
复制代码

打包结果在build/ 文件夹。

打包生产版本

$ npm run build:prod
复制代码

打包结果在 package/ 文件夹。

???，不幸的是，并没有关于如何在本地启动开发环境的介绍，那么接下来，让我们分析一下package.json。。。

2.2 package.json

package.json中，首先需要关注scripts、dependencies、devDependencies。

通过scripts我们可以推断出本地开发的命令，因为包含gulp server，打包的命令；

# [gulp build 打包]；[gulp playground 演示环境准备]；[gulp server 本地服务]；
"dev": "cross-env NODE_ENV=development gulp build && cross-env NODE_ENV=development gulp playground && cross-env NODE_ENV=development gulp server",
# 本地开发脚本
npm run dev | yarn dev
复制代码

当然还有一些其他的命令，比如lint是执行eslint，test执行lint后进行dev打包，等等。

通过dependencies我们可以知道项目的依赖，只有两个库，说明swiper是一个比较纯净的项目，大部分功能都是独立完成的。

"dependencies": {
    "dom7": "^2.1.3", # dom操作封装
    "ssr-window": "^1.0.1"
}
复制代码

通过devDependencies我们可以知道工程化工具、编译工具等，下面的配置删减了一部分，列举出的可以帮助大家分析出这个项目打包的工具。

"devDependencies": {
    "eslint": "^6.4.0", // 代码风格校验
    "gulp": "^4.0.2", // 打包编译工具
    "less": "^3.10.3", // less编译
    "postcss": "^7.0.18", // css处理
    "rollup": "^1.21.4", // JavaScript模块打包器
},
复制代码

2.3 打包工具

通过分析package.json我们发现了gulp、rollup和less，很容易联想到，项目是使用gulp来作为工程化工具，使用rollup来打包 js 代码，使用less来编译less文件；

接下来让我们抽丝剥茧，分析gulpfile.js，打开一看，哎呀，只有一行代码

require('./scripts/gulpfile');
复制代码

所有和打包相关的代码，都被安排到了scripts目录中。

gulp的理念和Grunt很像，就是task，也就是任务，然后通过一连串的任务顺序执行，就完成了代码的编译打包，然后输出结果。

下面是对本项目中，gulp 任务的分析：其中核心的server和build两个任务。

1. server任务的目标是在本地启动一个web服务connect，然后通过监控本地代码watch，有代码改动，就会去重新打包js和css，最后打开playground对应的在线测试地址open。
2. build任务的目标就是打包项目代码，要走的任务也就是js和css打包。