话题
杨磊 构建工具
webpack是现代前端开发中最火的模块打包工具,只需要通过简单的配置,便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置,便可以轻松实现对代码的构建呢? WEBPACK的配置 const path = require('path'); module.exports = { entry: "./app/entry", // string | object | array// Webpack打包的入口 output: { // 定义webpack如何输出的选项 path: path.resolve(__dirname, "dist"), // string// 所有输出文件的目标路径 filename: "[chunkhash].js", // string// 「入口(entry chunk)」文件命名模版 publicPath: "/assets/", // string// 构建文件的输出目录/* 其它高级配置 */ }, module: { // 模块相关配置 rules: [ // 配置模块loaders,解析规则 ...显示全部
1 个月前发表 127次浏览 0条评论 0次收藏
程柳锋 工具建设
[https://qpic.url.cn/feeds_pic/eMJXws7FFlauUALSWA3S7iceia5xM4HrEfUve3X4PJyAw/] 本篇文章主要介绍 腾讯IVWEB团队 [https://ivweb.io/] 从0到1在工程化的思考和实践。 feflow [https://github.com/feflow/feflow] 的全称是Front-end flow(前端工作流),致力于提升研发效率和规范的工程化解决方案。愿景是通过feflow,可以使项目创建、开发、构建、规范检查到最终项目上线的整个过程更加自动化和标准化。 要解决的问题 * 项目的目录结构按约定生成 * 团队有一套开发规范进行约束 * 支持多种类型的构建,包括Fis构建和webpack构建 * 团队内部的代码贡献统计、离线包内置App等 为了解决上述问题,我们于17年2月底开始投入工程化feflow工具的开发和相关规范的制定,目前已经研发出了 feflow 的 CLI [https://github.com/feflow/feflow] 版本,后续会推出 GUI 版本。 架构设计 ...显示全部
2 个月前发表 176次浏览 0条评论 0次收藏
caorich React
[http://7tszky.com1.z0.glb.clouddn.com/Fl3OX8zyBhCu3pT-VUBT0XKibgzk] REACT的状态管理 说到react的状态管理工具,大家都会想到redux或者mobx。 redux || mobx // => true REDUX redux出现较早,包括我们项目组在内,redux几乎已经成了react工程的标配。 redux带来的事件分发机制,将复杂的操作分发到各个reducer,有一种大事化小的睿智,确实将复杂的数据更改逻辑解耦得足够简单。包括我leader在内的很多同学都觉得redux的事件分发机制对于现代前端工程是再适合不过的了。 重绘 但redux的缺点也是足够明显的。每一次dispatch事件之后都会导致整个虚拟dom至顶向下的重绘。重绘剪枝需要在 shouldComponentUpdate 中完成,如果事件足够复杂, store足够大, shouldComponentUpdate 方法的剪枝粒度就不那么容易控制了(实际情况下, shouldComponentUpdate 基本和 TODO 一样不可保证)。 ...显示全部
3 个月前发表 1524次浏览 0条评论 0次收藏
link ,除了分享,也是知识管理。 Node.js全栈
[http://7tszky.com1.z0.glb.clouddn.com/FvgoQmNATnByOO4B4KuYSkZHVQfv] 概述 为什么要在NODE.JS中调用动态链接库 1. 由于腾讯体系下的许多公共的后台服务(L5, CKV, msgQ等)已经有了非常成熟的C/C++编写的API,以供应用程序调用,node.js作为在公司内新兴的后台runtime在调用这些公共服务的时候没必要再造一遍轮子,而是可以将这些API编译成.so文件直接使用。 2. 对于一些密集计算型的任务可以由C++编写好模块,生成.so文件后由node.js调用。 FFI简介与安装 我们使用 node-ffi [https://github.com/node-ffi/node-ffi] 来帮助我们调用动态链接库。 FFI的全称是Foreign Function ...显示全部
2 年前发表 4838次浏览 1条评论 2次收藏
qcyhust 构建工具
PARCEL——开始前端开发零配置体验 导语: 前端开发在开启一个新的项目时总是有个绕不开的环节,那就是项目的开发配置。几年前,我们还在用grant或是gulp来定义一系列的task构建项目开发流程,再往后webpack的出现开始有了广泛的模块概念,利用各种loader或是plugin处理各个前端模块。当然,无论是gulp还是webpack,都需要编写相对应的配置文件来定制开发过程中需要的功能。业务之外的工作量总是催生人性的懒惰,这样一个打着 极速零配置 名号出现的web打包工具就很抓人眼球。这里利用 官网 [https://parceljs.org/] 的项目扩展,看看pacel的工作流程。[http://7tszky.com1.z0.glb.clouddn.com/FmemZsdC5jizPKeEX83joTmOFkt4] 项目结构 为了测试代码拆分功能,新建了一个简单的项目,结构如下: parcel └───src └─── index.html │─── index.js │─── main.js │─── handle.js ...显示全部
3 个月前发表 1685次浏览 0条评论 0次收藏
caorich React
介绍 第一印象 首先上一段代码: import {observable, observe} from'mobx' var student = observable({ name: 'unknown' }) observe(student, (change)=>{ console.info(change) /* will print: * { type: 'update', * object: { name: [Getter/Setter] }, * oldValue: 'unknown', * name: 'name', * newValue: 'foo' } */ }) student.name = 'foo' 非常直观的,student的属性改变了,监听的方法打印出了所有的变动细节。 简介 mobx是一个状态管理器,用于TFRP(transparently applying functional reactive programming)自发式函数相应式编程。 ...显示全部
4 个月前发表 1640次浏览 0条评论 0次收藏
王少飞 Node.js全栈
NODEJS进程内存的使用和原理 V8简介 nodejs代码的运行基于V8,就像java运行需要hotspot,php运行需要zend。V8的由来是,当年web2.0,google的很多业务都在web端,为了提升浏览器中js的执行效率,研发了V8。 V8每发布一个新的版本,nodejs就会相应的发布新版本来使用新版本的V8。 nodejs9以后的版本都是使用的V8 6.2版本。这个版本都有哪些改进: 1 性能优化 * 1)优化了 Object.prototype.toString 的性能,比之前提升了6.5倍 * 2)优化了 ES2015 proxies 的性能, 比之前提升了5倍 * 3)优化了 String#includes() 的性能,比之前提升了3倍 * 4)哈希查找速度更快,从而提高了Map,Set,WeakMap和WeakSet的性能 * 5)新生代内存垃圾回收采用 Parallel Scavenger 算法 2 低内存模式:semi-space为512k,低内存设备减少了发生内存不足的概率。 3 优化正则表达式规则 ...显示全部
5 个月前发表 1625次浏览 0条评论 0次收藏
程柳锋 工具建设
Webpack从2015年9月第一个版本横空初始至今已逾2载。它的出现,颠覆了一大批主流构建如Ant、Grunt和Gulp等等。腾讯NOW直播 IVWEB团队 [https://ivweb.io/] 之前一直采用Fis构建,本篇文章主要介绍从Fis迁移到webpack遇到的问题和背后的黑科技,内容包括inline-resource、多页面构建、资源压缩、文件hash、文件目录规则等等。 为什么要迁移至WEBPACK? 有两个层面的原因: * 首先webpack的社区生态火爆,插件齐全并且维护更新的很频繁,遇到了问题,比较容易解决。 * webpack里面有happypack多实例构建方案、code spliting按需加载文件等方案, 可以有效的进行打包构建持续优化, 这些在Fis里面是缺少的。 区分构建的开发OR生产环境? "scripts": { ...显示全部
5 个月前发表 1777次浏览 0条评论 0次收藏
link ,除了分享,也是知识管理。 HTML&h5
自从TLC大会结束之后,就不断有同学来咨询视频回放和讲师PPT何时放出?[https://qpic.url.cn/feeds_pic/ajNVdqHZLLBbic9icuj9NWZCqLzibNTAE4OkBDLWfKuwVt0e1qZjKaXeA/] 往下翻有惊喜↓↓↓ TLC大会视频回放: http://www.itdks.com/dakashuo/playback/1479 [http://www.itdks.com/dakashuo/playback/1479] 视频回放 [https://qpic.url.cn/feeds_pic/ajNVdqHZLLDHpnt7ZSlCzcLNV4gvUfcAMc0CxngFx4C0IeJqEBX7Aw/] TLC大会讲师PPT: https://github.com/iv-web/ppts/tree/master/TLC_ppts [https://github.com/iv-web/ppts/tree/master/TLC_ppts] ...显示全部
5 个月前发表 1328次浏览 0条评论 0次收藏
qcyhust javascript
WEBGL纹理颜色原理 导语 WebGL绘制图像时,往着色器中传入颜色信息就可以给图形绘制出相应的颜色,现在已经知道顶点着色器和片段着色器一起决定着向颜色缓冲区写入颜色信息并最终呈现出来,那么这个过程是什么样,如果图形的颜色需要用现有图片来渲染那么又该如何操作? [http://7tszky.com1.z0.glb.clouddn.com/FiH73ZJTXQb10Z3sZY2feqOwICVe] 颜色缓冲区 在绘制开始前,经常见到调用函数清空画布的代码 gl.clear(gl.COLOR_BUFFER_BIT) ,清空画布的绘图区实际上就是用之前定义好的背景颜色将颜色缓冲的的颜色清除。颜色缓冲区中存放着需要显示到画布上的像素的颜色数据,它属于帧缓存的一部分,与深度缓存、模板缓存等一起决定着最终画布上图像的显示信息。 ...显示全部
5 个月前发表 349次浏览 0条评论 0次收藏
吴浩麟 调试
在开发微信公众号或小程序的时候,由于微信平台规则的限制,部分接口需要通过线上域名才能正常访问。但我们一般都会在本地开发,因为这能快速的看到源码修改后的运行结果。但当涉及到需要调用微信接口时,由于不和你在同一个局域网中的用户是无法访问你的本地开发机的,就必须把修改后的代码重新发布到线上域名所在的服务器才能去验证结果。每次修改都重新发布很繁琐也很浪费时间。 本文将教你如何通过 SSH 隧道把本地服务映射到外网,以方便调试,通常把这种方法叫内网穿透。 阅读完本文后,你能解决以下常见问题: * 开发微信公众号等应用时把本地服务映射到外网,加速调试流程; * 把你正在开发的本地服务分享给互联网上其它人访问体验; * 在任何地方通过互联网控制你家中在局域网里的电脑; Sponsor [https://app.codesponsor.io/embed/3bvxELAxnq8r4wheFyRkED8U/gwuhaolin/blog.svg] [https://app.codesponsor.io/link/3bvxELAxnq8r4wheFyRkED8U/gwuhaolin/blog] 最终目的 ...显示全部
6 个月前发表 210次浏览 0条评论 0次收藏
程柳锋 工具建设
ESLint [https://eslint.org/] 于2013年6月份推出,至今4个年头,最新版本v4.8.0。它是目前主流的用于Javascript和JSX代码规范检查的利器,很多大公司比如 Airbnb [https://github.com/airbnb/javascript] 和 Google [https://google.github.io/styleguide/javascriptguide.xml] 均有一套自己的Javascript编码规范,而规范的实施背后离不开ESLint的支持。比如大名顶顶的 eslint-config-airbnb ...显示全部
6 个月前发表 337次浏览 0条评论 0次收藏