7、然后执行命令 npm run-script dist(这一步会在当前目录生成一个dist文件夹)
8、查看目录 dist ,里面就有我们打包好的 zepto.js 库文件。
相关源码已放置 Github
以下为详细代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="http://www.likecs.com/css/base.css"> <link href="http://www.likecs.com/css/index.css"> <!-- <script src="http://www.likecs.com/js/index.js"></script> --> <script src="http://www.likecs.com/zepto-master/src/zepto.min.js"></script> <script src="http://www.likecs.com/zepto-master/src/fx.js"></script> <script src="http://www.likecs.com/zepto-master/src/selector.js"></script> <script src="http://www.likecs.com/zepto-master/src/touch.js"></script> <script src="http://www.likecs.com/js/index-zepto.js"></script> </head> <body> <div> <!-- 搜索栏开始 --> <div> <a href="javascript:;"></a> <form action=""> <input type="text" placeholder="请输入商品名称"> </form> <a href="javascript:;">登录</a> </div> <!-- 搜索栏结束 --> <!-- 轮播图开始 --> <div> <ul> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/l1.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/l2.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/l3.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/l4.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/l5.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/l6.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/l7.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/l8.jpg" alt=""> </a> </li> </ul> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <!-- 轮播图结束 --> <!-- 导航栏开始 --> <div> <ul> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/nav0.png"> </a> <p>商品分类</p> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/nav1.png"> </a> <p>商品分类</p> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/nav2.png"> </a> <p>商品分类</p> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/nav3.png"> </a> <p>商品分类</p> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/nav4.png"> </a> <p>商品分类</p> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/nav5.png"> </a> <p>商品分类</p> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/nav6.png"> </a> <p>商品分类</p> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/nav7.png"> </a> <p>商品分类</p> </li> </ul> </div> <!-- 导航栏结束 --> <!-- 主体内容开始 --> <div> <div> <div> <span></span> <span>掌上秒杀</span> <div> <span>0</span> <span>0</span> <span>:</span> <span>0</span> <span>0</span> <span>:</span> <span>0</span> <span>0</span> </div> <span>更多秒杀...</span> </div> <lu> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/detail01.jpg" alt=""> </a> <p>¥10.00</p> <p>¥20.00</p> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/detail01.jpg" alt=""> </a> <p>¥10.00</p> <p>¥20.00</p> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/detail01.jpg" alt=""> </a> <p>¥10.00</p> <p>¥20.00</p> </li> </lu> </div> <div> <div> <h3>京东超市</h3> </div> <lu> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/cp1.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/cp2.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/cp3.jpg" alt=""> </a> </li> </lu> </div> <div> <div> <h3>京东超市</h3> </div> <lu> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/cp4.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/cp5.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://www.likecs.com/uploads/cp6.jpg" alt=""> </a> </li> </lu> </div> </div> <!-- 主体内容结束 --> </div> </body> </html>