content.json

{"meta":{"title":"Airplake","subtitle":null,"description":null,"author":null,"url":"http://airplake.github.io"},"pages":[{"title":"关于我们","date":"2017-06-04T05:26:53.004Z","updated":"2017-06-04T05:26:53.004Z","comments":true,"path":"about/index.html","permalink":"http://airplake.github.io/about/index.html","excerpt":"","text":"Airplake 是由远程全职，兼职工程师组成的合作社区，社区采用会员制。社区中大部分会员就职于各互联网技术公司，也有全职独立工作者。为提高远程协作的工作效率和流畅性，保证会员兼职收益，在Airplake中的会员需要较为严格的遵循一些项目合作的规则，以保证项目进度和质量。 GitHub Issues在Airplake的远程合作中，我们严格依赖GitHub的issues和分支流程来进行项目进度和流程管理。我们会将一个项目切割成多个Phase，每个Phase由若干个issues组成。在开发过程中，子任务的进度将在issues传递issues中推进，通常issues会遵循： Issue流程issue创建 -> issue被领取开发 -> issue code review -> issue Staging -> issue QA测试 -> issue上线 Issue组成Issue 主要由 任务标题，User Story, Acceptance Criteria，任务标签 和 留言组成 issue的标题最好以[标题类型]开始，比如：[页面]，[API]，[文档]，[数据库]等，让接受任务的开发人员能够快速定位任务。 一个详细的User Story通过“如果我是[Role]，我需要[功能，需求描述，需求达到的效果]”的结构来描述任务目标。 通过Acceptance Criteria来表述任务的各个细节。 通过Issue Label来表示任务类型，进度，优先级等等。 issue的最后加上该任务的预估的价值（工时和难度）。 这是最终的效果： Check this example issue for more details Airplake Issue Sample 工时计算为了保证工资分配的公平性，以让远程开发成员能够专注开心的开发项目，不要为工资奖励所困扰，Airplake使用积分制的方法来计算工资。刚才提到，通常一个开发性的任务会被封装成一个issue，封装的时候也会给这个issue预估一个价值积分，当这个任务完成以后，对应的开发人员可以获得相应的credits。正常来说，我们会每周或者每两周（取决于项目的密度）结算一次工资，结算的时候我们会按照 工资 = credits X 基数工资 的基本公式来结算，当然有时候视工作的而外表现，强度，技术提升，对社区的贡献等也会有额外的积分奖励。 相对宽松的工作量设定，完全自主的工作时间，如果你的自主管理能力很强，并热爱开源社区，愿意加入到伟大的项目中的话，请发邮件到 wenqing@airplake.com, 或者添加微信 wenqingisu，告诉我们你的名字，爱好，想要参与的工作类型（Node.js, vue.js, React.js, 微信小程序开发）。如果有的话，附上你的 github 链接或者简历!"},{"title":"分类","date":"2017-06-04T05:26:53.004Z","updated":"2017-06-04T05:26:53.004Z","comments":true,"path":"categories/index.html","permalink":"http://airplake.github.io/categories/index.html","excerpt":"","text":""},{"title":"Tags","date":"2017-06-04T05:26:53.004Z","updated":"2017-06-04T05:26:53.004Z","comments":true,"path":"tags/index.html","permalink":"http://airplake.github.io/tags/index.html","excerpt":"","text":""}],"posts":[{"title":"KONG--构建负载均衡服务器","slug":"KONG--构建负载均衡服务器","date":"2017-06-24T08:45:38.000Z","updated":"2017-06-24T08:33:54.334Z","comments":true,"path":"2017/06/24/KONG--构建负载均衡服务器/","link":"","permalink":"http://airplake.github.io/2017/06/24/KONG--构建负载均衡服务器/","excerpt":"KONG–构建负载均衡服务器什么负载均衡先上图 首先我们先介绍一下什么是负载均衡: 负载平衡（Load balancing）是一种计算机网络技术，用来在多个计算机（计算机集群）资源中分配负载，以达到最佳化资源使用、最大化吞吐率、最小化响应时间、同时避免过载的目的。负载均衡的目的，就在于平衡负载，给用户提供优质，可靠，稳定的服务。当我们用户数据比较大的时候，单台服务器已经承受不了，这时候就需要服务器集群了，如何来分配服务器资源呢，这时负载均衡技术就出来。","text":"KONG–构建负载均衡服务器什么负载均衡先上图 首先我们先介绍一下什么是负载均衡: 负载平衡（Load balancing）是一种计算机网络技术，用来在多个计算机（计算机集群）资源中分配负载，以达到最佳化资源使用、最大化吞吐率、最小化响应时间、同时避免过载的目的。负载均衡的目的，就在于平衡负载，给用户提供优质，可靠，稳定的服务。当我们用户数据比较大的时候，单台服务器已经承受不了，这时候就需要服务器集群了，如何来分配服务器资源呢，这时负载均衡技术就出来。 什么是KONGKong是在客户端和（微）服务间转发API通信的API网关,提供丰富的插件。具体关于KONG的介绍请移步官网。 基本架构图 kong 安装kong 官网 实例演示 今天我们主要的内容是如何使用KONG，搭建我们的负载均衡服务器，让你的网站也可以承受高并发的场景。下面就开始进行实例演示部分。 创建Server首先我们需要创建两个Server，它们所提供服务功能是一样的。 12345678910 // server 01 // app.jsvar express = require('express')var app = express() app.get('/', function (req, res) { res.send('server 01') }) app.listen(3000) 12345678910 // server 02 // app.jsvar express = require('express') var app = express() app.get('/', function (req, res) { res.send('server 02') }) app.listen(4000) 上面使用Express创建了两个非常简单的服务，访问根目录返回不同的字符(正常的服务返回的数据都是一样的，这里为了区分的确是访问了两个服务，所有返回不同的字符). 在浏览器中访问 localhost:3000 localhost:4000 得到正常的响应就可以接下面的步骤了。 express 创建Upstream 1curl -H "Content-Type: application/json" -X POST -d '{"name":"hello"}' http://127.0.0.1:8001/upstreams/ 你也可以使用POSTMAN，或者其它API工具。 add-upstream 参考 创建Target 分别执行 1curl -H "Content-Type: application/json" -X POST -d '{"target": "127.0.0.1:3000", "weight": 100 }' http://127.0.0.1:8001/upstreams/hello/targets 1curl -H "Content-Type: application/json" -X POST -d '{"target": "127.0.0.1:4000", "weight": 100 }' http://127.0.0.1:8001/upstreams/hello/targets 你也可以使用POSTMAN，或者其它API工具。 add-target 参考 创建Api 1curl -H "Content-Type: application/json" -X POST -d '{"name":"hello","hosts":"hello.com","upstream_url":"http://hello","strip_uri":false}' http://127.0.0.1:8001/apis/ 你也可以使用POSTMAN，或者其它API工具。 add-api 参考 测试 然后使用POSTMAN去访问，会发现不一样的东西，需要多刷新几次。 效果如果 注意 特别需要注意是你的IP,如果你KONG是装在本机，可以用localhost或者127.0.0.1,如果是装在其它机器，ip应对那台机器 这是说的负载均衡，主要指的web服务器的负载均衡。 结论负载均衡技术是一项非常重要的技术，可以很好的应对高并发的场景，最大化的利用服务器资源，希望大家可以掌握、学会。 广告时间Airplake 是由远程全职，兼职工程师组成的合作社区，社区采用会员制。社区中大部分会员就职于各互联网技术公司，也有全职独立工作者。为提高远程协作的工作效率和流畅性，保证会员兼职收益，在Airplake中的会员需要较为严格的遵循一些项目合作的规则，以保证项目进度和质量。","categories":[{"name":"后端开发","slug":"backend","permalink":"http://airplake.github.io/categories/backend/"}],"tags":[{"name":"KONG","slug":"KONG","permalink":"http://airplake.github.io/tags/KONG/"},{"name":"负载均衡","slug":"负载均衡","permalink":"http://airplake.github.io/tags/负载均衡/"},{"name":"高并发","slug":"高并发","permalink":"http://airplake.github.io/tags/高并发/"}]},{"title":"Mongodb地理空间查询-最佳方案","slug":"Mongodb地理空间查询-最佳方案","date":"2017-06-04T04:45:38.000Z","updated":"2017-06-04T07:18:02.482Z","comments":true,"path":"2017/06/04/Mongodb地理空间查询-最佳方案/","link":"","permalink":"http://airplake.github.io/2017/06/04/Mongodb地理空间查询-最佳方案/","excerpt":"MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 前言在移动开发中，经常会用到定位的功能，例如美团、饿了么、猫眼电影等应用，都使用了定位经纬度，可以查询用户位置附近的一些服务、商家等信息。 本篇文章将会讲述如何利用Mongodb进行数据存储、定位查询。 本方案为最佳实践，实现功能如下： 带经纬度数据的存储 根据用户经纬度，查询由近到远的数据（分页） 附带距离数值（数据库层级的计算） 可设置最大距离 一句话形容就是 ： 存储带经纬度的数据，并且根据用户的不同位置，返回可分组、带距离的数据列表","text":"MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 前言在移动开发中，经常会用到定位的功能，例如美团、饿了么、猫眼电影等应用，都使用了定位经纬度，可以查询用户位置附近的一些服务、商家等信息。 本篇文章将会讲述如何利用Mongodb进行数据存储、定位查询。 本方案为最佳实践，实现功能如下： 带经纬度数据的存储 根据用户经纬度，查询由近到远的数据（分页） 附带距离数值（数据库层级的计算） 可设置最大距离 一句话形容就是 ： 存储带经纬度的数据，并且根据用户的不同位置，返回可分组、带距离的数据列表 注意，Mongodb版本在2.4以上 分析举个例子，我们需要做一个应用，管理员可以把商家信息发布到应用上，用户打开应用可以看到距离自己由近到远的商品，并且可以看到距离多少。 Mongodb有一种索引–地理空间索引，利用它可以进行经纬度的计算，下面继续介绍如何使用该功能。 实现下面以Nodejs+mongoose为例 创建Schema： 1234567891011121314const mongoose = require( 'mongoose' );let VenuesSchema = new mongoose.Schema( { name: String, address: String, location: { type: [ Number ], index: { type: '2dsphere', sparse: true } }}, { collection: 'Venues'} ) 创建Model 1let VenuesModel = mongoose.model(‘Venues’, VenuesSchema) 插入数据 123456789按照以下数据格式往数据库插入数据：{ "name": "音乐派KTV(银泰城)", "address": "武侯区高新区天府四街益州大道口银泰城4F" "location" : [ 104.05801, 30.5411 ],} 查看用户附近的数据 1234567891011121314151617181920212223242526272829303132 let matchQuery = { “name” : /音乐/ig } // 额外筛选,此处查询名字包含音乐的数据 let venuesCount = await VenuesModel.count().exec() VenuesModel.aggregate( [ { $geoNear: { near: { type: 'Point', coordinates: [ 104.05801 , //用户经度 30.5411 //用户纬度 ] }, distanceField: 'distance', // 距离数值字段名 spherical: true, maxDistance: 1000 // (Int类型的最大距离--米，例如500，1000), query: matchQuery, limit: venuesCount } }, { $match: matchQuery }, { $count: 'venuesCount' }, //此处添加了此处，则返回数据量，如需返回具体数据列表，删除此处 { $skip: 30 }, // 分页，跳过数据数量 { $limit: 30 } // 分页，返回的数据数量] ) 总结本次主要分享位置索引和aggregate的用法，十分实用的一个功能。 返回的数据默认就是近到远的数据 不要忘了数据库字段location的索引配置 距离信息会附带在返回的信息列表中，会有一个distance字段（我们定义的，可以修改）","categories":[{"name":"后端开发","slug":"backend","permalink":"http://airplake.github.io/categories/backend/"}],"tags":[{"name":"Mongodb","slug":"Mongodb","permalink":"http://airplake.github.io/tags/Mongodb/"},{"name":"地理空间","slug":"地理空间","permalink":"http://airplake.github.io/tags/地理空间/"}]},{"title":"不得不学的AJAX","slug":"不得不学的AJAX","date":"2017-06-04T02:45:38.000Z","updated":"2017-06-04T07:18:02.493Z","comments":true,"path":"2017/06/04/不得不学的AJAX/","link":"","permalink":"http://airplake.github.io/2017/06/04/不得不学的AJAX/","excerpt":"ajax简介 一、为什么要学ajax? 从个人工作待遇来说,如果你想从 4k -> 8k，ajax 就是你必须要学习的技术。现在我们来看下各大网站招聘要求","text":"ajax简介 一、为什么要学ajax? 从个人工作待遇来说,如果你想从 4k -> 8k，ajax 就是你必须要学习的技术。现在我们来看下各大网站招聘要求 从各大招聘网站的要求可以看出，只要你是前端工程师，就必须掌握ajax，想不想成为一名优秀的前端工程师？想不想涨工资？想不想学？ 网站使用率 90%网站基本都使用ajax，包括腾讯、阿里、360、百度等等，没有使用的基本是以前的老网站，没有升级和进行维护。 二、ajax是什么2.1 什么是ajax AJAX即“Asynchronous Javascript And XML”（ 异步 JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest. 通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的局部更新。 2.2 ajax优点&&缺点 优点: 使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地响应用户动作，并避免了在网络上发送那些没有改变的html代码信息。 减轻服务器负担，按需要获得数据。 无刷新更新页面，减少用户的实际和心理的等待时间。 更好的用户体验。 减轻宽带的负担。 主流浏览器支持 缺点: AJAX不是完美的技术。也存在缺陷： AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。 AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。 对搜索引擎支持不好。 2.4 哪里用到Ajax现在网站几乎无不使用Ajax.具有代表使用Ajax技术的网站有:新浪微博、Google 地图、Gmail、开心网等等.其中Gmail(google的邮箱)是开辟了Ajax技术的先河. 举例: 腾讯登陆、百度、阿里云 2.2 ajax原理 Ajax的原理简单来说通过浏览器的XmlHttpRequest(Ajax引擎)对象来向服务器发异步请求并接收服务器的响应数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。即用户的请求间接通过Ajax引擎发出而不是通过浏览器直接发出,同时Ajax引擎也接收服务器返回响应的数据,所以不会导致浏览器上的页面全部刷新. 举例： 传统方式的注册表单的验证: ajax方式的注册表单的验证: 注意：真正的请求是由Ajax引擎发出.不是由浏览器窗口发出,所以浏览器窗口是不会刷新的, Ajax引擎同时也接收服务器返回的响应内容. <–end–> 2.3 Ajax引擎(XMLHttpRequest)2.3.1 什么是Ajax引擎Ajax引擎就是XMLHttpRequest对象,所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。它同是也是一个Javascript对象. 2.3.2.为什么使用Ajax引擎Ajax引擎(XMLHttpRequest)是Ajax综合技术的核心,其作为浏览器页面和服务器交互的一个桥梁. 通常是Javascript监听浏览器网页事件(点击,提交,更改等),由Javascript创建Ajax引擎对象,通过Ajax引擎对象发出请求.Ajax引擎等待并且接收服务器的响应内容,Javascript再从Ajax引擎对象中获取响应内容并且改变网页界面显示效果. 2.3.3 如何创建Ajax引擎对象1.非IE浏览器和高版本的IE浏览器 var xhr = new XMLHttpRequest(); 2.老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象. var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 兼容处理 //Ajax.js function createAjax() { var xhr ; if(window.XMLHttpRequest){ //所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。 xhr = new XMLHttpRequest(); }else { //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象： xhr = new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; } 2.4 如何使用Ajax引擎对象2.4.1 基本语法使用Ajax引擎对象就是使用它上面的方法和属性完成发送请求和接收响应内容等. 注意:Ajax请求和响应也符合Http协议. 方法 方法名 注释 abort 取消当前请求 getAllResponseHeaders 获取响应的所有http头 getResponseHeader 从响应信息中获取指定的http头 open(方式get/post，url地址，同步异步 创建一个新的http请求，打开请求，并指定此请求的方法、URL以及验证信息(用户名/密码) send() 发送请求到http服务器并接收回应 setRequestHeader 单独指定请求的某个http头，header()设置http头协议信息 属性 属性名 注释 onreadystatechange 指定当readyState属性改变时的事件处理句柄。 readyState 返回当前请求的状态，ajax行进过程中不同状态 responseBody 将回应信息正文以unsigned byte数组形式返回. responseStream 以Ado Stream对象的形式返回响应信息。 responseText 将响应信息作为字符串返回.只读 responseXML 将响应信息格式化为Xml Document对象并返回，只读 status 返回当前请求的http状态码. 200 ok 304 缓存 ； 404 not found; 403 没有权限 501 服务器级别错误 statusText 返回当前请求的响应行状态文本， ok not found forbidden 基本使用: //>>1.创建Ajax引擎对象 var xmlHttpRequest= createAjax(); //>>2.设置发送请求时需要具备的数据 //>>2.1.指定请求url地址(注意还没有发出请求仅仅是设置请求地址和请求方式) xmlHttpRequest.open('GET/POST','url地址',[ '是否异步']); //>>2.2.监听Ajax引擎对象的改变 xmlHttpRequest.onreadystatechange=function(){ //当请求和响应同时完成,从Ajax引擎中获取响应内容,然后通过javascript对网页进行操作 if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){ //根据相应内容对网页进行操作的代码通常写在这里 // xmlHttpRequest. responseText // //xmlHttpRequest. responseXML } } //>>3.发送请求 xmlHttpRequest.send([post请求参数字符串]); 2.4.2 ajax get 注册例子2.4.3 ajax post 注册例子2.4.4 详解onreadystatechangeonreadystatechange属性是一个方法,当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法. ajax引擎的状态属性readyState（0 1 2 3 4） 0.请求未初始化 1.服务器连接已建立 2.请求已接收 3.请求处理中 4.请求已完成，且响应已就绪 见图： 当前ajax引擎的状态属性readyState为4时,说明服务器的响应已经发送给ajax请求了. 但是响应的状态码为200时说明响应的内容是正确的,这时才会根据相应内容对当前页面的html处理. 2.6 同步三.强调(重点)ajax请求是由html页面通过javascript发出的.发送请求分为两种情况: 监控用户的事件(onclick,onchange等),通过ajax发送请求 监控浏览器的事件(onload),通过ajax发送请求.onreadystatechanage方法监控到响应内容的返回, 根据响应内容使用javascript改变当前页面的部分html代码,从而达到不刷新改变局部html代码.","categories":[{"name":"前端开发","slug":"frontend","permalink":"http://airplake.github.io/categories/frontend/"}],"tags":[{"name":"AJAX","slug":"AJAX","permalink":"http://airplake.github.io/tags/AJAX/"}]},{"title":"团队代码规范之--standard","slug":"团队代码规范之--standard","date":"2017-03-20T12:45:38.000Z","updated":"2017-06-04T07:18:02.509Z","comments":true,"path":"2017/03/20/团队代码规范之--standard/","link":"","permalink":"http://airplake.github.io/2017/03/20/团队代码规范之--standard/","excerpt":"代码规范是团队中非常重要的一部分，一个好的规范可以更好的提高效率。","text":"代码规范是团队中非常重要的一部分，一个好的规范可以更好的提高效率。 本期由阿文给大家带来standard 具体内容请观看视频。 standard代码规范.flv:","categories":[{"name":"工具","slug":"tools","permalink":"http://airplake.github.io/categories/tools/"}],"tags":[{"name":"代码规范","slug":"代码规范","permalink":"http://airplake.github.io/tags/代码规范/"},{"name":"standard","slug":"standard","permalink":"http://airplake.github.io/tags/standard/"}]},{"title":"半小时学会webpack","slug":"半小时学会webpack","date":"2017-01-12T02:45:38.000Z","updated":"2017-06-04T07:18:02.504Z","comments":true,"path":"2017/01/12/半小时学会webpack/","link":"","permalink":"http://airplake.github.io/2017/01/12/半小时学会webpack/","excerpt":"半小时学会webpack学习webpack，只需要记得一句话，一切皆模块 最好的学习网站–官方网站，没有之一。 什么是webpack，为什么要使用它？Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。","text":"半小时学会webpack学习webpack，只需要记得一句话，一切皆模块 最好的学习网站–官方网站，没有之一。 什么是webpack，为什么要使用它？Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。 开始安装首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。 全局安装 npm install webpack -g 依赖安装 npm install webpack --save-dev 安装成功可以使用命令行webpack -h进行测试。 基本使用1 新建一个空的文件夹，命名为learn-webpack,终端进入该文件夹后输入下面命令初始化项目上。 npm init 输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。 2 安装完成后，接着安装webpack // 安装Webpack npm install webpack -g 3 在当前项目中新建两个空的文件夹src文件夹和build文件夹,src文件夹用来存放原始数据和我们将写的JavaScript模块，build文件夹用来存放浏览器访问的页面。在这里还需要创建三个文件，index.html 文件放在build文件夹中，两个js文件（main.js和module.js）放在src文件夹中，此时项目结构结构如下 learn-webpack build index.html src main.js module.js node_modules package.json index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js） <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>learn webpack</title> </head> <body> <div id='app'> </div> <script src="bundle.js"></script> </body> </html> main.js document.getElementById('app').innerHTML = "hello world " + require('./module.js'); module.js module.exports = 'hello module'; 使用webpack生成bundle.js webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方} 只需要指定一个入口文件，webpack将自动识别项目所依赖的其它文件。 webpack src/main.js build/bundle.js 运行如下 现在打开index.html,可以看到如下结果 有没有感觉很神奇，现在我们已经学会使用命令行打包文件了，但每次使用命令行感觉不是很方便，我们再看另外一种方法，使用配置文件来打包。 还是继续上面的例子来说明如何写这个配置文件，在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，并在其中进行最最简单的配置，如下所示，它包含入口文件路径和存放打包后文件的地方的路径。 ///webpack.config.js module.exports = { entry: __dirname + "/src/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/build",//打包后的文件存放的地方 filename: "bundle.js"//打包后输出文件的文件名 } } 注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。 webpack 这条命令会自动参考webpack.config.js文件中的配置选项打包你的项目,你会看到和你刚才一样的效果。 又学会了一种使用Webpack的方法，而且不用管那烦人的命令行参数了，有没有感觉很爽。还有一种更快捷的执行打包任务，就是使用npm脚本。 修改package.json { "name": "learn-webpack", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "webpack": "^1.14.0" }, "devDependencies": {}, "scripts": { "build":"webpack", "test": "echo \\"Error: no test specified\\" && exit 1" }, "author": "", "license": "ISC" } 然后终端运行 npm run build 是不是也和刚才一样的效果。 5 其它配置 5.1 Source Maps（使调试更容易） 开发总是离不开调试，如果可以更加方便的调试当然就能提高开发效率，不过打包后的文件有时候你是不容易找到出错了的地方对应的源代码的位置的，Source Maps就是来帮我们解决这个问题的。 在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下： devtool选项 说明 source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度； cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便； eval-source-map 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项； cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点； 正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的构建速度的后果就是对打包后的文件的的执行有一定影响。 在在小到中型的项目上，eval-source-map是一个很好的选项，不过记得只在开发阶段使用它,在生产环境使用source-map，继续上面的例子，进行如下配置 修改webpack.config.js ///webpack.config.js module.exports = { devtool: 'source-map',//配置生成Source Maps，选择合适的选项 entry: __dirname + "/src/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/build",//打包后的文件存放的地方 filename: "bundle.js"//打包后输出文件的文件名 } } 然后终端运行 npm run build 就会在build里面生成Source Maps。 webpack构建本地服务器想不想让你的浏览器监测你都代码的修改，并自动刷新修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖或者全局安装 全局安装 npm install -g webpack-dev-server 依赖安装 npm install --save-dev webpack-dev-server 配置选项 配置名称 描述 contentBase 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到build目录） port 设置默认监听端口，如果省略，默认为8080 inline 设置为true，当源文件改变时会自动刷新页面 colors 设置为true，使终端输出的文件为彩色的 historyApiFallback 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html 修改webpack.config.js module.exports = { devtool: 'source-map',//配置生成Source Maps，选择合适的选项 entry: __dirname + "/src/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/build", //打包后的文件存放的地方 filename: "bundle.js" //打包后输出文件的文件名 }, devServer: { contentBase: "./build", //本地服务器所加载的页面所在的目录 colors: true, //终端中输出结果为彩色 historyApiFallback: true, //不跳转 inline: true //实时刷新 } } LoaderWebpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。 Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。 Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置，Loaders的配置选项包括以下几方面： test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须） loader：loader的名称（必须） include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）； query：为loaders提供额外的设置选项（可选） 接着上面的例子，现在如果我们需要添加外部的json文件，作为文字的配置。如果直接require('./config.json'),肯定是会报错的，因为它不认识json,所有就需要专门的loader去处理json //安装可以装换JSON的loader npm install --save-dev json-loader 修改webpack.config.js中的module module.exports = { devtool: 'source-map',//配置生成Source Maps，选择合适的选项 entry: __dirname + "/src/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/build", //打包后的文件存放的地方 filename: "bundle.js" //打包后输出文件的文件名 }, devServer: { contentBase: "./build", //本地服务器所加载的页面所在的目录 colors: true, //终端中输出结果为彩色 historyApiFallback: true, //不跳转 inline: true //实时刷新 }, module: { //在配置文件里添加JSON loader loaders: [{ test: /\\.json$/, loader: "json" }] } } 其它文件修改 main.js var config = require('./config.json'); document.getElementById('app').innerHTML = config.main + require('./module.js'); module.js var config = require('./config.json'); document.getElementById('app').innerHTML = config.main + require('./module.js'); config.json { "main": "hello world", "module": "hello module" } 终端运行查看效果 webpack-dev-server 效果和刚才一样的，只是文字被单独放在了配置文件中。 注意：webpack-dev-server不会生成到build, 只是被加载到内存当中。 Loader结合BabelBabel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的： 下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持； 使用基于JavaScript进行了拓展的语言，比如React的JSX 更多介绍 2.1 安装 npm install babel-loader babel-core babel-preset-react babel-preset-es2015 webpack --save-dev 2.2 添加.babelrc { "presets": ["react", "es2015"] } 2.3 安装 react npm install --save react react-dom 修改webpack.config.js中的module module.exports = { devtool: 'source-map',//配置生成Source Maps，选择合适的选项 entry: __dirname + "/src/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/build", //打包后的文件存放的地方 filename: "bundle.js" //打包后输出文件的文件名 }, devServer: { contentBase: "./build", //本地服务器所加载的页面所在的目录 colors: true, //终端中输出结果为彩色 historyApiFallback: true, //不跳转 inline: true //实时刷新 }, module: { //在配置文件里添加JSON loader loaders: [{ test: /\\.json$/, loader: "json" }, { test: /\\.js$/, exclude: /node_modules/, loader: 'babel' //在webpack的module部分的loaders里进行配置即可 } ] } } 其它文件修改 main.js import React from 'react'; import {render} from 'react-dom'; import Module from './module'; render(<Module />, document.getElementById('app')); module.js import React, {Component} from 'react' import config from './config.json'; class Module extends Component{ render() { return ( <div> {config.module} </div> ); } } export default Module 终端运行查看效果 webpack-dev-server 现在整体项目已经变成了react项目了 如何处理css、imageswebpack提供两个loader处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。 接着上面的例子 //安装 npm install --save-dev style-loader css-loader 修改webpack.config.js module.exports = { devtool: 'source-map',//配置生成Source Maps，选择合适的选项 entry: __dirname + "/src/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/build", //打包后的文件存放的地方 filename: "bundle.js" //打包后输出文件的文件名 }, devServer: { contentBase: "./build", //本地服务器所加载的页面所在的目录 colors: true, //终端中输出结果为彩色 historyApiFallback: true, //不跳转 inline: true //实时刷新 }, module: { //在配置文件里添加JSON loader loaders: [{ test: /\\.json$/, loader: "json" }, { test: /\\.js$/, exclude: /node_modules/, loader: 'babel' //在webpack的module部分的loaders里进行配置即可 }, { test: /\\.css$/, loader: 'style!css' //添加对样式表的处理 感叹号的作用在于使同一文件能够使用不同类型的loader } ] } } loader中感叹号的作用在于使同一文件能够使用不同类型的loader 接着在src中添加main.css，并写入基本样式 * { margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } body { color: red; font-size: 30px; } 然后在main.js添加main.css import React from 'react'; import {render} from 'react-dom'; import Module from './module'; import './main.css';//使用import导入css文件 render(<Module />, document.getElementById('app')); 终端运行查看效果 webpack-dev-server 插件（Plugins）插件可以完成更多 loader 不能完成的功能。 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。 Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。 接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。 修改 webpack.config.js，添加 plugins： var webpack = require('webpack'); module.exports = { devtool: 'source-map',//配置生成Source Maps，选择合适的选项 entry: __dirname + "/src/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/build", //打包后的文件存放的地方 filename: "bundle.js" //打包后输出文件的文件名 }, devServer: { contentBase: "./build", //本地服务器所加载的页面所在的目录 colors: true, //终端中输出结果为彩色 historyApiFallback: true, //不跳转 inline: true //实时刷新 }, module: { //在配置文件里添加JSON loader loaders: [{ test: /\\.json$/, loader: "json" }, { test: /\\.js$/, exclude: /node_modules/, loader: 'babel' //在webpack的module部分的loaders里进行配置即可 }, { test: /\\.css$/, loader: 'style!css' //添加对样式表的处理 感叹号的作用在于使同一文件能够使用不同类型的loader } ] }, plugins: [ new webpack.BannerPlugin('This file is created by zhaoda') ] } 终端运行,查看生成的bundle.js效果 webpack HtmlWebpackPlugin这个插件的作用是依据一个简单的模板，帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。 安装 npm install --save-dev html-webpack-plugin 这个插件自动完成了我们之前手动做的一些事情，在正式使用之前需要对一直以来的项目结构做一些改变： 移除build文件夹，利用此插件，HTML5文件会自动生成，此外CSS已经通过前面的操作打包到JS中了，src文件夹里。 在src目录下，创建一个Html文件模板，这个模板包含title等其它你需要的元素，在编译过程中，本插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件，在本例中我们命名模板文件名称为index.tmpl.html，模板源代码如下 index.tmpl.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>learn webpack</title> </head> <body> <div id='app'> </div> <script src="bundle.js"></script> </body> </html> 修改 webpack.config.js，添加 plugins： var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { devtool: 'source-map',//配置生成Source Maps，选择合适的选项 entry: __dirname + "/src/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/build", //打包后的文件存放的地方 filename: "bundle.js" //打包后输出文件的文件名 }, devServer: { contentBase: "./build", //本地服务器所加载的页面所在的目录 colors: true, //终端中输出结果为彩色 historyApiFallback: true, //不跳转 inline: true //实时刷新 }, module: { //在配置文件里添加JSON loader loaders: [{ test: /\\.json$/, loader: "json" }, { test: /\\.js$/, exclude: /node_modules/, loader: 'babel' //在webpack的module部分的loaders里进行配置即可 }, { test: /\\.css$/, loader: 'style!css' //添加对样式表的处理 感叹号的作用在于使同一文件能够使用不同类型的loader } ] }, plugins: [ new webpack.BannerPlugin('This file is created by BannerPlugin'), new HtmlWebpackPlugin({ template: __dirname + "/src/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数 }) ] } 终端运行,查看生成的效果,会自动帮我们生成build文件夹，并且把生成的文件添加到里面。 webpack 高级运用目前为止，我们已经使用webpack构建了一个完整的开发环境。但是在产品阶段，可能还需要对打包的文件进行额外的处理，比如说优化，压缩，缓存以及分离CSS和JS。 我们需要添加webpack.production.config.js，这个文件和之前的webpack.config.js，差不多，只是去掉了devServer选项，因为我们在部署的时候都有专门的web服务器，不会使用webpack-dev-server. 修改package.json { "name": "learn-webpack", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { ... }, "devDependencies": { ... }, "scripts": { "start": "webpack-dev-server", "build":"webpack --config ./webpack.production.config.js", "test": "echo \\"Error: no test specified\\" && exit 1" }, "author": "", "license": "ISC" } 常用优化插件 UglifyJsPlugin：压缩JS代码； extractTextPlugin：分离CSS和JS文件 UglifyJS plugins 都是内置插件,不需要安装 安装extract-text-webpack-plugin npm install --save-dev extract-text-webpack-plugin 修改 webpack.config.js，添加 plugins： var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { devtool: 'source-map', entry: __dirname + "/src/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/build", //打包后的文件存放的地方 filename: "bundle.js" //打包后输出文件的文件名 }, module: { //在配置文件里添加JSON loader loaders: [{ test: /\\.json$/, loader: "json" }, { test: /\\.js$/, exclude: /node_modules/, loader: 'babel' //在webpack的module部分的loaders里进行配置即可 }, { test: /\\.css$/, loader: ExtractTextPlugin.extract('style', 'css') } ] }, plugins: [ new webpack.BannerPlugin('This file is created by BannerPlugin'), new HtmlWebpackPlugin({ template: __dirname + "/src/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数 }), new webpack.optimize.UglifyJsPlugin(), new ExtractTextPlugin("style.css") ] } 终端运行,查看生成的效果,会自动帮我们生成build文件夹，里面会分离出main.css和boundle.js npm run build 接下来就可以把生成的文件部署到生产服务器了。 总结webpack是一个非常好用的的工具，使用它可以节约很多的时间，提高我们的开发效率，大家就是更多的时候出去撩妹。感谢大家可以看完这篇比较长的文章。 视频教程 参考资料 Webpack 中文指南","categories":[{"name":"工具","slug":"tools","permalink":"http://airplake.github.io/categories/tools/"}],"tags":[{"name":"webpack","slug":"webpack","permalink":"http://airplake.github.io/tags/webpack/"},{"name":"打包","slug":"打包","permalink":"http://airplake.github.io/tags/打包/"}]},{"title":"Windows命令行工具Cmder","slug":"cmder","date":"2017-01-07T02:45:38.000Z","updated":"2017-06-04T07:18:02.487Z","comments":true,"path":"2017/01/07/cmder/","link":"","permalink":"http://airplake.github.io/2017/01/07/cmder/","excerpt":"别的不说先上图","text":"别的不说先上图 windws自带的 安装1.官网下载下载的时候，有两个版本，分别是mini与full版；唯一的差别在于有没有内建msysgit工具，这是Git for Windows的标准配备； 除了 git 本身这个命令之外, 里面可以使用大量的 linux 命令；比如 grep, curl(没有 wget)； 像vim, grep, tar, unzip, ssh, ls, bash, perl。ps：如果下载不了，请去个人360网盘下载https://yunpan.cn/cBL4LkWF8B3pN 访问密码 610f 使用1. 下载完成后直接解压。2. 把Cmder.exe添加到环境变量。3. 添加cmder到右键菜单用管理员权限打开命令窗口输入 Cmder.exe /REGISTER ALL 然后右键菜单已经有了Cmder选项，然后打开,输入Ctrl+t,操作如下。 常用快捷键自动补全Tab; Ctrl+T建立新页签； Ctrl+W关闭页签; Ctrl+Tab切换页签; Alt+F4：关闭所有页签 Alt+Shift+1：开启cmd.exe Alt+Shift+2：开启powershell.exe Alt+Shift+3：开启powershell.exe (系统管理员权限) Ctrl+1：快速切换到第1个页签 Ctrl+n：快速切换到第n个页签( n值无上限) Alt + enter： 切换到全屏状态； Ctr+r 历史命令搜索; 我已经被Cmder征服，希望你们也可以,更多使用请参考官网 。","categories":[{"name":"工具","slug":"tools","permalink":"http://airplake.github.io/categories/tools/"}],"tags":[{"name":"命令行","slug":"命令行","permalink":"http://airplake.github.io/tags/命令行/"},{"name":"cmder","slug":"cmder","permalink":"http://airplake.github.io/tags/cmder/"}]}]}