前端自动化

丁香园开源接口管理系统 - 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…

vue + webpack 前端项目持续发布集成部署

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) 解决方案

Webpack 打包器面板进阶

终端画面，漂亮的webpack面板 Webpack-dashboard插件在Github网站上星数超过10000，但我还几乎从没碰过。这么棒的插件，为何不利用起来呢？

vscode编写统一风格的vue代码

经过设置vue项目、安装vscode插件，实现保存文件自动格式化vue、js文件为统一编码风格。

阿里云前端工程化工具 Dawn 正式开源!

Dawn 取「黎明、破晓」之意，原为「阿里云·业务运营团队」内部的前端构建和工程化工具，现已彻底开源。它经过 pipeline 和 middleware 将开发过程抽象为相对固定的阶段和有限的操做，简化并统一了开发人员的平常构建与开发相关的工做。 ps:一如既往的发个膏药贴，如…