image frame

脑洞大开の乱乱想

放下碎碎念,重新出发

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

如何设计好维护好一个前端项目?你是否也曾在深夜思考过前端架构师,复杂的前端项目出路在哪?才微服务的哲学里我们能学到什么?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 的提交规范和应对措施。

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

阅读更多...

vue路由

github.com/vuejsvue-router
dev/src/components/views.js

line 13

如何解决嵌套数据的问题。

数据 matched


Vue 的工作流程

mount
compile()

render-function 渲染函数。

vdom

虚拟dom,是一个对象。

观察者模式。

对象响应


最佳实践

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
const port = 7070
const title = ''
module.exports = {
publicPath: '/',
devServer:{
port
},
configureWebpack:{
name: title
}
}

可以 inject 出来。

1
vue inspect > 1.js

输出配置文件。

svg 图标。 svg-sprite-loader

1
2
3
4
5
6
7
8
9
module.exports = {
chainWebpack(config){
config.module.rule('svg')
.exclude.add(path.resolve(__dirname,'src/icons'))

config.module.rule('icons').test(/\.svg$/)
.include.add(path icons).end().use('svg0loader').loader('').options({})
}
}

先让原来的 .svg 排除目录,使用自定义的loader流程
新增自己的loader

请我喝杯咖啡吧~