介紹一個小程序預處理器

前言

用過原生，用過 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 監聽文件變化，動態解析變更文件、處理靜態資源