小程序工作流
提出这个思想,小白的学习历程
在原生小程序的基础上,我们打造自己的工作流,我们想要支持
- scss --- 编译
- es6+ or ts --- 编译
- eslint
- stylelint
- tslint?可用eslint 取代
- git
- git 提交管理
- git 提交规范
- git 工作流
- 工具:模板文件生成
- 测试编写
- 编译
- 命令行工作流
- 环境与配置
- 编译的可视化工具
- 文档编写
环境变量与配置
目标: 将小程序分为 3 个环境:development, staging, production
编译 我们使用 gulp 编译这些粗活累活
gulp 的生态,gulp4 的使用
样式
我们使用国外流行的 scss,来处样式部分,目的是使用 bem 命令,bem 配合 预处理器是特别好用的,postcss 来处对我们样式做一些后处理,比如添加厂商前缀,以及压缩代码,这些在小程序的工具里面有类似的功能,但是,一直没有正式的机会在企业里面使用前端框架,来使用这些工具,在小程序开面就自己搞!
JS / TS
如果是 js 其实可以不用编译,但是我么还是用babel来处理js。
ts 直接使用自己的编译工具就行
重点:代码的风格
为了方便起见,我们使用 prettier 的代码检查风格,prettier 直接支持 eslint, stylelint 来处理相关代码的格式问题,prettier 还挺好用的。
git 也是非常重要的
在我们的工作流里面 git 扮演者重大的角色,我们使用git来管理我们的代码,一些提交的规范,我们必须使用在这里面
文档部分
我们在开发一个东西的时候,我们需要要写文档,以便形成好的习惯,我们要把我们学习的东西记录成文字,统一的管理起来,这就是我们自己的习惯财富。还是那两个字,加油。
初步采用 van-docs, 能够将 markdown 文档转换成 Vue 文件。
命令行
我们要习惯使用命令,慢慢的要自己学会写命令行,这里推荐看一个微信小程序的模板生成命令行工具,学习如何写命令行工具,逐步升入我们的前端,会使用工具的前端才是真的有效率的前端。
编译可视化
可视化编译,就是在编译的时候,从控制栏知道了编译器编译了哪些文件,干了一些什么事,现在还没有一个很好的方案。
脏活累活
- 生成一个页面,组件
- 代码压缩,文件压缩
- 上传文件,这些东西否应该是可以自动化的
对于繁琐前端的知识,工作流程,我们要建立好自己的工作流处理响应的问题,当然这些都会随着我们学习水平的提高,解决问题的能力也会得到的提高。