image frame

脑洞大开の乱乱想

放下碎碎念,重新出发

微服务:从Single-SPA到类Single-SPA初探

什么是微前端?它出现的意义,解决了什么问题?single-SPA 做了哪些事来辅助微前端落地? 这篇文件希望带给你一些思考。

我这几天写了一篇读书笔记:《前端架构:从入门到微前端》,里面由浅入深提到了微前端的一些概念、思考和实践。建议去搜一搜。这里针对读书笔记做一些总结和思考。

阅读更多...

翻书《前端架构:从入门到微前端》

如何设计好维护好一个前端项目?你是否也曾在深夜思考过前端架构师,复杂的前端项目出路在哪?才微服务的哲学里我们能学到什么?signle-spa 是未来吗?近期我阅读了《前端架构:从入门到微前端》,这本书值得一读。

在微信读书上看到了这本书:前端架构

很多细节就是自己经历的,感触很深,在这里做个读书笔记。

阅读更多...

维护你和测试大哥的情谊,使用vue单元测试:Mocha

维护你和测试大哥的情谊:使用vue单元测试

注:

本来是自己慢慢摸索的,后来看到 京东设计中心写了一篇分享,切中我需求,对比多篇文章,杂糅写成此文。

Mocha + Webpack

走的是Vue-loader,100% 原汁原味。这里配置了 mocha-webpack

1
2
3
4
5
6
7
npm i -D @Vue/test-utils mocha mocha-webpack jsdom jsdom-global expect
npx mocha-webpack --webpack-config a.js
-- require a.js
test/**/*.spec.js
# webpack-config 指定webpack配置文件,可以设置单独的test 环境
# require 运行任何测试之前运行的配置,设置全局环境
# 测试文件集合

测试时候可能会引入一些npm包,为了不打包,也为了启动速度快,使用插件 webpack-node-externals

test.config 推荐的设置

1
2
3
4
5
6
7
// webpack.config.js
const nodeExternals = require('webpack-node-externals')

module.exports = {
devtool: 'inline-cheap-module-source-map',
externals: [nodeExternals()]
}

断言库,有人推荐 chai 有人推荐 expect 这个是jest的一部分,

准备 test/setup.js

1
2
require('jsdom-global')()
global.expect=require('expect')

参考文档

  1. Vue Test Utils 官方文档
  2. NutUI 3.0 中单元测试的探索和实践

规范你的git提交

缘起

公司的 git 提交比较乱,很多对应的 issue 没有链起来,不知道哪个是哪个,在这里尝试整理 git commit 的提交规范和应对措施。

规范是人定的,有一个人不遵守,到最后所有人都随便,破窗效应怎么办?自动化来做这件事。

阅读更多...

请我喝杯咖啡吧~