前端自動化

丁香園開源接口管理系統 - 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:一如既往的發個膏藥貼，如…