介绍一个小程序预处理器

前言

用过原生，用过 wepy，用过 mp-vue，但是都不是非常满意，原生的痛点是文件太多，wepy 和 mp-vue 的问题见 mpvue和wepy问题总结，最后不得不和同事一起做了一个超轻量的小程序单文件解析器 mp-parser，在贴合原生语法的同时解决掉文件太多的痛点。并配套研发了脚手架 mp-parser-cli ，提供了很多通用能力比如字体压缩、代码压缩、通用组件、http & cookie 封装等。

单文件形式

mp-parser 的核心就是单文件解析以及热更新，下面为一个语法示例（demo.vue），标签内的所有语法皆为原生语法。

<!-- config 标签下的内容会被解析到 .json 文件中 -->
<config>
    {
        usingComponents: {}
    }
</config>

<!-- template 标签下的内容会被解析到 .wxml 文件中 -->
<template>
     <navigation title="自定义导航栏"></navigation>
</template>

<!-- script 标签下的内容会被解析到 .js 文件中 -->
<script>
Page({})
</script>

<!-- style 标签下的内容会被解析到 .wxss 文件中，支持 sass 语法 -->
<style lang="scss">
</style>

通用能力

mp-parser 脚手架提供了非常多的通用能力，详细文档见 github地址。

`http` 请求

将 http 请求 promise 化，简化了请求语法，且会自动携带 cookie

Page({
    onLoad() {
        // get
        this.$http.get('url', {params: ''}).then((res) => {}).catch((err) => {});

        // post
        this.$http.post('url', {params: ''}).then((res) => {}).catch((err) => {});
    }
})

通用组件

我们提供了非常多的通用组件，比如常用有

自定义导航栏 navigation
拖拽卡片 drag-card
倒计时 count-down
省略文本 ellipsis-text
吸底输入框 fixed-inputter
图片裁剪器 image-cropper
范围选择器 range-slider
全屏录像 video-recorder
左滑删除 sideslipping

通用弹窗

Page({
    onLoad() {
        // { title, needHideLoading }
        this.$showSuccess('操作成功', false);

        // { title, content, needHideLoading}
        this.$showError('操作失败', '操作失败，请稍后重试', false);

        this.$showLoading('数据加载中...');
        this.$hideLoading();
    }
})

字体压缩

字体配置完后执行以下命令，具体配置教程见字体压缩配置教程

npm run fontCompression

安装使用

# 安装脚手架
npm install -g mp-parser-cli

# 新建项目
mp-parser-cli-init <project_name>

# 安装依赖
cd <project_name>
npm install

# 运行
npm run dev

# 打开开发者工具，选择dist目录，查看效果

补一下各库的核心实现方案

小程序压缩工具 wx-minifier

参考 html-minifier 的思路，做了一个适合小程序的 wxml-minifier，核心思路：解析文档流，处理标签、属性，移除注释、多余空格、换行等。
基于 cssnano，替换了少部分不适用的逻辑，用来压缩 wxss 代码。
使用 uglify-es 压缩 js 代码

小程序脚手架 mp-parser-cli

通过 commander 解读命令行
通过 download-git-repo 拉取 github 模板仓库到本地

小程序模板仓库 mp-parser-template

封装通用能力、通用弹窗、工具方法、通用组件等

小程序预处理器 mp-parser

使用 vue-template-compiler 解析单文件
使用 node-sass 解析 sass 内容
使用 chokidar 监听文件变化，动态解析变动文件、处理静态资源