@打造自己微信小程序工作流

235 阅读3分钟

小程序工作流

提出这个思想,小白的学习历程

在原生小程序的基础上,我们打造自己的工作流,我们想要支持

  • 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 文件。

命令行

我们要习惯使用命令,慢慢的要自己学会写命令行,这里推荐看一个微信小程序的模板生成命令行工具,学习如何写命令行工具,逐步升入我们的前端,会使用工具的前端才是真的有效率的前端。

编译可视化

可视化编译,就是在编译的时候,从控制栏知道了编译器编译了哪些文件,干了一些什么事,现在还没有一个很好的方案。

脏活累活

  1. 生成一个页面,组件
  2. 代码压缩,文件压缩
  3. 上传文件,这些东西否应该是可以自动化的

对于繁琐前端的知识,工作流程,我们要建立好自己的工作流处理响应的问题,当然这些都会随着我们学习水平的提高,解决问题的能力也会得到的提高。