前端自动化

丁香园开源接口管理系统 - API Mocker

随着web发展，前后端分离的演进，网页的交互变的越来越复杂。在项目开发过程中，前后端并行开发时，在涉及到接口的部分，总是遇到各类问题。诸如接口假数据、接口参数的约定、代理调试等等，极大的影响了开发效率。 API Mocker致力于解决前后端开发协作过程中出现的各类问题，提高开发…

如何自定义自己的vue-cli模板

在使用vue-cli的过程中，常用的webpack模板只为我们提供最基础的内容，但每次需要新建一个项目的时候就需要把之前项目的一些配置都搬过来，这样就造成挺大的不方便，如果是作为一个团队，那么维护一个通用的模板，我认为是挺有必要的。例如下面是我常用构建项目的目录。从 htt…

搭建一个多页面的无依赖的工程化项目

最近金拱门比较火，我们先戳开它的官网看看。用vue/react吧，单页应用满足不了seo，而且IE兼容性不好。上node中间层做服务端渲染又把事情搞麻烦了。只能用JQuery干，但是又该怎么做工程化呢？好像也不是很容易。因为目前大家的工程化方案多是一整套单页应用全家桶，如vu…

基于webpack构建的angular 1.x工程（angular篇）

上一篇基于webpack构建的angular 1.x 工程（一）webpack篇里我们已经成功构建了整个项目的打包配置。接下来我们要继续让angular在工程里跑起来。之前的工程由于是用gulp打包的，具体原理我不太懂，不过貌似会把所有的js自动注入到index.html中。…

stylelint 搭配 stylelint-order，更随心所欲的编码 CSS

为什么需要校验 CSS 规则？
团队协作在 CSS 书写遇到的哪些问题？
CSS 哪些东西需要校验？
怎么校验 CSS 规则？
通过 stylelint 校验 CSS 规则，简单配置教程。

用webpack搭建多页面项目

如上配置执行 webpack 命令后，会将入口文件中所有的成员都打包到 build 下，文件名为 entry 对象中的键名。

webpack稳定moduleid和chunkid以实现持久化缓存的梳理

如何基于webpack做持久化缓存目前感觉是一直没有一个非常好的方案来实践。网上的文章非常多，但是真的有用的非常少，并没有一些真正深入研究和总结的文章。现在依托于于早教宝线上项目和自己的实践，有了一个完整的方案。想要做持久化缓存那么就要依赖 webpack 自身提供的两个 h…

js操作样式自动prefix

在用vue写一个项目时，编译时vue-loader会自动给css加上合适的前缀，无需手动添加，无疑方便了很多。但是过程中，经常要用js动态添加样式，如此添加的样式就需要手动添加浏览器前缀了。相当的麻烦，还容易出错。下面介绍一种解决方法供大家参考。以上就是js中的css pre…

前端测试框架 Jest

作者介绍：林列欢，美团点评点餐团队成员。前端测试工具一览前端测试工具也和前端的框架一样纷繁复杂，其中常见的测试工具，大致可分为测试框架、断言库、测试覆盖率工具等几类。在正式开始本文之前，我们先来大致了解下它们：测试框架测试框架的作用是提供一些方便的语法来描述测试用例，以及对用例…

用 Jest 测试 JavaScript 应用

Jest 是 FaceBook 用来测试 JavaScript 应用的一套测试框架，这些应用当然也包括了 React 应用。它的优点之一是自带了对 React 的支持，同时也很容易支持其它框架。
从最简单的开始，我们可以看看如何用 Jest 测试纯 JS 项目。

搭建jest+gitlab-ci前端自动化测试环境

功能实现效果:
修改过测试用例后push触发自动测试
测试完成后生成测试报告
测试报告部署到 git pages 上
发送邮件通知测试结果，以及报告查看链接

Prepack详细介绍及微信小程序优化的新思路

作者介绍：雪婧，美团点评点餐团队成员。前言 Prepack前几个月刚出来的时候已经得到了前端界的大范围关注，而在不久之后又逐渐退出了人们的视线。此时这篇文章出来可能显得有些滞后，个人还是比较看好它未来对于前端代码预编译优化所带来的收益。所以再详细地介绍一下Prepack和它给我…

[[译] 2017 年比较 Angular、React、Vue 三剑客 ](https://juejin.im/entry/5a0d5...

为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 Angular 和 React 非常流行，并且最近出现的新贵 VueJS 同样博得了很多人的关注。更重要的是，这只是一些新起之秀。那么我们如何选择使用哪个框架呢？列出他们的优劣是极好的。我们将按照…

编写自己的Webpack Loader

本文将简单介绍webpack loader，以及如何去编写一个loader来满足自身的需求，从而也能提高对webpack的认识与使用，努力进阶为webpack配置工程师。 webpack想必前端圈的人都知道了，大多数人也都或多或少的用过。简单的说就是它能够加载资源文件，并对这些…

基于 Docker 打造前端持续集成开发环境

本文将以一个标准的 Vue 项目为例，完全抛弃传统的前端项目开发部署方式，基于 Docker 容器技术打造一个精简的前端持续集成的开发环境。 1. CI（持续集成）：阮一峰老师的关于 CI 的介绍 2. Docker： Docker 快速入门 1. 代码无需在本地构建 2. 只…

[[译]Rollup - 下一代 ES6 模块化打包工具 - 对 Rich Harris 的采访](https://juejin.im/entry/5a09b...

鉴于浏览器目前尚不能按照“原样”解析 JavaScript 源码，所以打包这一步必不可少。将源代码编译成浏览器可以理解的形式，这是打包工具（例如 Browserify，Rollup 或者 webpack）存在的原因。为了深入探讨这个话题，我们正在采访 Rollup 的作者 R…

webpack 之 loader 和 plugin 简介

作者介绍：赵鹏，美团点评点餐团队成员 webpack是一个模块打包器（module bundler），提供了一个核心，核心提供了很多开箱即用的功能，同时它可以用loader和plugin来扩展。webpack本身结构精巧，基于tapable的插件架构，扩展性强，众多的loade…

Webpack经典入门

之前你可能已经听说过这个叫webpack的很酷的工具，如果你没仔细了解过这个工具，你可能会有些困惑，因为有人说它像 Gulp 之类的构建工具，也有人说它像 Browserify 之类的模块管理工具，如果你有去仔细地了解一下，你可能还是会不明白到底是怎么一回事，因为官网上把web…

Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

对于以上三类人,走吧,这里不是你来装逼的地方. 你们也不值得看老子花那么多时间去汇总的水文. 学习一些新东西.若是有人给汇总那么多问题(指明方向和一定的解决法子). 这种情况一般报错信息可以看到是哪个包抛出的信息. 一般卸载这个模块,安装重新安装下即可. 官方解释如下: dat…

tmt-workflow：微信团队开源的基于 Gulp 4.0、高效跨平台可定制的前端工作流程

自动化流程
Less -> CSS (Sass 可自行定制)
CSS Autoprefixer 前缀自动补全
自动生成图片 CSS 属性，width & height 等
CSS 压缩 cssnano
CSS Sprite 雪碧图合成
Retina @2x & @3x 自动生成适配
imagemin 图片压缩
JS 合并压缩
EJS 模版语言
调试 & 部署
监听文件变动，自动刷新浏览器 (LiveReload)
FTP 发布部署
ZIP 项目打包
解决方案集成
px -> rem 兼容适配方案
智能 WebP 解决方案
去缓存文件 Reversion (MD5) 解决方案