前端的业务越来越庞大,导致我们需要引入的js等静态资源文件的体积也越来越大,不得不使用压缩js文件的方式来提高加载的效率. 编译工具的诞生,极大地方便了我们处理js文件的这一过程,但压缩后的js文件极难阅读,也难以调试,所以就产生了sourcemap这个功能. webpack开启sourcemap功能可以通过压缩代码的堆栈行.列号定位到源码的具体位置,我们就以webpack为例来看看如何利用sourcemap反向定位线上源码. SourceMap是一种映射关系.当项目运行后,如果出现错误,我们可…

导火索 有一天一个测试同事的一个移动端页面白屏了,看样子是页面哪里报错了.  我自己打开页面并没有报错,最后发现报错只存在于他的手机,移动端项目又是在微信环境下,调试起来会比较麻烦,最后用他手机调试才发现问题: 是他账户下面有个对话的消息数据有问题导致页面报错了.  一般遇到这种情况只有用他的手机或者账户调试能很快查到问题,如果是外部的用户怎么办,我没法拿他的手机去测试. 其实这个问题很常见,但是这次我觉得这个问题如果不是我们自己同事发现的,那就很恐怖,可能废很大精力才能查出问题,甚至会导致很严…

jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 笔者阅读了园友艾伦 Aaron的系列博客<jQuery源码分析系列>,跑艾伦的部分代码后,感觉仍然不够解渴,对jQuery依旧一知半解,产生了很多问题.阅读源码博客已经无法解决这些问题,所以笔者决定亲自查看jQuery源码,解除心中的疑问.阅读的形式属于自问自答,笔者会提出疑问,然后亲自解答(吐槽:感觉有点像一休哥和将军大人>_<)…

说起 happypack 可能很多同学还比较陌生,其实 happypack 是 webpack 的一个插件,目的是通过多进程模型,来加速代码构建,目前我们的线上服务器已经上线这个插件功能,并做了一定适配,效果显著.这里有一些大致参考: 这张图是 happypack 九月逐步全量上线后构建时间的的参考数据,线上构建服务器 16 核环境. 在上这个插件的过程中,我们也发现了这个单人维护的社区插件有一些问题,我们在解决这些问题的同时,也去修改了内部的代码,发布了自己维护的版本 @ali/happypa…

最近项目用上了sass,作为css的预处理器,它可以让我们用程序化的思维书写样式,极大的简化了css的开发,实在是前端居家旅行必备的利器. 我们都知道,在项目中,样式的频繁调试是不可避免的,用上sass虽说coding代码量减少,但调试过程着实让人崩溃. 看一段sass代码: 嵌套书写的结构在sass中经常会被用到. 编译之后的样式是这样的: 在开发工具上我们看到的是编译后的文件,而非编译前的源文件. 这个时候就产生一个问题了.在生产环境中,我希望看到的未经编译文件的调试信息,而非编译后的,因为…

单独定义Map数据结构的bean: <bean id= "expToLevelMap" class="org.springframework.beans.factory.config.MapFactoryBean" > <property name ="sourceMap"> <map> <entry key ="expToLevel"> <value> <![…

在上一篇文章我们对 Stream 的特性及其接口进行了介绍,gulp 之所以在性能上好于 grunt,主要是因为有了 Stream 助力来做数据的传输和处理. 那么我们不难猜想出,在 gulp 的任务中,gulp.src 接口将匹配到的文件转化为可读(或 Duplex/Transform)流,通过 .pipe 流经各插件进行处理,最终推送给 gulp.dest 所生成的可写(或 Duplex/Transform)流并生成文件. 本文将追踪 gulp(v4.0)的源码,对上述猜想进行验证. 为了分…

上一篇文章已经分析了build/dev-server.js,里面使用到了其他config文件. 那么我们这篇文章,按着dev-server.js的使用顺序,来分析下其他文件. 首选,调用check-versions.js 模块,检查node和npm的版本,是否符合最低要求.这里,单独分出来了一个文件check-versions.js. check-versions.js var chalk = require('chalk') //定制终端字符串的颜色输出样式 var semver = requ…

1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github.com/vuejs/vue-cli 2.安装webpack项目模版 vue init <template-name> <project-name> 比如: vue init webpack my-project   之后可以在当前目录下下载该模版,然后 npm install 安装所有的依赖包,可以得到如下的目录结构   3.目…

使用Nest CLI设置新项目非常简单 .只需确保 安装了npm,然后在OS终端中使用以下命令: $ npm i -g @nestjs/cli $ nest new project-name $ cd project $ npm install $ npm run start 生成的文件如下: prettier是一个格式化工具, 强制规范代码格式 , 比如 JSON最后一行是否允许带逗号, 用单引号还是双引号等等 nodemon是用来监视node.js应用程序中的任何更改并自动重启服务, 简单说…