工程化做什么
目前的前端开发过程,工程化是必不可少的一环,那小程序工程化都需要做些什么呢,先看下目前小程序开发当中存在哪些问题需要解决:
- 不支持
css
预编译器,作为一种主流的css
解决方案,不论是less
,sass
,stylus
都可以提升css
效率 - 不支持引入
npm
包 (这一条,从微信公开课中听闻,微信准备支持) - 不支持
ES7
等后续的js
特性,好用的async
await
等特性都无法使用 - 不支持引入外部字体文件,只支持
base64
- 没有
eslint
等代码检查工具
方案选型
对于目前常用的工程化方案,
webpack
,rollup
,parcel
等来看,都常用与单页应用的打包和处理,而小程序天生是 “多页应用” 并且存在一些特定的配置。根据要解决的问题来看,无非是文件的编译,修改,拷贝这些处理,对于这些需求,我们想到基于流的gulp
非常的适合处理,并且相对于webpack
配置多页应用更加简单。所以小程序工程化方案推荐使用gulp
具体开发思路
通过
gulp
的task
实现:
- 实时编译
less
文件至相应目录 - 引入支持
async
,await
的运行时文件 - 编译字体文件为
base64
并生成相应css
文件,方便使用 - 依赖分析哪些地方引用了
npm
包,将npm
包打成一个文件,拷贝至相应目录 - 检查代码规范