小程序-工程化

工程化做什么

目前的前端开发过程，工程化是必不可少的一环，那小程序工程化都需要做些什么呢，先看下目前小程序开发当中存在哪些问题需要解决：

  1. 不支持 css预编译器,作为一种主流的 css解决方案，不论是 less,sass,stylus 都可以提升css效率
  2. 不支持引入npm包 （这一条，从微信公开课中听闻，微信准备支持）
  3. 不支持ES7等后续的js特性，好用的async await等特性都无法使用
  4. 不支持引入外部字体文件，只支持base64
  5. 没有 eslint 等代码检查工具

方案选型

对于目前常用的工程化方案，webpack，rollup，parcel等来看，都常用与单页应用的打包和处理，而小程序天生是 “多页应用” 并且存在一些特定的配置。根据要解决的问题来看，无非是文件的编译，修改，拷贝这些处理，对于这些需求，我们想到基于流的 gulp非常的适合处理，并且相对于webpack配置多页应用更加简单。所以小程序工程化方案推荐使用 gulp

具体开发思路

通过 gulp 的 task 实现：

  1. 实时编译 less 文件至相应目录
  2. 引入支持async，await的运行时文件
  3. 编译字体文件为base64 并生成相应css文件，方便使用
  4. 依赖分析哪些地方引用了npm包，将npm包打成一个文件，拷贝至相应目录
  5. 检查代码规范

上述实现起来其实并不是很难，但是这样的话就是一份纯粹的 gulp 构建脚本和 约定好的目录而已，每次都有一个新的小程序都来拷贝这份脚本来处理吗？显然不合适，那如何真正的实现 小程序工程化 呢？我们可能需要一个简单的脚手架，脚手架需要支持的功能：

  1. 支持新建项目，创建Page，创建Component
  2. 支持内置构建脚本
  3. 支持发布小程序，也可以想办法接入Jenkins等工具做持续集成…

限于篇幅，没有将完整的代码贴上来，如果感兴趣，可以参考笔者公司实现和在生产环境实践过的一整套小程序工程化方案pandora-cli。