参加腾讯深圳 IMWebConf 2017 前端开发者大会是什么体验？ 作为前端开发的蚊子，前天有幸参加了IMWebConf2017的大会。从一名来自北京的路人的角度来将，深圳的空气是潮湿的，这次大会的组织是井然有序的。IMWebConf2017的官网： http://2017.imweb.io/index.html在大会开始前的签到，使用二维码扫描签到，快速准确！签到、领取物品、进入会场，顺畅一条龙。第一场的大佬是来自W3C的技术副总监Philippe，可惜自己的英文不好，除了盯着翻译器，一句话也没跟上！不过Philippe讲确实非常好，从一个大方向上讲解下了前端的现在和未来的发展！PWA与AMP－移动web的现在和未来，能大大加快移动端页面呈现速度，提高整体体验。TypeScript是经常听到的概念，不过我确实没有用过TypeScript，这次的大会也是认识了一下TypeScript，TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript，我们平时写的js其实也是TypeScript的一种！TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。只是typescript有着强制类型的限制，TypeScript不是新的语言，而是始于JavaScript，归于JavaScript。下午的会议是有3个分会场：node会场，框架性能会场，综合会场。蚊子是选择了node会场，node会场中分享的专题都是实打实的、经过项目验证的经验，让我们大家了解到node在实际项目中的应用，node的框架等等！幸运的是，同学中了一本书，不过他已经有了，然后送给我了；然后本人中了一个充电宝了！大会还发了一件T恤。有一个小小的插曲，来深圳参加会议，北京这边的项目出了点小问题，感谢深圳总部的同事能提供电脑，让我远程解决线上的问题！下午场里有部分的内容没有听到。

webpack的入门教程 webpack 在官方网站中是这么定义的。webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。在 webpack 中，一切皆资源，CSS、JS、图片等都可以作为资源处理。webpack 在配置大型项目时，可能会很大很复杂的配置，这里我们就从简单的 2-3 个页面的配置开始说起。 1. 简单的配置 # 如果之前用过 gulp 处理过前端资源，那么使用 webpack 就相对来说比较简单一些。要使用 webpack 的话，首先要在项目目录中安装 webpack，其他的我们稍后再安装:npm install webpack --save-dev webpack 的配置要在根目录的 webpack.config.js 里，我们先来看下简单基本的配置：var webpack = require("webpack"); module.exports = { // 入口文件，可写多个 entry: { entry: "./src/entry.js", }, // 输出出口 output: { path: __dirname + "/out/", // 输出目录 filename: "[name].js", // 输出的文件名称规则， [name]表示上面entry中的key值（main） }, module: { // loader操作各种资源 loaders: [ { test: /\.css$/, // 匹配到.css文件 // 用css-loader与style-loader处理匹配到的文件，从右向左执行 loader: "style-loader!css-loader", }, ], }, }; 用上面的配置的话，还需要安装css-loader和style-loader:npm install css-loader style-loader --save-dev 安装后，我们再配置一个简单的目录： `-out `-src `---css `---img `---js `-entry.js `-package.json `-webpack.config.js `-index.html 好了，我们编写 css 和 js 了。在 css 目录中，我们创建一个 index.css:.main { background: #ccc; width: 400px; height: 400px; } 在 js 目录中，我们创建一个 index.js：function getTime() { console.log(Date.now()); } exports.getTime = getTime; 在 entry.js 中：require("./css/index.css"); import o from "./js/index.js"; console.log(o.getTime()); 执行命令：$webpack -p 在 index.html 中引入./out/entry.js: 打开 index.html 就能看到效果了。 2. webpack 讲解 # 在 webpack.config.js 中：entry 可以有多个入口，来对应多个页面，比如我还有一个分享页面：entry : { entry : './src/entry.js', share : './src/share.js' } 在新页面中，引入./out/share.js即可。loader 是从右往左开始执行的，先执行 css-loader，再执行 style-loader。 css-loader 用来解析 css; style-loader 是将 css 样式用 style 标签插入页面的 head 里。而且在引入 loader 时，可以直接省略-loader：module: { loaders: [ { test: /\.css$/, loader: "style!css", }, ]; } 在满足基本的配置后，我们需要满足更多的需求，比如我要用 SASS 编写 css，我要用 ES6 写 js，处理 CSS 中的图片等等。那么我们就得对 webpack.config.js 扩充配置：$npm install sass-loader url-loader file-loader babel-loader --save-dev 配置文件 webpack.config.js：output : { path : __dirname+'/out/', // 输出目录 filename : '[name].js', publicPath : __dirname+'/out/' // 图片路径 } module : { loaders : [ { test : /\.css$/, loader : 'style!css' }, { test: /\.(jpg|png)$/, loader: "url?limit=8192" }, { test: /\.scss$/, loader: "style!css!sass" }, { test: /\.js$/, loader: "babel" } ] } 好了，现在可以使用 sass, es6 了！ 2.1 使用 ES6 # 在./js/index.js 中：// ./src/js/index.js class Student { constructor(name = "") { this.name = name; } sayHello() { console.log(`hello, ${this.name}!`); } } var wenzi = new Student("wenzi"); wenzi.sayHello(); 2.2 独立的 CSS 文件 # 目前页面中的样式，是从 js 里加载的。如果我们想要把 css 独立到一个单独的文件中，就需要一个extract-text-webpack-plugin插件了:npm install extract-text-webpack-plugin --save-dev webpack.config.js 中：// webpack.config.js var ExtractTextPlugin = require("extract-text-webpack-plugin"); plugins: [new webpack.BannerPlugin("created at " + new Date().toLocaleString()), new ExtractTextPlugin("[name].css")]; name 就是 entry 中的 key 值。 3. 命令行 # 刚才上面我们用的webpack -p来编译的，这里还有几个命令也可以使用：#webpack 命令行的几种基本命令 $webpack --config XXX.js # 使用另一份配置文件（比如webpack.config2.js）来打包 $webpack -w # 提供watch方法，实时进行打包更新 $webpack -p # 对打包后的文件进行压缩，提供production $webpack -d # 提供source map，方便调试。 使用webpack --watch可以监控文件变化，实时编译；在要发布到线上时，使用webpack -p编译为压缩版本的文件。 4. 总结 # 关于 webpack 的内容依然还有很多，这里我们仅仅是做了一些入门的讲解。更多的内容可以查看官网。后续我们也会讲解 webpack 的高级应用等

支付宝推出租房平台的一点看法 相信您已经知道2017年10月10日时，支付宝推出了一个重要的功能：“租房平台”，在支付宝中搜索租房，即可进入到租房平台。租房平台中，目前已经支持8个城市了：上海、北京、深圳、杭州、南京、成都、西安、郑州，后续可能也会增加更多的城市。在使用的过程中，我们会发现房屋图片的水印都是“蘑菇租房”，这说明里面的房源都是来自蘑菇租房。支付宝的租房平台也不是完全自己运营的，而是与多个租房平台合作的，目前进驻的是--蘑菇租房，后续魔方、蛋壳等品牌也将接入到支付宝中，据说房源总量可能会超过百万套。支付宝的租房平台是依托其芝麻信用体系，对出租房和租户都纳入到体系中，进行信用评估！在个人信用达到650分以后上可以免押金，并且可以月付。在一些文章的评论下，蚊子发现不少网友对支付宝推出这一功能持有非常乐观的态度，“干死黑中介”，“整肃出租市场”，“中介市场更加规范了”等等。从好的一面讲： 消灭重复虚假房源：在支付宝租房服务中，房东录入完整房源信息后，将实现“房源出租后自动下架、空出后自动上线”，保证房源真实性。 消灭中介费：租客将与公寓管理方直接沟通对接，不再经过任何中介，从而省去高昂的中介费。 消灭押金：传统的“押一付三”将彻底改变，接入信用分后，芝麻分650分以上的用户租房将再也无需押金，还可以一月一付，大幅度降低资金压力 但蚊子本人还是持保留态度，毕竟租房跟其他的不一样。租房，租户总是要去看房的，真房东总是要带人看房的，很多房东把房子给中介出租，最主要的原因就是自己没有时间一直带租户看房子，只能让委托给中介；再一个原因就是中介给的钱会比租户给的钱高一些。那么，房源还是被中介控制着，租户能如果怎么办呢？如果支付宝没有实体店的话，谁带用户去看房有的中介在支付宝上面发布房源后，租户也是私下联系，签约流程完全私下完成，不走支付宝的线上流程。所以，你要么接受，要么放弃这个房源。同时，之前也出过比如丁丁租房、爱屋及乌等互联网中介，好像对传统的房屋中介也没有产生多大的影响。不过，毕竟支付宝的影响力更大，说不定支付宝真的能整租租房市场呢，让我们拭目以待

第12页 Front-end Engineer，前端开发工程师目前是一名前端开发工程师，主要负责前端规划、框架与架构、前端性能优化。专注前端技术，关注交互体验，擅长web ajax开发。坚信前端工程师的价值是最终能把技术和设计完美结合在一起。用最新的技术方案巧妙地帮助这些设计得以实现。

基于webpack搭建前端工程的思考 前端工程化的概念和思想早就已讨论过，并且之前也用 requireJS 和 seaJS 实现过，同时，在 2015 年，ECMAscript 也发布了 js 的正式版 ES6。在 ES6(ES2015)中，实现了标准上的统一，从底层上实现了模块化的支持。不过由于浏览器发展的滞后性，尤其是 IE，ES6 中很多的属性依然是不支持的，因此也就出现了第三方工具babel，将 ES6 语法转换为浏览器统一支持的 ES5。在上一篇文章中，我们对 webpack 也有个简单的了解了，在 webpack 中，一切皆资源，CSS，JS，图片等都可以作为资源处理。将资源进行分类，模块化的管理，适配到不同的页面。 1. 资源管理 # 项目的工程化，最主要的就是对资源的管理，对整个项目进行思考后，如何拆分资源。对于业务上的组件，我们可以放到components的目录中，然后对外暴露接口。webpack 对 CommonJS，AMD 和 ES6 的模块化都有非常好的支持，不过我们最好还是安装 ES6 的标准来写代码。webpack 编译打包后，都会打包到一个文件中。同时，webpack 让我们更加专注逻辑代码的编写，而不用关心代码是如何被引用的。关于export和import具体如何使用，可以参考阮一峰的文章 Module 的语法 。 2. 本地开发环境 # 一个项目的目录结构可以是这样的：`-out # 编译后 `-src # 原文件 `---css `---img `---js `---components # 组件 `-entry.js `-package.json `-webpack.config.js # 配置文件 `-index.html 为了方便本地的开发和调试，我们使用webpack-dev-server搭建一个本地服务：npm install webpack-dev-server --save-dev 下载安装完成后，我这里对应的版本号是：{ "webpack": "^2.7.0", "webpack-dev-server": "^2.9.1" } 本来安装网上的教程配置 server 时，各种出错，后来就一点点注释，看看是哪里配置错了，结果只能把整个devServer的配置全部注释掉。启动服务：webpack-dev-server --open -hot 程序会自动打开浏览器http://localhost:8080。但是，这里有个问题，页面该怎么引入静态资源呢，其实静态资源的路径就是在 webpack.config.js 中的output中配置的：output : { publicPath: '/dist/', filename: '[name].js' } 那么 src 中的静态资源就会编译到 /dist/ 的路径中了，页面中直接引用就行了。不过，当我们查看项目目录时，却没有 dist 目录，其实在使用webpack-dev-server启动本地服务后，编译的 /dist/ 目录是只存在在内存中的，服务关闭后，dist 目录就不存在了。 3. webpack 的配置 # 在之前的文章中，我们把 webpack 的配置写到了webpack.config.js中。编译时，默认就是调用该文件中的配置。但是，从代码开发到部署到线上，要经历 3 个环境： 本地开发环境、测试环境与正式环境。不过我们这里，只配置本地开发环境和测试环境，正式环境与测试环境的代码已经一样了，只是正式环境是另一套发布流程了： webpack.base.config.js 基础配置 webpack.dev.config.js 本地开发环境 webpack.pro.config.js 测试环境 webpack.base.config.js :var webpack = require('webpack'), path = require('path'), ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: function () { return { index: './src/index.js', }; }, output: { publicPath: '/dist/', filename: '[name].js', }, // 新添加的module属性 module: { rules: [ { test: /\.js?$/, loader: 'babel-loader', exclude: /(node_modules|bower_components)/, options: { presets: ['es2015'], }, }, { test: /\.css$/, // loader: "style!css" use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader', }), }, { test: /\.(jpg|png)$/, loader: 'url?limit=8192', }, { test: /\.scss$/, // loader: "style!css!sass" use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader', }), }, ], }, plugins: [], }; webpack.dev.config.js :const base = require('./webpack.base.config'), ExtractTextPlugin = require('extract-text-webpack-plugin'); const config = Object.assign({}, base, { output: { publicPath: '/dist/', filename: '[name].js', }, plugins: [new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true })], }); module.exports = config; webpack.pro.config.js :const base = require('./webpack.base.config'), ExtractTextPlugin = require('extract-text-webpack-plugin'); const config = Object.assign({}, base, { output: { publicPath: './build/', filename: '[name]-[chunkhash:8].js', }, plugins: [ new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }), new webpack.BannerPlugin('created at ' + new Date().toLocaleString()), ], }); module.exports = config; webpack.base.config.js 是基础文件，不直接调用，我们在 package.json 中把命令简化一下："scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --config config/webpack.dev.config.js", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config config/webpack.pro.config.js" } 运行npm run dev命令时，调用的是 webpack.dev.config.js，进行本地开发；运行npm run build，调用 webpack.pro.config.js，进行预发布编译。 4. 总结 # 因为项目的难易程度，部署代码、测试发布的流程都不一样，在 webpack 的开发过程中，也依然需要遵循公司的标准进行自动化的整合。